商学部生が０から始めるプログラミング日記⑤

こんにちは！あいでんです。

結婚式（披露宴）中に撮られた写真や映像が終盤に流れたのですが、すんげえ丸い奴がいるなと思ったら自分でした。

あいでん、そろそろ動きます。

トーティラフラット博多 にて

▷はじめに

前回から実際にHTML & CSSのコードの勉強が始まりました。

（前回はこちら）

前回の更新から約10日が経ちまして、この間に勉強も少しばかり捗りました。

今回の勉強はProgateで少しばかりかじっていたことと、周りに頼もしいエンジニアがいることなどもあって実戦形式で行うことにしました。

実戦形式というのは宿題スタイルで成果物を実際に作っていくという意味です。今は2個目の宿題の終盤に差し掛かっているのですが、1個目の宿題は福岡五輪LPのトレースから始まりました。

▷実際にコードを書いてみた

実際のLPを見ていただければ大体のイメージは掴んでいただけると思います。

今回はこのLPをトレースする上で特に躓いた部分をご紹介いたします。

▷その前に…

CSSはHTMLで作ったものを装飾するための言語だと紹介しましたが、そのコードは「セレクタ」「プロパティ」「値」の3つで構成されます。

この3つを書くことで「どの要素（セレクタ）に、何を（プロパティ）、どのように（値）する」というコードが成立することになります。

セレクタは、前回のnoteでちょろっと出てきた「タグ」やそのタグに名前をつける「クラス」を主に指します（私は今のところそれが主）。

プロパティは、タグやクラスにどのような装飾を加えるかを指定するものになります。例えば「フォントのサイズ」とか「色」とか「表示する場所」とか。これは本当にいろいろあります。

値は、プロパティで指定した装飾を具体的に規程するものになります。フォントであれば14pxとか、色であれば青とか、表示する位置は真ん中とか。これもほぼ無限に存在するのではないでしょうか。

イメージ図

▷hover機能について

このhover機能は擬似クラスと呼ばれるもののひとつらしい。

擬似クラスとは、すでに存在しているクラスの中にある要素が特定の状態になっているときだけCSSが適用されるクラスのことらしい。

このhover機能は、要素の上にカーソルを置いたときにCSSが適用されます。代表的なのはカーソルが指になったり、リンクがあるときはアンダーラインが表示されたり、色が変わったり、そういうやつです。

今回のLPでは「参加登録はこちら」というボタンと、スタッフの写真にカーソルを持っていったときにhover機能が適用されています。

hover機能のコードを書く事はさほど難しくないのですが(以下のように、カーソル後の状態を書くだけなので)、hover機能を適用している要素以外に+αでhover機能を適用するのがなかなか難解でした。

.card_detail:hover {
   opacity: 100%;
}

今回のケースで言うと「参加登録はこちら」というボタンになります。文字と背景とフチは別要素なのですが、カーソルを持っていったときに同時に色が変わるようにしないといけないのです（黄→白 & 白→黄）。

彷徨った結果、別要素をhover機能が適用されるときだけ兄弟要素としてあげることで解決しました（「>」を書くだけ）。ざっくり言うと、兄要素がhover機能を適用されるときには弟要素にもhover機能を適用されるに指定してあげて、具体的な「プロパティ」や「値」によって適用内容を規定するって感じです。

イメージとしてはお母さんが子どもに「勉強しなさい！」と促すけど、兄には算数を、弟には国語を勉強させるって感じです。実際に書いたのは以下のようなコードです。

.apply:hover {
   background: #f3c014;
   border: 4px solid #fff;
   transition: 0.3s;
}

.apply:hover>.apply_text {
   color: #fff !important;
}

▷CSSの疑似要素-beforeとafter-

最後に擬似要素のお話になります。

擬似要素とは、HTMLでは書いていない要素をCSSで擬似的に作っちゃうというやつです。さらに「content：””；」を指定することで、擬似要素を実体化させることができます（「””」の中に文字の入力とかもできるみたい）。

何を言っていることやらって感じですが、「そこには何も無い」という空白みたいなものが「そこに有るもの」とするわけです。文字を入力するときのスペースみたいなイメージ。

そして擬似要素は主にbeforeとafterの二種類のどちらかを指定します。

beforeの場合は指定した要素のはじめに、afterの場合は指定した要素の後ろに擬似要素を表示させることができます。

今回のLPでは各セクションの切れ目が斜めになっているのですが、それを表現するためにこの機能を適用させました。

実際には、beforeとafterのどちらかによって擬似要素を追加するだけではなく、その要素を斜めに傾けて、飛び出てしまったところは表示させないようにするというコードを書いています。

なので、その部分を無理やり表示させてみると…

こんな感じになります

▷おわりに

ということで、今回は福岡五輪のLPをトレースしてみたという話でした。

実際にトレースしながら実践的に「セレクタ」「プロパティ」「値」を覚えつつ、わからないところをフィードバック的に勉強するというのは意外とオススメです。めっちゃ理解度高まるし、スピード的にも速い気がする。

モデル的には経験学習モデルとおんなじサイクリングかもしれない。

普段何気なく自分のふれていたものの構造を知ったり、それを再現できるようになるというのはすごく楽しい。この楽しい時間がいつまで続くかは…。

それでは、また次回！