2024新卒技術研修_FE①

フロントエンド研修 HTML/CSS 2024年新卒研修岡本済 2024/05/23

「よくわからないがとりあえず動くし、なんか作れた」を達成する細かいことはおいおい覚えて行けばいいので、とりあえず何か作れた体験をしてほしい怪しい部分を自分でデバッグをできるようになっている HTML, CSSは動くまでの学習コストは他言語に比べ低く、開発業務で必要なレベルの学習コストは高い基本的な調べ方と背景にある概念を理解し、仮説をもとに試行錯誤できるようになるようになろう例: CSSのカスケーディングや詳細度をもとに、なぜCSSが当たらないか推測する目標: フロントエンド技術に親しむ

Today’s TimeTable 3 コンテンツ時間概要午前の部 10:30~12:30 HTML, CSS
お昼 12:30~13:30 午後の部 13:30~18:00ごろ演習 1時間おきに5分休憩を取ります忘れてたらコメントスクリーンで荒らしてください

4 0. Introduction

Webフロントエンドの簡単さ・難しさフロントエンド開発経験があれば、簡単だという印象を持っている人も多いかも実際、ブラウザで動くものを作るまでに理解しなければならない概念が少ない一方で、大規模開発ではフロントエンドへの深い知識が必要となる - さまざまなデバイス・ブラウザ・アクセス方法で正しく動作する

6 1.HTML

HTMLとは 7 HTMLとは、Webページを作成するためのマークアップ言語 Webページのドキュメントがどのような構造と意味をもつのかを、機械が読めるように記述するブラウザがHTMLを読み込むことで、Webページが描画されるマークアップ言語: テキストの構造を記述するための言語

9 1.1 HTMLの基本

HTMLの基本 10 HTMLは意味の異なるHTML要素をたくさん組み合わせて、 HTMLドキュメントを表現します次の3つを覚えていれば、研修中は大丈夫です 1. HTML要素の使い方、書き方 2. HTML全体の書き方 3.
よく使うHTML要素事前学習でやっていると思うのでざっくり進めます

HTML要素の構造 11 1つのHTML要素は3つの部分から構成されている。 - 開始タグ <タグ名> - コンテンツコンテンツ -
終了タグ </タグ名> 同じタグ名の開始・終了タグで囲われた要素が、一つの HTML要素になります。なお、HTML要素の中にHTML要素を含むことができます。 Mozilla Contributorsによる帰属と著作権のライセンスは、CC-BY-SA 2.5に基づいてライセンスされています。

HTML要素の属性 12 HTML要素の属性は、全ての要素に共通の属性と要素ごとの属性があるグローバル属性: class, id, role属性や、イベントハンドラー属性など要素特有の属性: a要素の href
属性など要素特有のHTML属性を調べたい時は、リファレンスから属性セクションを調べる例: img要素の属性一覧

13 1.2 HTMLの基本要素

パラグラフ要素使用例: <p>コンテンツ</p> テキストコンテンツを入れるための最もよく使われる要素で、テキストの段落をあらわす。パラグラフ要素は、通常前後に改行が含まれる形で表示される。イメージとしては、ドキュメントを段落（パラグラフ）ごとに p 要素で囲うイメージで使用する。

リスト要素使用例: <h3>ランチメニュー</h３> <ul> <li>ハンバーグ定食</li> <li>野菜炒め定食</li> <li>豚骨ラーメン</li> </ul> 箇条書きを表現するとき、リスト要素を使用する順序の有無で以下の二つから選択する
ol: Ordered List ul: Unordered List

アンカー要素使用例: <a href="https://example.com/">Example.com</a> アンカー要素はWebサイト同士のリンクや同じページ内へのハイパーリンクを作成する注意: リンクのテキストはリンク先の内容を説明すること「詳細はこちら」 ◦「詳細はこちら: よくある質問」
不適切なリンクテキストの改善例

span要素・div要素インラインレベル要素・ブロックレベル要素の汎用コンテナ通常スタイリングやグルーピングのために使う

18 1.3 メタデータ

メタデータとは 19 HTMLの中で、画面に表示されないものを記述する部分です。この部分で記述するものとして、以下があります - HTMLページのタイトル - CSSスタイルシートの読み込み -
SNSシェアやSEOのために必要なメタデータ(OGP) 演習のタイミングで必要になる実装方法は Web.devの記事を参考にしてください。

20 2. CSS

CSSとは何か 21 CSSはWebページのデザインやレイアウトをコントロールする言語 HTMLで指定された要素のスタイルを変更することができるこれにより、Webページのスタイリングをカスタマイズすることができる ``` p {
color: red; } ``` ``` <head> <meta rel=”style.css” /> </head> <body> <p>This is red!</p> </body> ```

