Slide 1

Slide 1 text

GTB2022 ビジュアル・スタイリング Webコーディング実践編

Slide 2

Slide 2 text

GTB2022 ・プロフィールサイトをデザイン・コーディングしてみよう・基本的なコーディングの知識を学ぶ HTML・CSSの基礎を⾝に着ける講義の⽬標

Slide 3

Slide 3 text

GTB2022 必要なアプリケーション Slack ブラウザエディター

Slide 4

Slide 4 text

GTB2022 ・区切りの良いところでコメントを拾って回答します・講義中も発表中も⾃由にコメントしてください講義中のルール

Slide 5

Slide 5 text

GTB2022 講義の流れ

Slide 6

Slide 6 text

GTB2022 13:30 14:30 14:45 15:45 16:00 17:00 作品提出・講評プロフィールページを実装してみる HTML CSS HTML・ CSSの基本

Slide 7

Slide 7 text

GTB2022 GTB2022 HTMLとCSS

Slide 8

Slide 8 text

GTB2022 PHP (JavaScript) JS CSS HTML Webページを作る⾔語

Slide 9

Slide 9 text

GTB2022 PHP JS CSS HTML Webページを作る⾔語

Slide 10

Slide 10 text

GTB2022 PHP JS CSS HTML Webページを作る⾔語動的（プログラミング）⾔語

Slide 11

Slide 11 text

GTB2022 PHP JS CSS HTML Webページを作る⾔語動的（プログラミング）⾔語静的

Slide 12

Slide 12 text

GTB2022 Webページを作る⾔語条件、またはユーザーの⾏動により表⽰される内容が変わる dynamic 動的誰がいつ⾒ても同じように表⽰される static 静的

Slide 13

Slide 13 text

GTB2022 Webページを作る⾔語条件、またはユーザーの⾏動により表⽰される内容が変わる dynamic 動的検索今⽇は2022年5⽉19⽇ 100⼈⽬の訪問者ですこんにちは○○さん

Slide 14

Slide 14 text

GTB2022 PHP JS CSS HTML Webページを作る⾔語動的（プログラミング）⾔語静的

Slide 15

Slide 15 text

GTB2022 GTB2022 HTML HTML

Slide 16

Slide 16 text

GTB2022 13:30 14:30 14:45 15:45 16:00 17:00 作品提出・講評プロフィールページを実装してみる HTML CSS HTML・ CSSの基本

Slide 17

Slide 17 text

GTB2022 ・⼈間が⾃然に⾒分けている各要素の役割をコンピュータに理解させるため・Webページにおける構造を定義するための⾔語 HTMLとは

Slide 18

Slide 18 text

GTB2022 HTMLとは

HTMLとは

HTMLとは？

Hypertext Markup Language の略で、 Webサイトをマークアップするための言語です。

タグとは？

HTML上の役割を表す記号で、文字をタグで囲うことで役割を割り当てることができます。

HTML上の役割を表す記号で、⽂字をタグで囲うことで役割を割り当てることができます。タグとは？ HypertextMarkupLanguageの略で、 Webサイトをマークアップするための⾔語です。 HTMLとは？ HTMLとは

Slide 19

Slide 19 text

GTB2022 ・解凍したフォルダの名前を苗字（半⾓英字）に変更する・デスクトップなどに Zipファイルをダウンロードコーディングの準備

Slide 20

Slide 20 text

GTB2022 コーディングの準備 (GoogleChrome) ブラウザ (⾃由) エディター

Slide 21

Slide 21 text

GTB2022 コーディングの準備難しそうだ⼿順は想像できる簡単そうだ

Slide 22

Slide 22 text

GTB2022 代表的なHTMLタグ

HTMLとは

・h1は⼀度しか使えない？・h1〜h6まであり、セクションレベルに応じて使い分ける・⾒出しを定義するタグ heading h1

Slide 23

Slide 23 text

GTB2022 SEO ・主にGoogleの検索結果で Webサイトが上位に表⽰されるようサイトの構成を最適化すること・検索エンジン最適化

Slide 24

Slide 24 text

GTB2022 代表的なHTMLタグ

わたしは
フロントエンドチームに
所属しています

・pタグ内にブロック要素を⼊れることはできない・段落・改⾏を定義するタグ break br paragraph p

