HTML/CSS

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

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

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

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

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

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

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

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