MENU

【HTML/CSS】ウェブページ試作No.2(Github pages)

先日ProgateのHTML&CSSⅡが終わったので、復習がてら再びウェブページを作ってみました。
今回はレンタルサーバではなく、Github pagesで公開してみました。

https://kumagoro95.github.io/webpage-sample/

f:id:kumaGoro_95:20200723143745j:plain
写真は自分が昔撮ったものから選びました

相変わらずトップページだけのハリボテですが
前よりはいい感じになったかな?
HTML&CSSⅡで一番理解が難しかったのは、displayの設定です。
以下のページを参考にしました。
saruwakakun.com

inline、block、inline-block・・・正直、どういう時にどれを使えばいいのか今でもよくわかってません。
ただ、上記3つの特徴を比べてみると・・・

f:id:kumaGoro_95:20200723144305p:plain
引用元:https://saruwakakun.com/html-css/basic/display

  • blockは「要素と要素の間に改行が入り」、inline-blockは「要素と要素が横並びになる」
  • block、inline-block共に「幅、高さの指定」と「余白の指定」ができる
  • inline-blockは「text-align」「vertical-align」が使える(blockは使用できない)

ことがわかります。なんだかinline-blockが一番便利そうな感じがします・・・
要素間に改行を入れないのであれば基本的にinline-blockを使えばいいのかな?