Slide 25

Slide 25 text

GTB2022 ブロックとインライン・インラインレベルの要素はブロック内に配置され、横に並ぶ・ブロックレベルの要素は⼀塊として扱われ、縦に積まれる・ブロック要素とインライン要素

Slide 26

Slide 26 text

GTB2022 代表的なHTMLタグ・終了タグが無い・src属性でファイル、 alt属性で代替テキストを指定・画像を表⽰するタグ image img

Slide 27

Slide 27 text

GTB2022 代表的なHTMLタグ

タイトル: 説明文

・dl>dt・ddがセット・定義リストを意味するタグ definitiondescription dd definitionterm dt definitionlist dl

Slide 28

Slide 28 text

GTB2022 代表的なHTMLタグ

項目
項目
項目

・ul・ol>liがセット・リストを定義するタグ listitem li orderedlist ol unorderedlist ul

Slide 29

Slide 29 text

GTB2022 HTMLでタグを使い分ける意味・適切なタグでマークアップすることでセマンティックなサイトになる・正しい⽂書構造を作ることで、情報を適切にセクショニングできる

Slide 30

Slide 30 text

GTB2022 セクショニング・⼈間にとって情報の順序が明確になり Webサイトそのものが分かりやすくなる・⽂書構造を明確にすること＝情報の整理

Slide 31

Slide 31 text

GTB2022 セマンティック・コンピュータにとって情報が明確になり Webサイトの評価が上がる・コンピュータに情報を正確に解釈させ、関連付けや情報収集を⾃動的に⾏わせること

Slide 32

Slide 32 text

GTB2022 CSS

Slide 33

Slide 33 text

GTB2022 13:30 14:30 14:45 15:45 16:00 17:00 作品提出・講評プロフィールページを実装してみる HTML CSS HTML・ CSSの基本

Slide 34

Slide 34 text

GTB2022 ・HTMLが各要素の役割を決めるのに対し CSSは各要素の⾒え⽅を決める・Webページにおける各要素のスタイルを指定するための⾔語 CSSとは

Slide 35

Slide 35 text

GTB2022 CSSとは HTML上の役割を表す記号で、⽂字をタグで囲うことで役割を割り当てることができます。タグとは？ HypertextMarkupLanguageの略で、 Webサイトをマークアップするための⾔語です。 HTMLとは？ HTMLとは HTML上の役割を表す記号で、⽂字をタグで囲うことで役割を割り当てることができます。タグとは？ HypertextMarkupLanguageの略で、Webサイトをマークアップするための⾔語です。 HTMLとは？ HTMLとは

Slide 36

Slide 36 text

GTB2022 CSSの基本セレクタ{プロパティ:値;}

Slide 37

Slide 37 text

GTB2022 CSSの基本セレクタ{プロパティ:値;} 何のどこをどうする

Slide 38

Slide 38 text

GTB2022 セレクタセレクタ{プロパティ:値;} 何の

Slide 39

Slide 39 text

GTB2022 セレクタ div { ････ } .name { ････ } #name { ････ }

Slide 40

Slide 40 text

GTB2022 プロパティの優先度・昨今の⾵潮でスタイルのために IDを付けることは少なくなっている・ID>クラス>タグの順で優先される・プロパティの指定⽅法によって優先度がある

Slide 41

Slide 41 text

GTB2022 プロパティセレクタ{プロパティ:値;} どこを

Slide 42

Slide 42 text

GTB2022 プロパティ div { color: ････; } div { border: ････; } div { width: ････; } ⽂字⾊を線を横幅を

Slide 43

Slide 43 text

GTB2022 値セレクタ{プロパティ:値;} どうする

Slide 44

Slide 44 text

