2022年5月– date –

ヘッダーのコーディング Header-3column編 今回はロゴとナビに加えて「電話する」ボタンがあるデザインです。コーポレートサイトっぽい！その名の通り、まずはHTMLで.header内に3つボックスを作ります。 今回はblock.html/scssをベースにします。ロゴ、ナ...

今回はバーが二段になったデザインです。個人的にはZOZOTOWNを思い出します。まずはHTMLを少し変えます。.header__logo、.header__navそれぞれの内側に.innerを書きます。あとはタイトルを変えれば準備完了です。以下CSSの解説です。 ヘッダーのコーディン...

ヘッダーのコーディング Header-block編 base.htmlからメニューのis-activeを取り除き、タイトルを変えたただけでblock.htmlと同じものが出来上がるはずです。 .header__inner padding-top,padding-bottomを消します。 .header__logo heightとpadding,text...

今回はヒーローイメージバージョンを作っていきます。ヒーローイメージとは ヒーローイメージ（hero image）あるいはヒーロー画像とは、Webサイトのファーストビューにて、画面を全面に覆い尽くすように配置した大きなサイズの写真やグラフィック要素のこ...

デイトラの課題をこなしていて浮かんだことをちょっと呟き的に書きます。 自分でファイルを用意するハードルが高い ファイルの扱いも練習のうちだと思いますが、各パートの基本以外のバリエーション(余裕がある方向けの課題)についてはProgateライクにブラ...

お久しぶりです。引っ越していてしばらくネットから離れていました。新しい家にまだ回線を引いてないのでWi-Fiが使えません。ギガを気にしながらのテザリングだと、自然とネット時間が減って勉強に集中できるのでこれもアリかもしれませんね。今回の課題は...