Webサイト考察3 JAL企業サイト
おはようございます！今日考察サイトとして選んだのは、JALのコーポレイトサイトです。
まずはヘッダー要素内から見ていきます。
ナビゲーションエリアの要素にマウスを当てると、下線と背景色がつくようになっています。マウスを右から左に移動させた時は、下線も右から左へ、逆にマウスを左から右に動かした時は、下線も左から右に流れるように表示されるようになっています。こういう動きはCSSだけだと難しそうですね。下線のアニメーションはJQueryで実装されています。
リンク要素の共通点を見ていて思ったのは、ページ下部の方では、画像の中のテキストにリンクを貼るのではなく、画像１つが大きなボタンの役割を果たしていて、画像をクリックすることでリンク先に移動するようになっているということです。私だったら、リンク要素は共通にしなきゃ！！とか思って、テキストにリンクを貼り、他のリンク要素と同じ下線のアニメーションや背景色をつけてしまいそうです。一貫性を持たせる事は重要だけれど、必要のない要素は省くのも大事なのですね。
使われていた薄い色はこちら。セクションの切り替わりごとに背景色として使われています。
アクセントカラー。JALといえばこの赤。
画像の表示は、flexboxとfloatが使われていて、４つの画像が同じ比率で並んでいるレイアウトは、シンプルに
float: left;
１つの画像の横幅を
width: 25%;
というシンプルなコードで実装されていて、なるほど実務ではこんな感じでfloatが使われているんだなと勉強になります。コードを見ても、どういう仕組みなのか分からないものが多いですが、分かるところから理解していきたいと思います:)
この記事が気に入ったらサポートをしてみませんか？