GTB2022 値 div { color: blue; } div { color: #ffff00; } div { color: rgb(255, 0, 0); } ⻘⾊にする⻩⾊にする⾚⾊にする

Slide 45

Slide 45 text

GTB2022 ⾊の指定⽅法・カラーコードとは16進法でRGBを表した数値・カラーネームとは主な⾊に付けられた特定の英語名・カラーネーム、またはカラーコードなどで指定

Slide 46

Slide 46 text

GTB2022 カラーコード・#000000〜#ffffffの16進数で表記し、 1･2桁⽬:R、3･4桁⽬:G、5･6桁⽬:Bを表す・Red/Green/Blueの度合いを0〜255で指定、 256x256x256=16,777,216通りを指定できる

Slide 47

Slide 47 text

GTB2022 カラーコード 168g 121g 253g + + = #fd79a8 = a8 + 79 + fd

Slide 48

Slide 48 text

GTB2022 値 div { width: 100px; } div { width: 50%; } div { width: 1em; } 100pxにする 50%にする 1emにする

Slide 49

Slide 49 text

GTB2022 単位ピクセル単位の絶対的な⼤きさ指定親要素の⾼さ・横幅に対する割合フォントサイズに対する相対的な⼤きさルート要素のフォントサイズに対する相対的な⼤きさビューポートの⾼さに対する割合ビューポートの横幅に対する割合 px % em rem vh vw

Slide 50

Slide 50 text

GTB2022 コーディングの準備 (GoogleChrome) ブラウザ (⾃由) エディター

Slide 51

Slide 51 text

GTB2022 作るを横並び

Slide 52

Slide 52 text

GTB2022 横並びを作る img li li li ul

Slide 53

Slide 53 text

GTB2022 横並びを作る img div li li li ul

Slide 54

Slide 54 text

GTB2022 横並びを作る img div li li li ul div

Slide 55

Slide 55 text

GTB2022 横並びを作る

････

・divはブロック spanはインライン・囲んだ範囲を⼀塊として定義・意味を持たないタグ span span division div

Slide 56

Slide 56 text

GTB2022 横並びを作る div { ････display: flex; ････display: grid; } ・プロパティはdisplay ・ブロックを縦横に並べる gridlayout grid ﬂexiblebox ﬂex

Slide 57

Slide 57 text

GTB2022 横並びを作る .flex { ････display: flex; ････justify-content: space-between; } .flex_item { ････width: calc(50% - 20px); } ・たくさんの項⽬を機械的に並べるのが得意・縦横に並べられる ﬂex

Slide 58

Slide 58 text

GTB2022 横並びを作る .grid { ････display: grid; ････grid-template-columns: 1fr 2fr; ････grid-template-rows: 1fr; ････column-gap: 20px; ････row-gap: 20px; } ・IE⾮対応・列・⾏を設定、テンプレートを作れる・縦横に並べられる grid

Slide 59

Slide 59 text

GTB2022 ブラウザの対応状況・CanIuse... https://caniuse.com/ ・⼀部のブラウザが特定のスタイルに対応していない

Slide 60

Slide 60 text

GTB2022 技術の流⾏り廃り・最新のバージョンCSS3ではフレキシブルボックス（ﬂex）、またはグリッドレイアウト（grid）が主流・CSS2以前では、横並びを作るときは ﬂoatがよく使われていた

Slide 61

Slide 61 text

GTB2022 特定の状態の要素にスタイルを付ける

Slide 62

Slide 62 text

GTB2022 a:hover { ････color: #00f; } li:nth-child(3) { ････color: #f00; } ・マウスオーバー、 n番⽬、偶数・奇数番⽬、最初の、最後のなど・セレクタの特定の状態にスタイルを付ける疑似クラス疑似クラス

Slide 63

Slide 63 text

GTB2022 疑似クラスマウスホバー時の最初の最初の 5番⽬の 5の倍数番⽬の奇数番⽬の :hover :ﬁrst-child :last-child :nth-child(5) :nth-child(5n) :nth-child(odd)

Slide 64

Slide 64 text

GTB2022 吹き出しを作る

Slide 65

Slide 65 text

GTB2022 div::before { ････content: "★"; } div::after { ････content: "☆"; } ・装飾⽬的の他リストの先頭の記号、項⽬数の調整など・セレクタ内の最前・最後に疑似的な要素を追加できる疑似要素疑似要素

Slide 66

Slide 66 text

GTB2022 疑似要素吹き出しを作る

Slide 67

Slide 67 text

GTB2022 疑似要素

Slide 68

Slide 68 text

GTB2022 疑似要素

Slide 69

Slide 69 text

GTB2022 疑似要素

Slide 70

Slide 70 text

GTB2022 疑似要素吹き出しを作る

Slide 71

Slide 71 text

GTB2022 プロフィールページを実装してみる

Slide 72

Slide 72 text

GTB2022 13:30 14:30 14:45 15:45 16:00 17:00 作品提出・講評プロフィールページを実装してみる HTML CSS HTML・ CSSの基本

Slide 73

Slide 73 text

GTB2022 アコーディオンを作る

Slide 74

Slide 74 text

GTB2022 ここをクリックアコーディオンとは

Slide 75

Slide 75 text

GTB2022 ここをクリック Loremipsumdolorsitamet, consecteturadipiscingelit, seddoeiusmodtempor アコーディオンとは

Slide 76

Slide 76 text

GTB2022 結合⼦ .me .child {} .me > .child {} .me + .siblings {} .me ~ .siblings {} ・⼦孫結合⼦、⼦結合⼦、隣接兄弟結合⼦、⼀般兄弟結合⼦の4種類・スタイルを適⽤する要素をより精密に絞り込むための書き⽅結合⼦

Slide 77

Slide 77 text

GTB2022 結合⼦

････

････････

････

.me .child .grandchild

Slide 78

Slide 78 text

GTB2022 結合⼦ .me .child { ････background: blue; } .me .child .grandchild

Slide 79

Slide 79 text

GTB2022 結合⼦ .me > .child { ････background: blue; } .me .child .grandchild

Slide 80

Slide 80 text

GTB2022 結合⼦ .parent .sibling .me .sibling .sibling

････

Slide 81

Slide 81 text

GTB2022 結合⼦ .parent .sibling .me .sibling .sibling .me + .sibilng { ････background: blue; }

Slide 82

Slide 82 text

GTB2022 結合⼦ .parent .sibling .me .sibling .sibling .me ~ .sibilng { ････background: blue; }

Slide 83

Slide 83 text

GTB2022 結合⼦ div for="accordion" label type="checkbox" id="accordion" input HTML aの後、且つ同階層のb a~b aの直後のb a+b checked状態のa a:checked CSS

Slide 84

Slide 84 text

GTB2022 アニメーションを作るアニメーションを作るアニメーションを作る

Slide 85

Slide 85 text

GTB2022 ・単純な動きや、 HTMLの属性に連動したアニメーションが得意・軽い CSS CSSとJSの違い・PHPと組み合わせて通信なども・複雑な動きや、ユーザーの操作に応じたアニメーションが得意・場合によっては重くなる JS(JavaScript)

Slide 86

Slide 86 text

GTB2022 @keyframes name { ･･････0%{ ････ } ･････50%{ ････ } ････100%{ ････ } } div { ････animation: name duration easing : } アニメーション

Slide 87

Slide 87 text

GTB2022 実務レベルのスキル

Slide 88

Slide 88 text

GTB2022 実務レベルのスキル・スクリーン、プロジェクター、プリンター、テレビなど・特定のデバイスでのみスタイルを反映させるメディアクエリ @media ( ････screen and ････(max-width: 768px) ){ ････font-size: 14px; }

Slide 89

Slide 89 text

GTB2022 ・CSS変数、カスケード変数とも⾔う・変数に値を代⼊、使い回すことができるカスタムプロパティ --color-main: #000; div { ････border: --color-main solid 1px; ････color: --color-main; } 実務レベルのスキル

Slide 90

Slide 90 text

GTB2022 ・SASS・SCSSファイルをコンパイルすることで CSSファイルを⽣成する・記法の簡略化、⼊れ⼦などの記法によって CSSをより早く効率的に書く SASS・SCSS div { ････color: #000; ････p { ････････color: #f00; ････} } div { ････color: #000; } div p { ････color: #f00; } 実務レベルのスキル

Slide 91

Slide 91 text

GTB2022 発表会

Slide 92

Slide 92 text

GTB2022 13:30 14:30 14:45 15:45 16:00 17:00 作品提出・講評プロフィールページを実装してみる HTML CSS HTML・ CSSの基本

Slide 93

Slide 93 text

GTB2022 作品提出⾃分の苗字（半⾓英字）.zip css reset.css style.css image 画像ファイル index.html

Slide 94

Slide 94 text

GTB2022 ありがとうございました