【HTML/CSS】完全初心者！リアルな写経コーディング【その③】
こんにちは、ふくたろうです。
この記事は、『完全初心者！リアルな写経コーディング』シリーズの３回目。バックナンバーをご覧になりたい方はコチラ↓
３回目の模写コーディングでは、主に疑似要素を学ぶ。という結果になりました。
- 今回勉強したところ
- 次回勉強したいところ
- モチベーションアップ
- 僕の書いたソースコード
というトピックを扱っています。
今回は疑似要素を学ぶ結果になりました！
今回お手本とさせていただいたサイトはコチラ↓
ソレイジア・ファーマ株式会社
一見してみると簡単そうに見えませんか？「グローバルナビがあってメインイメージがあってグラフは画像かな？ あとはサイトマップをリストでマークアップするだけだな」って、、、
僕もそう思ったからこのサイトを模写することにしたんです。
でもこれが悲劇の始まり。
まさかグラフまでHTMLとCSSで書かれているとは思いもしませんでした。
まぁ結果的に疑似要素についての理解が深まったので、良かったですが、最初知った時は「マジで！？」と驚きましたね。
ではここらで僕が書いたソースコードをさらしておきます。
今回勉強したところ
サイトを模写して新しく勉強した技術を、羅列させておきます。（解説は素人が主観でやっています。）
疑似要素（::before ::afterについて）
難しい説明をいっさい省くと、
- ::beforeは”要素の直前に別の要素を作り出せる超局所的CSS”
- ::afterは”要素の直後に別の要素を作り出せる超局所的CSS”
と僕は理解しました。
疑似要素は規定でインラインなので、高さも幅も自由に変えられる、とっても便利なものなんだ。と覚えておけばいいんじゃないでしょうか。
使い慣れてくると、見出しをリボンみたいにしたり、CSSだけで三角形を表現する事ができます。気になる方はコチラも読むとより表現の幅が広がりますよ。
仕組みを知りたい→CSSのborderプロパティで三角形を作る
見出しを作りたい→CSSだけで三角形を作ろう！その2：吹き出しやリボンをデザインする
疑似クラス
疑似要素に似たもので『疑似クラス』というものもあります。
違いは下記のとおり
疑似クラス→要素の特定の状態
にスタイルをつける事ができます。
後述しますが、有名なのが”マウスポインターがホバー状態の時だけ色を変える”とかじゃないでしょうか？
疑似要素と疑似クラスを見分けるポイント
- 『：』と１個ついていると疑似クラス。
- 『：：』と２つ付いていると疑似要素。
でもこれは最近になって区別されたので、古いものだとコロン１個でどちらも書いてあるコードもあるみたいです。まぁこれから書くんだったら、ちゃんと区別した方が良さげですね。
疑似クラス（:hoverとか:nth-child()）
では具体的な疑似クラスについて見ていきましょう。
:hoverはマウスポインターがホバー状態の時にいろいろ動きをつける事ができます。
今回模写したサイトでは、『a:hover』とリンクがホバー状態の時、文字の色を赤色に変えています。
ほとんどのサイトで使用されている疑似クラスですから、確実に覚えておきたいですね！
:nth-child()は、兄弟要素の中で()に書かれたパターンに一致する要素だけにスタイルをつける事ができます。
関数を扱わなければいけないので、ちょっと取っつきにくい感はありますが、関数さえわかってしまえば何も怖いものはありません。
今回模写したサイトでは、「リストの一番最後だけ右のボーダーを消す」時と「グラフの2番目の行だけマージントップを無くしたい」時に使いました。
:nth-child()に似た疑似クラスはいくつかあって、状況に合わせて使い分ける事が必要だったりします。
影をつける
CSSだけでも影をつける事ができるんです。
今回模写したサイトでは、四角い要素に単純な影をつけたいだけだったので、box-shadowを使いました。
画像の輪郭に合わせて柔軟に影をつけたい時は、drop-shadow。
テキストに影をつけたい時は、text-shadowを使うと便利です。
ただしそれぞれの弱点もあるので、やはり使い所は選ばなければいけません。万能ではないようです。
次回勉強したいところ
- レスポンシブデザイン、リキッドレイアウト
- JavaScript
- px、em、%などの単位への理解
- アニメーションの実装
この辺りを勉強していきたいです。
モチベーションアップ
プログラミングなどの勉強をしていると、「ここって本当に理解したのかな？」と自分で自分のことを疑うことってありませんか？
私もRuby on Railsを勉強しているとき、『ルーティング』と『コントローラー』と『ビュー』の関係性が分かったようで分からなくて、とても不安でした。
この不安をどうすれば解消できるのでしょうか？
「えっ？先に進んじゃっていいの？」と思いますよね。いいんです！結局、あとになって理解できることってたくさんあるので、放置しておいてどんどん前へ進みましょう。
その過程で必ず理解できる時がおとずれるはずです。
最後に、変化に対する不安を感じている時にどうすればいいか？ヒントをくれた本を１冊紹介させてください。
僕はこの本を読んで、恐怖をどうやってコントロールできるかを知りました。自分は登場人物4人のうち、どの人物に当てはまるのか？と考えてみると益になると思います。
完全初心者！リアルな写経コーディングその③まとめ
この記事では、模写コーディング３回目の勉強内容をご紹介しました。
- 疑似要素
- 疑似クラス
- 影の付け方
あと、アニメーションとレスポンシブさえ理解してしまえば、いったん案件を受注してみようかな。と考えております。ようやくお金になると考えるとウキウキしてきますね。
ペット保険ペット保険の資料一括請求サービス
キャットフード愛猫にスッキリ快適な毎日を過ごしてほしいあなたへ『モグニャン』