HTML/CSS, プログラミング入門

今回はこんな模様をHTML/CSSでつくってみましょう。

まずはGridを作成

まずはGridを使って以下のようなものを作ってみましょう。Gridについては他にいくつか記事を書いているので是非読んでみてください。

HTML/CSS, JavaScript, プログラミング入門

プログラミングを始めた人にありがちな悩みとして、何を作ったらいいか分からないということがあると思います。

そこで今回はそんな人のために、課題を書きます。

サービス名は木魚サービス

木魚を鳴らすことができるサービス ...

HTML/CSS, プログラミング入門

Gridでは重なり表現するのが簡単

配置する要素の位置を重なるようにすることで簡単に重なりを表現できます。

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

HTML/CSS, プログラミング入門

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

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

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

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

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

HTML/CSS, プログラミング入門

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

HTMLとCSSは以下です。

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

HTML/CSS, プログラミング入門

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

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

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

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

HTML/CSS, プログラミング入門

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

以下のような感じです。

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

完成形 ...

HTML/CSS, プログラミング入門

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

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

JavaScript, プログラミング入門, リファクタリング

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

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

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

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

プログラミング入門

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

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