プログラミング日記#03　〜アプリ紹介ページの作成〜

こんにちは。よっしーです。

今日はプログラミング学習3日目。いつものように学習を振り返ります。

今日の学習内容

・ドットインストール　基礎文法編　全33回完了

・ドットインストール　アプリ紹介ページを作ろう〜実践編〜

CSSの基礎文法の学習を終えました。

やや基礎学習に飽きたので、いくつか学習をすっ飛ばして、実践編へと移りました。

実践編の内容は1つのLP（ランディングページ）を作るというものです。

↑こんな感じ。文書は適当です。

・ヘッダー、フッターの作成

・レスポンシブデザインの設定

・フレックスボックスの活用

などがメインでした。フレックスボックスは少しややこしい…

全16回の学習を終えるのに、2時間ほどかかってしまいました。

理解が難しかったところを振り返ります。

今日の振り返り①　ブロック要素とインライン要素について

表示の方法を変えるdisplay要素にて、「？？」となることが多かったので、今回はブロック要素とインライン要素について振り返ります。

まず、ブロック要素とインライン要素とはなんなのか。

ブロック要素…一つのまとまりとして表示されるもの。<h2>タグや<p>タグ、<div>タグなど大枠を囲むタグが主である。
ブロック要素は横並びではなく、下に続けて表示される

インライン要素…1つのまとまりの中の一部を指すもの。<span>タグや<a>タグなど文中に挿入するようなタグが主である。
インライン要素は、横並びで表示することができる。

displayプロパティの使い方

<h1>や<div>タグなどの、デフォルトでブロック要素が指定されている値においても、CSSで{display: inline;}を指定すれば、インライン要素として使うことが可能です。インライン要素についても同様に、{display: block;}を指定すれば、ブロック要素になります。

使いどころとしては、
例えば、<div>タグで囲ったボックスを横並びにしたいといった場合に、インライン要素に変換すると、横並びにすることができます。

ただ、インライン要素の場合は、widthやheightなど、サイズの指定ができません。そのコンテンツに応じたwidth,heightになってしまいます。

これを解消するには、{inline-block}という指定をしてあげればOKです。

inline-blockを指定すれば、widthやheightを指定できるブロック要素にサイズの調整が可能です。

たとえば、以下のように、divに対してinline-blockを指定してみましょう。

<div class="box1">ボックス1</div>
<div class="box2">ボックス2</div>


<!--下記からCSS--!>
.box1 {
 background: yellow;
 display: inline-block;
 width: 200px;
 height: 200px;
}

.box2 {
 background: skyblue;
 display: inline-block;
 width: 200px;
 height: 200px;
}

するとこうなります。

ブロック要素である<div>を横並びに配置できました。

inline-blockを指定していなかった場合、ボックス2はボックス1の下に配置されます。

まとめ

3日目から実践編にうつりましたが、実際にやってみると深く理解できますね。

ある程度基礎学習を終えたら、実践してみるのがおすすめです。