未経験で独学中

・pythonを勉強するが。。
だめです。未経験で募集がありません。

私は、工業高等専門学校の機械科を専攻していたのですが、意外にもプログラミングとかかわることが多く、卒業研究で「機械学習についてやってみてくれ」と言われ、pythonを独学で学びながら取り組むことになりました。
最終的には、サル、犬、猫の判別ができる画像識別のプログラミングを参考書などを見ながら作成。識別できたから何ができるんだ。。。？というのが最初の意見でした。

　その後は、機械系の修理部門に就職し、4年間働いた。4年間働いても自信もっていえるスキルはほぼゼロに等しい。。。人手不足の中働いているとほしくなってくるものは自動化。機械学習で画像で覚えさせできそうじゃね。。？4年もプログラミングを忘れ、ゲームと仕事に打ち込んでいたら、まあ、知識は0よね。
　エクセルの自動化から行い少しづつプログラミングの楽しさがわかり、またpythonを思い出しながら環境構築を行った。かといってビッグデータはないし、なにも作れなくない？？？

世の中の機械業界はだんだん人口が減っているため人手不足や人件費などを削減した部分と現場からわ

HTMLとCSSでタブ表示デザインをする

みなさんごきげんよう。shinoです。勉強を始めて一年、ポートフォリオを作っているのですが難しかった部分を自分のより深い理解のために書きたいと思います。
早速ですがまずは表現したいものがこちらです。上のタブ部分をクリックすると下のコンテンツの表示が変わります。

## 動き

## 実際のコード
こちらがHTMLになります。
詳しい説明は下に書いてあります。

“`sample.html

きいろ

CSSで餅を描いてみる

書く内容がPythonに偏っていたので、たまには違うことをやりたいなと。
とりあえずCSSでイラスト作れたら嬉しいなと思ったので、簡単な絵を描いてみました。

## 餅
餅がぷくっと膨れている様子や焦げ目などは難しいので却下。鏡餅らしきものをさくっと作ってみました。

“`mochi.html

