【HTML/CSS】完全初心者!リアルな写経コーディング【その③】

HTML/CSS プログラミング

こんにちは、ふくたろうです。

この記事は、『完全初心者!リアルな写経コーディング』シリーズの3回目。バックナンバーをご覧になりたい方はコチラ↓

3回目の模写コーディングでは、主に疑似要素を学ぶ。という結果になりました。

  • 今回勉強したところ
  • 次回勉強したいところ
  • モチベーションアップ
  • 僕の書いたソースコード

というトピックを扱っています。

今回は疑似要素を学ぶ結果になりました!


今回お手本とさせていただいたサイトはコチラ↓
ソレイジア・ファーマ株式会社

一見してみると簡単そうに見えませんか?「グローバルナビがあってメインイメージがあってグラフは画像かな? あとはサイトマップをリストでマークアップするだけだな」って、、、

僕もそう思ったからこのサイトを模写することにしたんです。
でもこれが悲劇の始まり。

まさかグラフまでHTMLとCSSで書かれているとは思いもしませんでした。

まぁ結果的に疑似要素についての理解が深まったので、良かったですが、最初知った時は「マジで!?」と驚きましたね。

ではここらで僕が書いたソースコードをさらしておきます。

今回勉強したところ


サイトを模写して新しく勉強した技術を、羅列させておきます。(解説は素人が主観でやっています。)

疑似要素(::before ::afterについて)

疑似要素とは、要素の特定の部分にスタイルをつける事ができる、超局所的CSSみたいなものです。

難しい説明をいっさい省くと、

  • ::beforeは”要素の直前に別の要素を作り出せる超局所的CSS”
  • ::afterは”要素の直後に別の要素を作り出せる超局所的CSS”

と僕は理解しました。

疑似要素は規定でインラインなので、高さも幅も自由に変えられる、とっても便利なものなんだ。と覚えておけばいいんじゃないでしょうか。

使い慣れてくると、見出しをリボンみたいにしたり、CSSだけで三角形を表現する事ができます。気になる方はコチラも読むとより表現の幅が広がりますよ。

仕組みを知りたい→CSSのborderプロパティで三角形を作る

見出しを作りたい→CSSだけで三角形を作ろう!その2:吹き出しやリボンをデザインする

疑似クラス

疑似要素に似たもので『疑似クラス』というものもあります。

違いは下記のとおり

疑似要素→要素の特定の部分
疑似クラス→要素の特定の状態

にスタイルをつける事ができます。

後述しますが、有名なのが”マウスポインターがホバー状態の時だけ色を変える”とかじゃないでしょうか?

疑似要素と疑似クラスを見分けるポイント

  • 『:』と1個ついていると疑似クラス。
  • 『::』と2つ付いていると疑似要素。

でもこれは最近になって区別されたので、古いものだとコロン1個でどちらも書いてあるコードもあるみたいです。まぁこれから書くんだったら、ちゃんと区別した方が良さげですね。

疑似クラス(:hoverとか:nth-child())

では具体的な疑似クラスについて見ていきましょう。

:hoverはマウスポインターがホバー状態の時にいろいろ動きをつける事ができます。

今回模写したサイトでは、『a:hover』とリンクがホバー状態の時、文字の色を赤色に変えています。

ほとんどのサイトで使用されている疑似クラスですから、確実に覚えておきたいですね!

:nth-child()は、兄弟要素の中で()に書かれたパターンに一致する要素だけにスタイルをつける事ができます。

関数を扱わなければいけないので、ちょっと取っつきにくい感はありますが、関数さえわかってしまえば何も怖いものはありません。

今回模写したサイトでは、「リストの一番最後だけ右のボーダーを消す」時と「グラフの2番目の行だけマージントップを無くしたい」時に使いました。

:nth-child()に似た疑似クラスはいくつかあって、状況に合わせて使い分ける事が必要だったりします。

まずはどういう条件で兄弟要素を選択したいのか?明確にしておく事がポイントでしょう。

影をつける

CSSだけでも影をつける事ができるんです。

今回模写したサイトでは、四角い要素に単純な影をつけたいだけだったので、box-shadowを使いました。

画像の輪郭に合わせて柔軟に影をつけたい時は、drop-shadow
テキストに影をつけたい時は、text-shadowを使うと便利です。

ただしそれぞれの弱点もあるので、やはり使い所は選ばなければいけません。万能ではないようです。

次回勉強したいところ

  • レスポンシブデザイン、リキッドレイアウト
  • JavaScript
  • px、em、%などの単位への理解
  • アニメーションの実装

この辺りを勉強していきたいです。

モチベーションアップ


プログラミングなどの勉強をしていると、「ここって本当に理解したのかな?」と自分で自分のことを疑うことってありませんか?

私もRuby on Railsを勉強しているとき、『ルーティング』と『コントローラー』と『ビュー』の関係性が分かったようで分からなくて、とても不安でした。

この不安をどうすれば解消できるのでしょうか?

答えは、とりあえず放置しておいて先に進む。です。

「えっ?先に進んじゃっていいの?」と思いますよね。いいんです!結局、あとになって理解できることってたくさんあるので、放置しておいてどんどん前へ進みましょう。

その過程で必ず理解できる時がおとずれるはずです。

最後に、変化に対する不安を感じている時にどうすればいいか?ヒントをくれた本を1冊紹介させてください。

スペンサー ジョンソン (著), Spencer Johnson (原著), 門田 美鈴 (翻訳)

僕はこの本を読んで、恐怖をどうやってコントロールできるかを知りました。自分は登場人物4人のうち、どの人物に当てはまるのか?と考えてみると益になると思います。

完全初心者!リアルな写経コーディングその③まとめ

この記事では、模写コーディング3回目の勉強内容をご紹介しました。

  • 疑似要素
  • 疑似クラス
  • 影の付け方

あと、アニメーションとレスポンシブさえ理解してしまえば、いったん案件を受注してみようかな。と考えております。ようやくお金になると考えるとウキウキしてきますね。