2022.11.07サイトの一番顔になるであろうファーストビュー。」とか「キービジュアル」とかいろいろ呼び方があるみたいですが、とにかくサイトを開くと最初に目に入る部分です。いろいろなパターンがあってバリエーションに富んでいますが、サンプルとして無料教材から2つ紹介します。基本的なパターンを理解すれば、その他の応用パターンにも適応できると思います。人物画像をbackground-imageで配置するパターンお馴染みの「未経験からWebデザイナーへ」の教材。感じましたが、多少ググればなんとか初心者でも理解できます。位置を固定するやり方です。実際にブラウザで確認したり、コーディングデータは下記から確認ができます。要素の構成は下記の画像の通り。その横の人物の画像は、imgタグではなく、background-imageで挿入されています。構成としては、下記の形で、mvに背景色、mv__innerのbackground-imageに人物画像となっています。*/</div>このようなパターンは、私は初めて見ました。透過画像をどこにでも置けるので便利ですね。2つめのパターンは次回にします。次はslickを使ったスライドショーのパターンです。キービジュアルなどと呼ばれる、Webサイトを開くと初めに目に入る部分。初心者向けに、無料教材から2つのパターンを紹介する2回目です。今回は、こちらも初心者には鉄板の良教材、『くりnote』を参照させてもらいま...HTML/CSS【CSS】横並びの配置をdl/dt/ddで作る(新着ニュースなど)よくある新着ニュースの欄の作り方です。意外とこうした表みたいのって苦手な方が少なくないのではないでしょうか。私はいまだに苦手です。初心者でもコピペでできるホバーアニメーションを3つまとめました。ボタンにカーソルを当てた時、ボタンに動きをつけたいときに活用できます。今までのブログでは、ファーストビューやグローバルメニューの作成をまとめていました。終わったら、次はその下のレイアウトを作っていくことになります。あるのが「このようなことでお困りではないですか?」という共感エリ...HTML/CSS【CSS】左右が互い違い(ジグザグ型)になっているデザインを作る下のような左右が互い違いのデザインをよく見ますよね。サービスの特徴を紹介する場面などで使われることが多い気がします。今回はこのデザインを作っていこうと思います。サービスの特徴を紹介する場面などで使われることが多い気がします。HTML/CSSを学習の初期の段階で、最初のハードルの1つがハンバーガメニューだと思います。普段はコピペするだけですが、多少のアレンジをしようとすると意外と苦労指定しまい、理解がかなりあやふやなのを痛感しました。(1/2)最近のコメント表示できるコメントはありません。気になることを調べるブログ.ホーム検索トップサイドバータイトルとURLをコピーしました。