22 2.1 CSSの基本

CSSの基本要素 23 CSSルールは基本的に以下の3要素を記述すれば良い 1. セレクタ 2. プロパティ 3. 値 ```
p { color: red; } // 全てのp要素を赤にする .class { color: blue; } // class=”class”の要素 #id { color: green; } // id=”id” の要素 ```

CSSの基本要素セレクタ 24 CSSセレクタは任意のHTML要素にスタイルを当てる方法主要なセレクタとして3つのセレクタがあります - 要素セレクタ - クラスセレクタ -
IDセレクタそれぞれ次の形で記述します - 要素セレクタ HTML要素名 - クラスセレクタ .クラス名 - IDセレクタ #ID名参考: MDN | CSSセレクター ``` p { color: red;} /* 全てのp要素を赤にする*/ .class { color: blue; } /* class=”class”の要素 */ #id { color: green; } /* id=”id” の要素 */ ``` TODO: 複雑セレクタ ``` a#selected { } [type="checkbox"]:checked:focus { } ```

CSSの基本要素セレクタ 25 Html ``` <body> <h1 class=’’title’>Hello</h1> <p>This is
red</p> </body> ``` css ``` p { color: red; } ``` CSSはHTMLの指定した要素を”セレクト”して装飾する

開発者ツールでCSSをいじる 26 • DevToolの使い方の話 ◦ https://developer.chrome.com/ docs/devtools/open?hl=ja ◦ 実際に示すこと ▪
styleを変える ▪ 有効なCSSのルールをみる ▪ Padding, Marginがいくつかみる

CSSの基本要素プロパティ 27 CSSプロパティとは、セレクタによって指定された要素の振る舞いを具体的に定義するキーと値の組です今回は以下を紹介しますが、無数のプロパティが存在します 1. color, background-color 2.
width, height 3. font-size, line-height 4. margin, padding 「これやりたいんだけどプロパティないかな？」って思った時は、Web サイトで実例がないか探すのが手っ取り早いです他のプロパティについては Learn CSS などを参考にしてください ``` p { color: red; } /* 全てのp要素を赤にする*/ .class { color: blue; } /* class=”class”の要素*/ #id { color: green; } /* id=”id” の要素 */ ```

詳細度 28 Q: 同じ要素に競合するCSSルールが当たるとどうなる？ A: セレクターをみて、優先度が高いものが適用される詳細度のスコアリングについては、セレクタの種類ごとのスコアを参照してくださいプラクティス:
- 必要な要素を選択しやすいクラスセレクタでCSSを記述する e.g. .card-container - 詳細度の強いルール (idセレクタや!importantなど)をむやみに使わない <p class=”text” id=”container”>Hello</p> /* 要素セレクタ */ p { color: blue; } /* クラスセレクタ */ .text { color: green; } /* IDセレクタ */ #container { color: red; }

ボックスモデル 29 CSSは要素のレイアウトをボックスモデルとして表現しています 4つの領域からなり、対応するプロパティで制御できます 1. コンテンツ領域 width, height 2.
パディング領域 padding 3. ボーダー領域 border 4. マージン領域 margin Mozilla Contributorsによる帰属と著作権のライセンスは、CC-BY-SA 2.5に基づいてライセンスされています。

ブロックボックスとインラインボックス 30 CSSのボックスには、主にブロックボックスとインラインボックスが存在しますブロックボックス - 新しい行から始まる - widthが未指定のとき利用可能な領域を100%占める -
Padding, margin, borderにより他の要素と距離ができるインラインボックスは通常のブロックボックスと挙動が異なります - height, width を指定しても反映されない - 他の要素と同じ行に配置される - 利用可能な幅100%をとる代わりに、必要な幅のみを占める参考: MDN | ボックスモデル Mozilla Contributorsによる帰属と著作権のライセンスは、CC-BY-SA 2.5に基づいてライセンスされています。

31 2.2 演習で使う CSSパターン

中央揃え 32 中央揃えは実装方法がいくつかあり、その要素がインラインレベルかボックスレベルかで挙動が異なる Flexboxを使えるならFlexboxで実装してしまうと楽実装パターンについてはCentering in CSS: A Complete
Guideを参考にすると良い

PC, SPの切り替え 33 • 1つのページでPC・タブレット・スマホに対応する • 画面の幅によって表示を切り替えるなど • レスポンシブデザイン例：DMM
TV • レスポンシブにせず、PC/SP別々で作っている例：DMMトップ

メディアクエリ 34 演習では、CSSのメディアクエリを使ってPC/SPの表示を切り替えるようにしてください。右のコード例のように記述することができます。 .card { width: 500px; background-color:
aqua; @media (max-width: 768px) { width: 100%; } }

