2022年5月– date –

見出し編 見出しのバリエーション Web制作で欠かせないパーツである見出しとボタン。長いので2回に分けて書きます。まずは見出しのコーディングノックから。 HTMLはDLしたファイルを使います。(できるだけ自分で準備したほうがいいと思いますが…) heading0...

いわゆるピクパを目指すためのツールですね。はにわまんさんの記事が詳しいのでリンクしておきます。 haniwaman.com 今回は回答例のコードに倣って実装したためほぼ修正するところがなかったです。

価格表 今回は価格表のパターンです。ビジネスのサイトには欠かせないパーツですね！ 横並びカードのコーディング Price編 HTML 最初カンプを見た時、表というからテーブルで作るのか？と思いきや、回答例を見たら定義リストで作られていました。ボックス3...

ブログカードレイアウトこういう形もよく見かけますね。ひとつは短冊を横にしたような長方形のカード。もうひとつはポラロイドのようなカード。タイル型と呼ばれたりします。ラベルが入る事でそれっぽい感じに仕上がりますね！ 横並びカードのコーディング...

市松レイアウトこれは市松レイアウトですね！炭治郎の服の柄でお馴染みの。コーディングの強化書のP100に出ています。 プロの「引き出し」を増やす　HTML+CSSコーディングの強化書作者:草野あけみエムディエヌコーポレーション（MdN）Amazon英単語の意味メ...

横並びカードのコーディング float編 今となってはあまり使われないかもしれませんが、floatも押さえておきます。HTMLはタイトル以外base.htmlと同じです。floatの説明はちづみさんのツイートが分かりやすい！✅なくそう！floatわけわからん！の壁！html、c...

横並びカードのコーディング Inline-Block編 HTMLはBase編と同じです。今回はdisplay: inline-block;を使ってカードを横並びにします。displayプロパティについてはサルワカさんの記事がこれ以上ないくらいわかりやすいです。saruwakakun.com .card base.s...

CSScombに悪戦苦闘したのはもう随分前なのですが、Gonzales PEというパーサが古いせいで不具合が起きる、というケースが複数みられたのでメモしておきます。まさかこんなところに原因があるとは。qiita.comq.hatena.ne.jpteratail.com名前空間に対応してい...

横並びカードのコーディング Base編 まずはプレーンなタイプからコーディングしていきます。HTMLはカードを6つ作っておきましょう。クラス名が動画と回答例で異なりますが回答例に合わせています。今回はこれ紹介していいの？っていうくらい実用的な内容に...

ヘッダーのコーディング Header-center編 今回は時々見かけるロゴサンドイッチタイプですね！.header内に左、センター、右とブロックを作りましょう。左に2つ、右に3つメニューを振り分けたら準備完了です。block.html/scssをベースとしています。 .header...