とつげき！サイトレビュー#3-プーカ株式会社-

プーカ株式会社｜広島のWebマーケティング会社

①サイトレビュー

【サイト名】

◎PU-CA-プーカ株式会社-

【概要】

◎広島県のWEBマーケティング企業

【ターゲット】

◎広島で自社製品やサービスを広めたい方々
◎webマーケティングに興味のある方

【コンテンツ】

◎カラー:メイン→#0054bc（青系統）、サブ→#244875（藍色系統）、アクセント→#cc1a1c（赤系統）
◎フォント:'Kosugi Maru',sans-serif
◎MV:船乗りとロボットが"ビジネスの大海原"を航海しているイラスト
◎ナビバー:すべての画面幅でハンバーガーメニュー
内容→サイトトップ、会社案内、私たちの役割、web広告、webマーケティング、制作実績、お知らせ

【気付いたところ】

◎手書き風のかわいらしいイラストやシンプルなサイト構造で、堅いイメージのあるwebマーケティングをより身近に感じられる
◎“ビジネスという大海原の羅針盤をとる”という理念通り、航海している気分になれる
◎製作実績のページでは、媒体別の疑似サイトを実際にスクロールできる

②部分模写コーディング

【模写したいところ】

今回は、ホバーすると影がつく、画像の色、文字色が変わるカードリンク部分を模写します。

本当はサイトトップ直下にあるサイクル状のリンク（PC版のみ）を模写したかったのですが、今の私には表現できませんでした。お手上げです\(^o^)/


そして今回もいらすとやさんで拝借した素材を使います。
本当にいつもお世話になっています🙇
おそらく今後もお世話になります🙇




【部分模写コーディング】

gifアニメとかは載せられないと前回のサイトレビューで判明したので、今回は劇的ビフォーアフター・編集版を載せます。↓

今回一番難しかったのは、ホバーしたときに画像も文字も影の部分もすべて同時に動かすことでした。

いくら試しても同時に動いてくれなくてむきいいいぃぃとなっていたのですが、これまたお世話になりっぱなしの検証ツールをカンニングしたところ...↓

-間違ったコード-
.card img :hover {
}
.card p :hover {
}

-正解のコード-
.card:hover img {
}
.card:hover p {
}

なんということでしょう…！書き順が違うではありませんか！


上のコードだと①.cardの内部の②imgまたはpを③ホバーしたときに動きを付与するので、それぞれの場所にカーソルを合わせないと狙った動きをしてくれなかったのに対し、

下のコードだと①.cardを②ホバーしたときの③imgまたはpに対して動きを付与するので、カードにカーソルを合わせると思い通りの動きをしてくれる寸法なんですね。

書き順だけでここまで違うとは・・・
CSS・・・なんと奥が深い・・・！