フロントエンド講習とは？

弊社OBGでは、毎月第2土曜日の11:00〜19:00にフロントエンド講習を行っています。
主にHTML、CSS、JavaScript（以下JS）を使ったWebに関しての講習で、今回は普段から実施しているオンライン開催の模様を今回展開させていただこうと思います。

前回の記事はこちら！
https://qiita.com/ume_work0831/items/ddee7e19263581021a8f

HTML/CSS　初級

初級担当（@ume_work0831）です。
初級講座では、ひとりでLP（ランディングページ）を作成できるようになることを
目指した講習を実施しております。

LPとは、ざっくりと説明をすると、縦長1ページのWEBページで広告や検索結果から、
該当ページにアクセスした訪問者の方に、インパクトを与えて、購入や申し込み、
資料請求など企業などが達成したい成果を得るためにつくられるページとなります。

今回、主に行った内容は以下の通りです。

◆講習内容◆

・フロントエンドとは？
・HTML/CSSの役割と正しい記述の必要性について
・Visual Studio Codeとおすすめプラグインについて
・GitとGitHubについて
・親子関係とID/クラスの違い
・命名規則について
・ブロックレベル要素とインラインレベル要素
・ボックスモデルについて
・命名規則BEMについて
・レイアウトのあれこれ（フレックスレイアウトやグリッドレイアウトなど）
・画像の加工とトリミング

レイアウトについては、前回の記事
ボックスモデルについては、こちらの記事で
詳しく説明をしてきました。

今回は、CSSでできる画像の加工やトリミングについて、
講習で紹介しているうちの一部を紹介しちゃいます！！

画像のトリミングの方法

1. object-fit

画像や動画などのメディア要素を、親要素のサイズにどのようにフィットさせるか
を指定するCSSプロパティです。

例えば、オリジナルサイズが下記のように横長の画像の際に

※素材元：ぱくたそ様

正方形にしたいと、画像サイズを以下のように設定すると

img {
    width: 300px;
    height: 300px;
}

ただ画像のサイズを正方形になるように設定しても、
このように横の比率がおかしくなってしまいます。
そこで便利なのが「object-fit」です。

例えば、「object-fit: cover」を設定してみると……

img {
  width: 300px;
  height: 300px;
  object-fit: cover; 
}

綺麗な比率で正方形にできました！
POINTは、画像自体（要素、またはに設定しているクラスなど）に指定することです。

2.border-radius

ボックス（要素）の角を丸くするためのCSSプロパティ。
四角い要素を角丸のボタンにしたり、円形の画像を作成できます。

下記のように設定をすると、完全に丸くしたり、角丸にするなどができます。

img {
  width: 300px;
  height: 300px;
  object-fit: cover;
  border-radius: 50%;
}

img {
  width: 300px;
  height: 300px;
  object-fit: cover;
  border-radius: 16px;
}

画像の加工の方法

filter

画像や要素に視覚的なエフェクトを加えるCSSプロパティです。
※ぼかし（blur）、明るさ（brightness）、コントラスト（contrast）など

例えば、ぼかしの場合は以下のように画像に対して設定します。

img {
  width: 500px;
  filter: blur(5px);
}

他にも明るさやコントラストを調整することも可能です。

「filter」だけで色々なことができますので、ぜひ色々と試してみてください！
※参考サイト様

紹介したもの以外にも、講習ではさまざまな内容を解説しています！

お知らせ

オブジェクティブグループでは X（旧Twitter）にて
ITの小ネタや便利技、アニメやゲームの話題などを平日毎日投稿中！

ぜひフォロー＆いいねをお願いします👇
https://x.com/obg_ocr