GTB2022_webCoding

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

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

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

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

GTB2022 講義の流れ

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

GTB2022 GTB2022 HTMLとCSS

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

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

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

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

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

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

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

GTB2022 GTB2022 HTML HTML

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

GTB2022 HTMLとは <h1>HTMLとは</h1> <section> <h2>HTMLとは？</h2> <p>Hypertext Markup Language の略で、 Webサイトをマークアップするための
言語です。</p> </section> <section> <h2>タグとは？</h2> <p>HTML上の役割を表す記号で、文字をタグで囲うことで役割を割り当てることができます。</p> </section> HTML上の役割を表す記号で、⽂字をタグで囲うことで役割を割り当てることができます。タグとは？ HypertextMarkupLanguageの略で、 Webサイトをマークアップするための⾔語です。 HTMLとは？ HTMLとは

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

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

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

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

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

GTB2022 代表的なHTMLタグ <p>わたしは<br>フロントエンドチームに<br>所属しています</p> ・pタグ内にブロック要素を⼊れることはできない・段落・改⾏を定義するタグ break br
paragraph p

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

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

GTB2022 代表的なHTMLタグ <dl> ････<dt>タイトル</dt> ････<dd>説明文</dd> </dl> ・dl>dt・ddがセット・定義リストを意味するタグ definitiondescription dd
definitionterm dt definitionlist dl

GTB2022 代表的なHTMLタグ <ul> ････<li>項目</li> ････<li>項目</li> ････<li>項目</li> </ul> ・ul・ol>liがセット・リストを定義するタグ listitem
li orderedlist ol unorderedlist ul

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

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

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

GTB2022 CSS

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

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

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

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

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

GTB2022 セレクタ div { ････ } .name { ････ }
#name { ････ } <div> <div class="name"> <div id="name">

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

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

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

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

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

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

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

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

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

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

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

GTB2022 作るを横並び

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

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

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

GTB2022 横並びを作る <div> ････<div></div> ････<div></div> </div> ・divはブロック spanはインライン・囲んだ範囲を⼀塊として定義・意味を持たないタグ
span span division div

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

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

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

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

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

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

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

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

GTB2022 吹き出しを作る

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

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

GTB2022 疑似要素

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

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

GTB2022 アコーディオンを作る

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

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

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

GTB2022 結合⼦ <div class="me"> ････<div class="child"> ････････<div class="grandchild"></div> ････</div> </div>
.me .child .grandchild

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

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

GTB2022 結合⼦ .parent .sibling .me .sibling .sibling <div class="parent"> ････<div
class="sibling"></div> ････<div class="me"></div> ････<div class="sibling"></div> ････<div class="sibling"></div> </div>

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

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

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

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

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

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

GTB2022 実務レベルのスキル

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

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

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

GTB2022 発表会

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

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

GTB2022_webCoding

GTB2022_webCoding

More Decks by gmodev

Other Decks in Technology

Featured

Transcript