“`

“`mochi.css
.bottom {
width: 300px;
height: 100px;
line-height: 100px;
backgrou

HTML live-reload テンプレート

## はじめに

HTML を書き換えて見た目を確認したい時、何度もブラウザを手動リロードを繰り返しているとだんだん面倒になってきます。そこで HTML の保存のたびに自動ブラウザのリロードまでやってくれる Live Reload 機能を使いたくなるのですが、npm の live-server というものを使えばそれが実現できます。

## セットアップ

“`terminal
npm init -y
npm install live-server
npm set-script start “live-server”

echo “node_modules” > .gitignore

curl https://raw.githubusercontent.com/richardimaoka/html-clone-setup/main/style.css > style.css
curl https://raw.githubusercontent.com/richardimaoka/html-clone-setup/main/index.html > index.html

npm r

CSS positionの使い方とは？？

## はじめに

CSSって初めに勉強するのに、奥が深くて難しいですよね？？(キリがない)
今回は**position**プロパティってどうなってるんだっけ？？と毎回忘れるので、備忘録としてこの記事を書きました。

## 対象者
この記事は下記のような人を対象にしています。

– CSSの**position**の使い方を知りたい方
– CSSの**position**の理解が曖昧な方
– 駆け出しエンジニア
– プログラミング初学者

## positionとは

positionとはざっくりいうと**要素の位置を決める**ためのプロパティです。

※要素とは：HTMLの開始タグ〜終了タグまでのカタマリ。
例：“`

Hello, world!

“`

## positionの書き方

positionプロパティはCSSで以下のように書きます。
“`css:index.css
セレクタ { position: 値;}
“`
※セレクタとは：「CSSによるデザイン指定を**どこの部分に対して適用するか**」を決めるものになりま

HTML5での script タグの書き方

たまに script タグを書く時にこの書き方を見るけど
“`

“`

HTML5 からはこの書き方で OK
“`

“`

外部ファイルを読み込むには、src 属性をつける
“`

“`

SPAをわかりやすく説明する

SPA・・・Single Page Applicationの略

特徴
ブラウザによるページ遷移を行うことなく、単一のWebページでコンテンツの切り替えをおこなうアプリケーションのこと。

SPAサイトをまとめたものはこちら
https://bm.s5-style.com/category/technic/spa

従来のWebアプリは、
ユーザのアクション→それに対しサーバーに通信（リクエスト）→ユーザーでHTMLを作成し、ブラウザに返す（レスポンス）→HTMLに反映
この方式では変更のない要素（フッター、ヘッダーなど）までも読み込む必要があり、時間（コスト）がかかる。
ex)ページ遷移の時に一瞬画面が白くなる特徴。

それに対して、SPAは、
ユーザーのアクション→それに対して必要なデータのみをサーバーに要求→返ってきたデータをJSで処理→処理をHTMLに反映
このように、ブラウザでできる処理はJSで終わらせることで、サーバーとの通信量を抑え、動作の向上が図れる。また、データの取得は非同期的に実行でき、ページ遷移時に画面がチラつくことなく、快適に閲覧できる。

SPAを使うメリット

プルダウンのフォームでプレースホルダーのようなものを実装する方法（Rails）

# はじめに

Railsでアプリを作成中、以下のようなフォームを実装したいときに、どのように実装するかが勉強になったので記載します。

– 未選択時
– プルダウンを表示
– 選択後

前提として、**selectタグでは、placeholder属性が効かない

【今更聞けない】HTML/CSS/JavaScript でWebページをつくろう

# YouTube

こちらの記事は、2022年7月29日18:00~19:30 YouTubeライブ配信の資料です。

▼ イベントページ↓↓↓

https://biosbootcamp.connpass.com/event/255131/

# Webページをつくる前に

マークダウン記法をご存知ですか？

▼マークダウン記法 サンプル集↓↓↓
https://qiita.com/tbpgr/items/989c6badefff69377da7

# Webページをつくろう!

親要素をはみ出すセクションの見出し

みなさんごきげんよう。HTML、CSSの勉強を始めて一年、ポートフォリオを作っているのですが難しかった部分を自分のより深い理解のために書きたいと思います。
早速ですがまずは実践したいものがこちらです。
各セクションの仕切りで、親要素を超える線です。（今回は擬似要素(before, after)を使って実装しました。）


redは右にはみ出し、blueは左にはみ出しています
早速コードの解説をしていきます。

これが完成したHTMLとCSSです
下の方に詳しい説明をしているので見たい方は見てください。

“`sample.html

【データモデル】Sharperlight CANVAS

今回は、[Sharperlight](https://sharperlight.jp/)エンジンを屈指して作成した派生品 **Sharperlight CANVAS** を紹介したいと思います。
Sharperlight CANVASは、お手持ちの画像とデータを結びつけて視覚的にデータを表現するための支援ツールです。
SharperlightのカスタムWebレポート機能をフルに利用して作成しています。
Sharperlightにはこのような使い方もあるということがご理解いただければ幸いです。
### 概要 ###
HTMLとJavaScripでガシガシ書いたコードをSharperlightのWebレポートに梱包しています。
➊記述したコードをリソースとして公開クエリにインポート、➋カスタムHTMLとしてそれを参照します。
そしてSharpe

【jQuery】splitで正規表現を使う＆配列から取り出す

こんにちは。E-kan株式会社の岡田です。

既存ページのABテストのため、外部ツールにjQueryでテストしたい要素を書き込んでページを上書きするという業務をよくやるのですが、この間地味に苦労したので備忘録パート２。
ざっくり必要なところだけ抜き出すとこんな感じです。

## 変更前html
“`html

サンプルページで可変文言の
テストをします

“`

以下の条件のある「可変文言」の部分をstrongで囲ってほしい。

– テストページはcmsで管理されており複数存在する
– 「可変文言」の部分はページによってテキストが異なる

出来上がりは、こう。

## 変更後html
“`html

サンプルページで可変文言の
テストをします

“`

## jQuery
“`javascript
//h1のテキストを「で」と「の」で区切り、配列２個めの要素を取り出す
var txt = $(‘h1’).text(

HTML関連にはまった新卒1年目のお話

## ＊はじめに
みなさん、はじめまして！
新卒一年目の初投稿です:tulip:
簡単に自己紹介します。
– 学生時代は文系
– ゼミでは映像制作をしていた
– 学部が経営情報学部だったためプログラミング入門があった
– 授業はすごく簡単でintやStringの話などだった

こんな感じでほぼプログラミングに触ったことがない初心者です。
Qiitaに何か書きたいけど、技術的なことはまだまだ提供できるものではないなと思い何を書こうと悩んだところ、今回は新卒1年目・プログラミング初心者がOJT期間中にHTMLにはまった・楽しいなと感じた話についてみなさんにお伝えできればと思います。

## ＊私が作成したもの
以下の通りレスポンシブデザインを用い、モバイルアプリ・webアプリ両方対応のレストランマップのデザインを作成しました。

“`css:text.css
@media screen and ( max-width:767px )
“`
このコードの下にモバ

［個人用］いくつかの用語整理

—
– **Iterable**
反復可能なオブジェクト。配列はiterableの代表的な例。
—
– **List**
配列の限界のために作られたデータ型。配列はサイズを決めなければならないが、サイズが予想できない場合が多いため、Listはサイズの指定なしで使えるよう作られた。Listはインタフェース（親クラス）、ArrayListはListの代表的な継承しクラスだ。
—
– **Mustacheの繰り返し文**
“`
{{#article}} {{!articleを繰り返す}}

{{id}}

{{!articleのfield}}

{{title}}

{{!articleのfield}}

{{{content}}}

{{!articleのfield}}

{{/article}}
“`
—
– **HTMLのaタッグ**
Hyperlinkをかけるタッグ
—
– **HTTP

これだけはおさえておきたいPlaywrightコマンド集

# はじめに
この記事では、Playwrightでテストを書いていく上で「こんな時どう書く？」をまとめた記事です。
コマンド集は[公式ドキュメント](https://playwright.dev/docs/intro)にもあります。
コマンドがたくさんあり様々なことができます。
本記事ではその中からよく使いそうな**これだけはおさえておきたい**ものをピックアップして、要素の操作と検証など実践に使いやすい形のサンプルを用意してみました。
また、PlaywrightのテストコードだけでなくHTMLも合わせて載せておりますので参考にしていただけたらと思います。

以下のコマンドの紹介では、Playwrightのデモ用のページを利用しています。
* デモページ：https://demo.playwright.dev/todomvc

# 環境
以下の環境下で動作を確認しました。
* OS : Windows 10, Ubuntu 20.04
* Node : v16.15.1

# Playwrightで扱えるロケータ
CSS, XPathはもちろんのこと、PlayWrightでは表記され

【Chrome拡張機能】Githubのコミット間差分表示ページURLを生成して開く

# 概要
掲題のChrome拡張機能「GithubDiff」を作成したので紹介します。
# 目次
– [概要](#概要)
– [目次](#目次)
– [目的](#目的)
– [利用方法](#利用方法)
– [想定](#想定)
– [手順](#手順)
– [参考動画](#参考動画)
– [書いたコードの紹介](#書いたコードの紹介)
– [ディレクトリ構成](#ディレクトリ構成)
– [manifest.json](#manifestjson)
– [popup.html](#popuphtml)
– [popup.js](#popupjs)
– [つまづいた問題](#つまづいた問題)

# 目的
ChromeでGithubのコミット間差分表示ページに移動する際、アドレスバーのURLを編集する手間を簡単にする。

# 利用方法
## 想定
Pull requestにコードレビューと修正コミットがあり、修正前後のコミット間差分を表示したい。

## 手順
– Chrome拡張機能メニューにある「GithubDiff」のアイコンをクリックする。
– ポップアッ

【CSS】学びメモ

solid:実線
* { :全体を指定
box-sizing: box-border;　paddingを含める

学びメモ形式で書いてみたけど何にも理解できひん。
そのとき理解してても見返したときに分からんかったら意味ないから、
2回目に見る自分は他人やと思ってメモしておく。
初めは時間かかるかもしれへんけど、慣れやと思うからとりあえずひたすら続ける。

【css、js】ハンバーガーメニュースニペット

# ハンバーガーメニュースニペット

See the Pen
ハンバーガーメニュー by __m-sato__ (@__m-sato__)
on CodePen

Adobe Webフォントで、Loading画面を使用して、かつちらつきをなくす方法

# はじめに

Adobeが用意しているWebフォント。
このWebフォントの欠点である、「Webフォントを読み込み、ブラウザに反映させるのに若干ラグがあるために、文字幅の変更が発生することから、サイトが一瞬ちらついて表示されているように見える(Flash Of Unstyled Text 、FOUT)」という症状について、対策方法を記載しました。
https://qiita.com/hirossyi73/items/6551bc32f0d8c2e56092

ですが、上記のやり方にはいくつかの欠点がありました。それは、

– htmlタグに「visibility: hidden;」cssを付与しているがために、**基本的に初期表示が、白色ないしは単色で固定されてしまう**
– Loading画面とうまく組み合わせることができない

といった問題になります。

**やっぱり、Loading画面をうまく活用したい。** 読み込んでいる間は、デザイン性の高い画像を表示したい。そのような要望もあるはずです。
※Loading画面のイメージはこちら
https://photopizza.des

【CSS】ボックスの配置方法 position

Qiitaの右も左も分からないまま、初投稿で震えてます。
今日できるようになったことは、「position」。

・いつ使用するか：ボックスの配置方法が、相対位置(relative)か、絶対位置(absolute)かを指定するとき

・ここに表示！としたいときは、top,bottom,left,rightなどで位置を指定する
　positionはこれらとは違う

position:relative
position:absolute
のような書き方。

初めてなのでこのくらいで。
自分が困ったときに見返して思い出せる備忘録のような使い方を目指していきたいです。
少しずつクオリティ上がっていったらばんばんざい。