プログラミング入門 | ページ 23

HTML/CSS入門 Gridを使って色々つくってみよう

Gridを使うとレイアウトが楽しくなります。

今日は以下のようなレイアウトを作成してみました。

まずはGridでレイアウトをつくる

Gridでレイアウトを作成しましょう。

以下のように、縦３マス横 ...

以下のようなGridレイアウトがあります。

HTMLとCSSは以下です。

<!DOCTYPE html><html lang="ja"><head> <m ...

一方向に並べるときはFlexbox、それ以外はGrid

一方向に並べるとは以下のようなことです。

以下は二方向に見えますが、実際は折り返されて複数行になっているだけなので一方向です。

一方でGridを使う場合は二 ...

CSS Gridを使って要素の重なりを表現してみます。

以下のような感じです。

少しわかりづらいですが、ピンクの要素の下部に黒の要素が重なっています。ピンクが画像、その画像の説明が入ります。

完成形 ...

以下のようにFlexで横並びにしていたとします。

<div class="flex"> <div>apple</div> <div>banana</div ...

プログラムを書くときに大切なことは、誰が見てもわかりやすいコードを書くことです。

コードを書くときに、コードに意味を持たせるように意識すると良いです。

if文の分岐に意味を持たせる

まず以下のコードを見てください ...

以前の記事でプロのプログラマでもわからないことはあり、その度に検索なり情報収集をしていることを記載しました。

プログラミングを始めたばかりの人でも、検索力を身に付けることで、大きなスキルアップに繋がると思っています。

手に職をつけて自分の力で生きていく手段として、プログラミングを身につけることはとても有効です。

しかし、独学でプログラミングを習得しようとすると多くの人が挫折するのが現実です。

センスは必要ない

私は、大学は農学 ...