Bat

HTML/CSS

【CSS】左右が互い違い(ジグザグ型)になっているデザインを作る

下のような左右が互い違いのデザインをよく見ますよね。 サービスの特徴を紹介する場面などで使われることが多い気がします。今回はこのデザインを作っていこうと思います。 サービスの特徴を紹介する場面などで使われることが多い気がします。今回はこのデ...
HTML/CSS

【CSS】横並びの配置をdl/dt/ddで作る(新着ニュースなど)

よくある新着ニュースの欄の作り方です。こんな感じですね。 意外とこうした表みたいのって苦手な方が少なくないのではないでしょうか。私はいまだに苦手です。。 ul li とかで作るパターンもあると思いますが、今回はdl dt dd で作ってみま...
HTML/CSS

【CSS】column-gapで横並びにした要素の間隔を自動で調整

今までのブログでは、ファーストビューやグローバルメニューの作成をまとめていました。 ファーストビュー が終わったら、次はその下のレイアウトを作っていくことになります。 割とよくあるのが「このようなことでお困りではないですか?」という共感エリ...
HTML/CSS

ファーストビュー 【初心者向け】無料教材からパターンを2つ紹介 (2/2)

ファーストビュー 、あるいはキービジュアルなどと呼ばれる、Webサイトを開くと初めに目に入る部分。 初心者向けに、無料教材から2つのパターンを紹介する2回目です。 今回は、こちらも初心者には鉄板の良教材、『くりnote』を参照させてもらいま...
HTML/CSS

ファーストビュー 【初心者向け】無料教材からパターンを2つ紹介 (1/2)

サイトの一番顔になるであろうファーストビュー。 呼び方は「ファーストビュー 」とか「キービジュアル」とかいろいろ呼び方があるみたいですが、とにかくサイトを開くと最初に目に入る部分です。 いろいろなパターンがあってバリエーションに富んでいます...
HTML/CSS

ハンバーガーメニュー【初心者向け】簡単なパターンを2つ紹介 

HTML/CSSを学習の初期の段階で、最初のハードルの1つがハンバーガメニューだと思います。 普段はコピペするだけですが、多少のアレンジをしようとすると意外と苦労指定しまい、理解がかなりあやふやなのを痛感しました。 そこで、今回ハンバーガメ...
HTML/CSS

ヘッダーの書き方パターン3選!無料の学習サイトで基本を学ぶ

HTML/CSSの学習を始めると、初期の頃につまずくヘッダーの書き方。 ロゴが左にあって、右側にグローバルメニューがあって、中央揃えはどうするとか、スクロールしても固定するにはどうするかとか。。。 いくつかパターンをつかんでおけば、それを使...
HTML/CSS

ボタンのホバーアニメーション3選【初心者でもコピペでOK】

初心者でもコピペでできるホバーアニメーションを3つまとめました。ボタンにカーソルを当てた時、ボタンに動きをつけたいときに活用できます。