2022年– date –
-
デイトラ
デイトラWeb制作コース中級編DAY13 横並びカードのコーディング④
市松レイアウトこれは市松レイアウトですね!炭治郎の服の柄でお馴染みの。コーディングの強化書のP100に出ています。 プロの「引き出し」を増やす HTML+CSSコーディングの強化書作者:草野あけみエムディエヌコーポレーション(MdN)Amazon英単語の意味メ... -
デイトラ
デイトラWeb制作コース中級編DAY13 横並びカードのコーディング③
【横並びカードのコーディング float編】 今となってはあまり使われないかもしれませんが、floatも押さえておきます。HTMLはタイトル以外base.htmlと同じです。floatの説明はちづみさんのツイートが分かりやすい!✅なくそう!floatわけわからん!の壁!htm... -
デイトラ
デイトラWeb制作コース中級編DAY13 横並びカードのコーディング②
【横並びカードのコーディング Inline-Block編】 HTMLはBase編と同じです。今回はdisplay: inline-block;を使ってカードを横並びにします。displayプロパティについてはサルワカさんの記事がこれ以上ないくらいわかりやすいです。saruwakakun.com .card ba... -
デイトラ
CSScombに関するメモ
CSScombに悪戦苦闘したのはもう随分前なのですが、Gonzales PEというパーサが古いせいで不具合が起きる、というケースが複数みられたのでメモしておきます。まさかこんなところに原因があるとは。qiita.comq.hatena.ne.jpteratail.com名前空間に対応してい... -
デイトラ
デイトラWeb制作コース中級編DAY13 横並びカードのコーディング①
【横並びカードのコーディング Base編】 まずはプレーンなタイプからコーディングしていきます。HTMLはカードを6つ作っておきましょう。クラス名が動画と回答例で異なりますが回答例に合わせています。今回はこれ紹介していいの?っていうくらい実用的な内... -
デイトラ
デイトラWeb制作コース中級編DAY12 ヘッダー・メインビジュアルのコーディング⑨
【ヘッダーのコーディング Header-center編】 今回は時々見かけるロゴサンドイッチタイプですね!.header内に左、センター、右とブロックを作りましょう。左に2つ、右に3つメニューを振り分けたら準備完了です。block.html/scssをベースとしています。 .he... -
デイトラ
デイトラWeb制作コース中級編DAY12 ヘッダー・メインビジュアルのコーディング⑧
【ヘッダーのコーディング Header-3column編】 今回はロゴとナビに加えて「電話する」ボタンがあるデザインです。コーポレートサイトっぽい!その名の通り、まずはHTMLで.header内に3つボックスを作ります。 今回はblock.html/scssをベースにします。ロゴ... -
デイトラ
デイトラWeb制作コース中級編DAY12 ヘッダー・メインビジュアルのコーディング⑦
今回はバーが二段になったデザインです。個人的にはZOZOTOWNを思い出します。まずはHTMLを少し変えます。.header__logo、.header__navそれぞれの内側に.innerを書きます。あとはタイトルを変えれば準備完了です。以下CSSの解説です。 【ヘッダーのコーディ... -
デイトラ
デイトラWeb制作コース中級編DAY12 ヘッダー・メインビジュアルのコーディング⑥
【ヘッダーのコーディング Header-block編】 base.htmlからメニューのis-activeを取り除き、タイトルを変えたただけでblock.htmlと同じものが出来上がるはずです。 .header__inner padding-top,padding-bottomを消します。 .header__logo heightとpadding,... -
デイトラ
デイトラWeb制作コース中級編DAY12 ヘッダー・メインビジュアルのコーディング⑤
今回はヒーローイメージバージョンを作っていきます。ヒーローイメージとは ヒーローイメージ(hero image)あるいはヒーロー画像とは、Webサイトのファーストビューにて、画面を全面に覆い尽くすように配置した大きなサイズの写真やグラフィック要素のこ...