![見出し画像](https://assets.st-note.com/production/uploads/images/129701666/rectangle_large_type_2_f7721a4b67037200baf5fd90c78f7dc4.png?width=800)
3-4 初めてのWEB開発
まず
WEB画面のイメージをつかみましょう
Chromeの開発者ツールで遊ぶ
Chromeの開発者ツールを起動
画面の例えば下のページ(https://note.com/cotan_it_consul/)のロゴマークの上で右クリックし
「検証」をクリックします。
![](https://assets.st-note.com/production/uploads/images/129698818/picture_pc_a0adc52d9edd260dcf5da89690670eeb.gif?width=800)
HTMLとCSS情報を表示
すると右側にページのHTMLとCSSなどの情報が表示され
適当なところへマウスを運ぶとその要素が選択されます。
![](https://assets.st-note.com/production/uploads/images/129698850/picture_pc_2e8259010e8f34f4c115799f86ef3e53.gif?width=800)
下半分はCSSという要素の大きさや位置、色などを指定する命令が表示されます。
たとえば、このロゴマークの大きさを指定してる「width」を変えてみましょう。
要素の変更
「width」の右側の「100%」をクリックして選択状態にしたまま
矢印キー(↓)を押下してみましょう。
徐々に数値が小さくなってゆくと同時に
ロゴマークの大きさが小さくなってゆきます。
![](https://assets.st-note.com/production/uploads/images/129701287/picture_pc_ef346b66df2ac9f8f59e8a1cfee11e1e.gif?width=800)
WEBページの基本構成
このようにWEBページの基本的なところは
HTML(画面の右上の部分)と
CSS(画面の右下の部分)で構成されます。
色んなページでどんな感じか遊んでみてください。
今後、これらの要素について詳しく解説してゆきますが
それは、またのお楽しみということで・・
この記事が気に入ったらサポートをしてみませんか?