-
デイトラ
デイトラWeb制作コース中級編DAY16 ニュース系のコーディング②
ページネーション 下の方にページネーションがついているタイプです。情報量が多いサイトでよく使われていますね。 【ニュース系のコーディング Pagenation編 HTML】 1行に3つのブロックが並んでいます。前回と同様日付とボタンは固定幅で、タイトルのみ可... -
デイトラ
デイトラWeb制作コース中級編DAY16 ニュース系のコーディング①
ニュース系 これも良く見かけるデザインですね。条件は以下の通りです。 ニュースタイトルのテキストが多くても、改行時にデザイン崩れを起こさないように! ラベルはリンク付き(リンク先は空でOK) ニュースタイトルはリンク(リンク先は空でOK) moreも... -
デイトラ
デイトラWeb制作コース中級編DAY15 ボタン、見出しを自在に作れるようになる②
【ボタン編】 ボタンのバリエーション 次はボタン編です。もはや定型文となってますが、はにわまんさんの記事にまとまっていますのでご一読を。 haniwaman.com button01 まずはプレーンなタイプから。言葉で説明するよりコードを貼った方が早いのでそうし... -
デイトラ
デイトラWeb制作コース中級編DAY15 ボタン、見出しを自在に作れるようになる①
【見出し編】 見出しのバリエーション Web制作で欠かせないパーツである見出しとボタン。長いので2回に分けて書きます。まずは見出しのコーディングノックから。 HTMLはDLしたファイルを使います。(できるだけ自分で準備したほうがいいと思いますが…) head... -
デイトラ
デイトラWeb制作コース中級編DAY14 PerfectPixelを使ったチェック&修正
いわゆるピクパを目指すためのツールですね。はにわまんさんの記事が詳しいのでリンクしておきます。 haniwaman.com 今回は回答例のコードに倣って実装したためほぼ修正するところがなかったです。 -
デイトラ
デイトラWeb制作コース中級編DAY13 横並びカードのコーディング⑥
価格表 今回は価格表のパターンです。ビジネスのサイトには欠かせないパーツですね! 【横並びカードのコーディング Price編 HTML】 最初カンプを見た時、表というからテーブルで作るのか?と思いきや、回答例を見たら定義リストで作られていました。ボッ... -
デイトラ
デイトラWeb制作コース中級編DAY13 横並びカードのコーディング⑤
ブログカードレイアウトこういう形もよく見かけますね。ひとつは短冊を横にしたような長方形のカード。もうひとつはポラロイドのようなカード。タイル型と呼ばれたりします。ラベルが入る事でそれっぽい感じに仕上がりますね! 【横並びカードのコーディン... -
デイトラ
デイトラ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...