Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
GTB2022_webCoding
Search
gmodev
June 30, 2022
Technology
0
270
GTB2022_webCoding
gmodev
June 30, 2022
Tweet
Share
More Decks by gmodev
See All by gmodev
GTB2022_WebAppFramework
gmodev
0
230
GTB2022 サービス開発のプロセス
gmodev
0
450
GTB2022 Webサービスとインターネットの歴史
gmodev
0
190
Other Decks in Technology
See All in Technology
M5製品で作るポン置きセルラー対応カメラ
sayacom
0
170
Adapty_東京AI祭ハッカソン2025ピッチスライド
shinoyamada
0
220
許しとアジャイル
jnuank
1
140
プロポーザルのコツ ~ Kaigi on Rails 2025 初参加で3名の登壇を実現 ~
naro143
1
200
Vibe Coding Year in Review. From Karpathy to Real-World Agents by Niels Rolland, CEO Paatch
vcoisne
0
110
大規模サーバーレスAPIの堅牢性・信頼性設計 〜AWSのベストプラクティスから始まる現実的制約との向き合い方〜
maimyyym
5
3.8k
How to achieve interoperable digital identity across Asian countries
fujie
0
140
Access-what? why and how, A11Y for All - Nordic.js 2025
gdomiciano
1
120
Reflections of AI: A Trilogy in Four Parts (GOTO; Copenhagen 2025)
ondfisk
0
100
社内お問い合わせBotの仕組みと学び
nish01
1
530
extension 現場で使えるXcodeショートカット一覧
ktombow
0
220
社内報はAIにやらせよう / Let AI handle the company newsletter
saka2jp
8
1.3k
Featured
See All Featured
Fireside Chat
paigeccino
40
3.7k
Build your cross-platform service in a week with App Engine
jlugia
232
18k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
900
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.7k
We Have a Design System, Now What?
morganepeng
53
7.8k
Raft: Consensus for Rubyists
vanstee
139
7.1k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
What's in a price? How to price your products and services
michaelherold
246
12k
The Pragmatic Product Professional
lauravandoore
36
6.9k
The Cult of Friendly URLs
andyhume
79
6.6k
Transcript
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 13:30 14:30 14:45 15:45 16:00 17:00 作品提出・ 講評 プロフィール
ページを 実装してみる HTML CSS HTML・ CSSの基本
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 13:30 14:30 14:45 15:45 16:00 17:00 作品提出・ 講評 プロフィール
ページを 実装してみる HTML CSS HTML・ 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 flexiblebox flex
GTB2022 横並びを作る .flex { ・・・・display: flex; ・・・・justify-content: space-between; } .flex_item
{ ・・・・width: calc(50% - 20px); } ・たくさんの項⽬を 機械的に並べる のが得意 ・縦横に並べられる flex
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では フレキシブルボックス(flex)、 またはグリッドレイアウト(grid)が主流 ・CSS2以前では、横並びを作るときは floatがよく使われていた
GTB2022 特定の状態の要素に スタイルを付ける
GTB2022 a:hover { ・・・・color: #00f; } li:nth-child(3) { ・・・・color: #f00;
} ・マウスオーバー、 n番⽬、偶数・奇数番⽬、 最初の、最後の など ・セレクタの特定の状態に スタイルを付ける 疑似クラス 疑似クラス
GTB2022 疑似クラス マウスホバー時の 最初の 最初の 5番⽬の 5の倍数番⽬の 奇数番⽬の :hover :first-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 13:30 14:30 14:45 15:45 16:00 17:00 作品提出・ 講評 プロフィール
ページを 実装してみる HTML CSS HTML・ CSSの基本
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 13:30 14:30 14:45 15:45 16:00 17:00 作品提出・ 講評 プロフィール
ページを 実装してみる HTML CSS HTML・ CSSの基本
GTB2022 作品提出 ⾃分の苗字(半⾓英字).zip css reset.css style.css image 画像ファイル index.html
GTB2022 ありがとうございました