キービジュアルなどと呼ばれる、Webサイトを開くと初めに目に入る部分。初心者向けに、無料教材から2つのパターンを紹介する2回目です。今回は、こちらも初心者には鉄板の良教材、『くりnote』を参照させてもらいます。他にも様々な教材を出されているので、要チェックですね。今回はくりのすけさんの無料教材をベースに、後半は少しアレンジして、スライドショーのように画像を切り替えます。画像とテキストを重ねて表示するパターン参照:https://note.com/kurinosuke32/n/n100e508c396d簡単ですが、codepenで作ってみました(0.25xで見てください)。CodePen.シンプルでありながらひと手間加えたお洒落なデザインです。ベースとなるCSSは『くりnote』を見ていただくとして、ポイントとなるHTMLを記載します。class=”bg1′′></div></section>今回の肝となる、グレーの背景部分。教材では疑似要素を勧めつつ、初心者向けに空のdivタグを使っています。こちらの記事では、教材のおすすめ通り、疑似要素で実装してみます。疑似要素は割と早い段階で出くわすので、初心者のときでも覚えておいた方がいいですよね。こちらのサイトで詳しく解説されています。こちらのサイトで私も割とサクッと覚えられたので、それほど難しい概念ではないです。CSSの疑似要素とは?beforeとafterの使い方まとめCSSの疑似要素「:before」と「:after」の超便利な使い方を総まとめしました。具体的な表現例や「使うことにどんなメリットがあるのか」なども紹介しています。saruwakakun.comCSSはこちらです。設定することで、親要素から見てどのくらいの位置に子要素を配置するか決められます。ついて詳しくはこちらのサイトを参照してください。absolute、relative、fixed、staticの意味の実践的な使い方を分かりやすく図解します。することで、headerのエリアまで上に位置することができています。試しにtopを0にしてみてください。headerの下に要素が配置されるはずです。位置の指定をマイナスにもできるので、positionプロパティは便利ですね。z-indexをマイナスにすることで、headerのロゴの後ろ側に位置して、背景として置くことができるようになります。言葉にすると難しいですが、z-indexを0に変えてみたりするとわかると思います。こちらの基本がわかれば、重ねる場所やサイズを変えたり、左右でテキストと画像の位置を入れ替えたりと、いろいろなアレンジができると思います。最後にオプションとして、画像をスライドショーのようにするやり方をご紹介します。slickに関しては、こちらのサイトがとてもわかりやすく解説してくれています。slickの使い方スライダーを設置したいけどプラグインも色々あって悩みませんか?今回はスライダーのプラグインで有名なslickの使い方をご紹介します。カスタマイズも出来るのでぜひ試してみて下さい。junpei-sugiyama.com初めてslickを使うときはjQueryも不慣れだったので苦労しましたが、こちらのサイトで初めて成功しました。ポイントはCDNの読み込み方、</body>の前にslickのjsを読み込む、jsにautoplayなどの設定をする、という3点かと思います。最初はコピペで良いと思うので、紹介されている通りに導入してみてください。今回のサンプルにスライドショーを追加してみたのが、こちらです。変えてみると画像の変わる速度を調整できたりするので、是非試してみてください。参考になれば嬉しいです。HTML/CSSを学習の初期の段階で、最初のハードルの1つがハンバーガメニューだと思います。普段はコピペするだけですが、多少のアレンジをしようとすると意外と苦労指定しまい、理解がかなりあやふやなのを痛感しました。初心者でもコピペでできるホバーアニメーションを3つまとめました。ボタンにカーソルを当てた時、ボタンに動きをつけたいときに活用できます。(1/2)サイトの一番顔になるであろうファーストビュー。」とか「キービジュアル」とかいろいろ呼び方があるみたいですが、とにかくサイトを開くと最初に目に入る部分です。いろいろなパターンがあってバリエーションに富んでいます...HTML/CSS【CSS】左右が互い違い(ジグザグ型)になっているデザインを作る下のような左右が互い違いのデザインをよく見ますよね。サービスの特徴を紹介する場面などで使われることが多い気がします。今回はこのデザインを作っていこうと思います。サービスの特徴を紹介する場面などで使われることが多い気がします。今回はこのデ...HTML/CSS【CSS】横並びの配置をdl/dt/ddで作る(新着ニュースなど)よくある新着ニュースの欄の作り方です。意外とこうした表みたいのって苦手な方が少なくないのではないでしょうか。私はいまだに苦手です。作ってみま...HTML/CSSヘッダーの書き方パターン3選!無料の学習サイトで基本を学ぶHTML/CSSの学習を始めると、初期の頃につまずくヘッダーの書き方。ロゴが左にあって、右側にグローバルメニューがあって、中央揃えはどうするとか、スクロールしても固定するにはどうするかとか。(1/2)最近のコメント表示できるコメントはありません。気になることを調べるブログ.ホーム検索トップサイドバータイトルとURLをコピーしました。