35 演習

DMM Spaceを作ろう • GitHub Enterpriseでリポジトリを作成 • 進捗表に作ったリポジトリのリンクを貼ってください • ローカルで開発開始！
• デザイン資料 • デザインカンプ • LP画像置き場

2024新卒技術研修_FE①

2024新卒技術研修_FE①

DMM.com_新卒採用

More Decks by DMM.com_新卒採用

Featured

Transcript

フロントエンド研修 HTML/CSS 2024年新卒研修岡本済 2024/05/23

Today’s TimeTable 3 コンテンツ時間概要午前の部 10:30~12:30 HTML, CSS

4 0. Introduction

6 1.HTML

9 1.1 HTMLの基本

HTMLの基本 10 HTMLは意味の異なるHTML要素をたくさん組み合わせて、 HTMLドキュメントを表現します次の3つを覚えていれば、研修中は大丈夫です 1. HTML要素の使い方、書き方 2. HTML全体の書き方 3.

HTML要素の構造 11 1つのHTML要素は3つの部分から構成されている。 - 開始タグ <タグ名> - コンテンツコンテンツ -

HTML要素の属性 12 HTML要素の属性は、全ての要素に共通の属性と要素ごとの属性があるグローバル属性: class, id, role属性や、イベントハンドラー属性など要素特有の属性: a要素の href

13 1.2 HTMLの基本要素

リスト要素使用例: <h3>ランチメニュー</h３> <ul> <li>ハンバーグ定食</li> <li>野菜炒め定食</li> <li>豚骨ラーメン</li> </ul> 箇条書きを表現するとき、リスト要素を使用する順序の有無で以下の二つから選択する

span要素・div要素インラインレベル要素・ブロックレベル要素の汎用コンテナ通常スタイリングやグルーピングのために使う

18 1.3 メタデータ

メタデータとは 19 HTMLの中で、画面に表示されないものを記述する部分です。この部分で記述するものとして、以下があります - HTMLページのタイトル - CSSスタイルシートの読み込み -

20 2. CSS

CSSとは何か 21 CSSはWebページのデザインやレイアウトをコントロールする言語 HTMLで指定された要素のスタイルを変更することができるこれにより、Webページのスタイリングをカスタマイズすることができる ``` p {

22 2.1 CSSの基本

CSSの基本要素 23 CSSルールは基本的に以下の3要素を記述すれば良い 1. セレクタ 2. プロパティ 3. 値 ```

CSSの基本要素セレクタ 24 CSSセレクタは任意のHTML要素にスタイルを当てる方法主要なセレクタとして3つのセレクタがあります - 要素セレクタ - クラスセレクタ -

CSSの基本要素セレクタ 25 Html ``` <body> <h1 class=’’title’>Hello</h1> <p>This is

開発者ツールでCSSをいじる 26 • DevToolの使い方の話 ◦ https://developer.chrome.com/ docs/devtools/open?hl=ja ◦ 実際に示すこと ▪

CSSの基本要素プロパティ 27 CSSプロパティとは、セレクタによって指定された要素の振る舞いを具体的に定義するキーと値の組です今回は以下を紹介しますが、無数のプロパティが存在します 1. color, background-color 2.

詳細度 28 Q: 同じ要素に競合するCSSルールが当たるとどうなる？ A: セレクターをみて、優先度が高いものが適用される詳細度のスコアリングについては、セレクタの種類ごとのスコアを参照してくださいプラクティス:

ボックスモデル 29 CSSは要素のレイアウトをボックスモデルとして表現しています 4つの領域からなり、対応するプロパティで制御できます 1. コンテンツ領域 width, height 2.

ブロックボックスとインラインボックス 30 CSSのボックスには、主にブロックボックスとインラインボックスが存在しますブロックボックス - 新しい行から始まる - widthが未指定のとき利用可能な領域を100%占める -

31 2.2 演習で使う CSSパターン

中央揃え 32 中央揃えは実装方法がいくつかあり、その要素がインラインレベルかボックスレベルかで挙動が異なる Flexboxを使えるならFlexboxで実装してしまうと楽実装パターンについてはCentering in CSS: A Complete

PC, SPの切り替え 33 • 1つのページでPC・タブレット・スマホに対応する • 画面の幅によって表示を切り替えるなど • レスポンシブデザイン例：DMM

メディアクエリ 34 演習では、CSSのメディアクエリを使ってPC/SPの表示を切り替えるようにしてください。右のコード例のように記述することができます。 .card { width: 500px; background-color:

35 演習

DMM Spaceを作ろう • GitHub Enterpriseでリポジトリを作成 • 進捗表に作ったリポジトリのリンクを貼ってください • ローカルで開発開始！