プログラミング

30DAYSトライアル【3日目】Progate HTML&CSS中級編(3章まで)

30DAYSトライアル【3日目】Progate HTML&CSS中級編(3章まで) アイキャッチ

こんにちは!偉人ハックブロガーのカズせん(@kazusen5)です。

少し間が空いてしまいましたが、30DAYSトライアルの3日目、スタートします!

参考:WEB制作で月5万円稼ぐために!30DAYSトライアル【まとめ・随時更新】

30daysトライアル まとめのアイキャッチ
WEB制作で月5万円稼ぐために!30DAYSトライアル【まとめ・随時更新】こんにちは!偉人ハックブロガーのカズせん(@kazusen5)です。 Twitterを見ていたら、このようなツイートを目にしました...

3日目の課題 【Progate HTML&CSS中級編(3章まで)】

30DAYSトライアルの3日目の課題は、『ProgateのHTML&CSS中級編(3章まで)』でした。

基本的なサイトのレイアウトを作るためのコーディングを学び始めることができるのが、HTML &CSSの中級編。

カズせん
カズせん
ここからは初級編と比べて圧倒的に「以前やったけど覚えてねえ!」が増えてきました

 

3日目の忘備録

以下からは、分かりにくいであろうポイントを忘備録も兼ねて解説していきます。

 

WEBページを作る時は、まずHTMLの構造を把握するように

中級編からは、最初にこれから作るWEBページの全体のHTML構造を説明してくれます。

これはつまり、『WEBページを構成するHTMLの構造』を頭の中で把握しておくのが大事ってことかと思います。

webページを構造で考える
ツッコミウルフ
ツッコミウルフ
いきなり書くんじゃなくて、最初に構造を決めてから書くってことね

 

まずは、

  • ヘッダー(header)
  • トップ(top-wrapper)
  • 内容部分(main-container)
  • フッター(footer)

に大まかに分ける。

 

そして、これを一個ずつさらにトップダウンで細分化していく▼

HTMLの中身を詰めていく

『HTMLはまず大きく分ける→大きく分けたものをさらに細分化して分ける』は徹底した方が良さそうですね。

 

小さな変化はクラスの複数指定

ボタンのように、「共通の部分があるが、それぞれに小さい変化をつけたいとき」には『クラスの名前を複数指定すると便利』みたいですね。

以下のように、半角スペースで区切って複数のクラスを指定します▼

<a class=“btn red”>

<a class=“btn blue”>

<a class=“btn green”>

ツッコミウルフ
ツッコミウルフ
btnの名前は統一し、てその後の名前を変えると。

そうすると、CSSで

全体にCSSを効かせたい時

.btn{ }  ←btn全体にCSSが効く

個別にCSSを効かせたい時

.red{ }←redにのみCSSが効く

.blue{ }←blueにのみCSSが効く

.green{ } ←greenにのみCSSが効く

と分けてコーディングができるんですね。

 

ブロック要素・インライン要素・インラインブロック要素

ブロック要素・インライン要素・インラインブロック要素の判別がマジで鬼門かと思います。 

カズせん
カズせん
自分的にも難しかったので、ちょっと詳しめの忘備録を書いていきます

 

ブロック要素の特徴

ブロック要素の特徴は

  • 開始タグと終了タグで囲ったものを1つのブロックにする
  • 要素が必ず横いっぱいに広がる
  • 次の要素がブロックレベル要素の下に配置されるから、配置は縦並び
  • width・heightは指定可能
  • 上下左右のmargin・paddingは指定可能

があります。

ブロック要素の特徴で特に重要なのは、『配置が縦並び』なことです。

ツッコミウルフ
ツッコミウルフ
どういうこと?

下記で説明します▼

HTML ブロック要素の説明 その1

<p>と<div>は共に『ブロック要素』。

なので共に横いっぱいに広がって、<p>の下に<div>が配置されてるんです

HTML ブロック要2素の説明 その
ツッコミウルフ
ツッコミウルフ
『どんなに少ない要素でも横いっぱいに広がって、次の要素がブロック要素の下にくる』のね
カズせん
カズせん
そうそう

『ブロック要素は横いっぱいに広がって縦に配置される』、まずはこれを覚えておきましょう。

 

インライン要素

インライン要素の特徴は

  • 横いっぱいに広がらず、要素の途中に差し込まれる
  • width・heightは指定できない
  • margin・paddingは左右のみ指定可能

などがあります。

インライン要素はブロック要素と違って、配置される時は横並びになります。

理由は、『差し込まれる』ものだから▼

HTML インライン要素の説明

インライン要素とは文字通り、要素の途中に入り込んできて効果を発揮するもの。

横いっぱいに広がらないから、インライン要素を並べると縦ではなく横に並ぶんですね。

ツッコミウルフ
ツッコミウルフ
横に並ぶからこそ、左右のmargin・paddingのみ指定可能なのか
カズせん
カズせん
要素の中で暴れるから、要素そのものを変えてしまいそうなwidthやheightは指定できない 

『インライン要素はどんどん横に並んでいく』と覚えておきましょう。

 

インラインブロック要素

インラインブロック要素の特徴は、

  • 要素が横に並ぶ
  • widthとheightが指定可能
  • 上下左右のpaddingとmarginが指定可能

などがあります。

簡単に言うと、『見た目はインラインで中身はブロック』なものがインラインブロック要素です。

インラインブロック要素は見た目はインライン、中身はブロック
ツッコミウルフ
ツッコミウルフ
おお・・で、インラインブロック要素は何に使うん?

簡単に言うとインラインブロック要素は、「ブロック要素を横に並べたい!」という時に使うものです。

HTML インラインブロック要素の説明

ブロック要素を横に並べようとすると、かなり複雑なプロパティで対応する必要があります。

でも、CSSに『display: inline-block;』とすれば、かなり簡単にコーディングできるというわけですね。

ツッコミウルフ
ツッコミウルフ
メニュー作成とかで使えそうな感じ

 

要するに、

  • ブロック要素を横に並べたいぜー!→インラインブロック要素に
  • インライン要素の幅とか高さを指定したいぜー!→インラインブロック要素に

って感じでしょうか。

ABOUT ME
カズせん
元コメディアンブロガー&WEBライター。偉人たちの知恵や仕事術や習慣を現代のツールと組み合わせて次世代のHACKを作り出すことに精を出す20代。
smoothing: antialiased;