やったつもり屋

5人家族(専業主婦、子供3人、僕)の視点から伝えるお金のこと。本業:組込系エンジニア、副業:ネットショップ店主。

プログラミング

カードタイプのデザイン4種類のHTML&CSS

投稿日:

カードタイプのデザインのHTML&CSSを作成しました。

作成したデザインは4つです。

  • ブログタイプ、
  • ブログタイル、
  • 値段表、
  • 画像を配置したリスト

基本的なデザインはこのタイプのどこかに含まれると思うので、このデータをテンプレートにして作業することで、
楽になるんじゃないかなと考えています。

技術的には未熟ですので、
今後もアップデートが必要ですが、
とりあえず今の時点ののデータを公開です。

実際のソースコードはコチラです。

また、テンプレート作成に当たり、作り方が不明だった内容は以下です。

【CSS】inline-blockの横並びの隙間を埋める方法

【CSS】CSSで画像を中央でトリミングする方法

【CSS】inline-blockで横並びにした要素の上を合わせる方法

【CSS】奇数、偶数、n番目でデザインを変更する方法

-プログラミング
-,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

【環境構築】VSCodeをHTMLコーディング向けにカスタマイズ内容と手順

こんにちは、きむら @bokukimura です。 僕は本業がAndroidアプリ開発なのですが、最近はJavaScriptで出来ることが増えてきているのでJavaScriptを身に付けたい。 せっか …

no image

【CSS】inline-blockで横並びにした要素の上を合わせる方法

display:inline-block;で、 横並びにした要素のサイズがそれぞれ違う場合に、下揃いになるので、上揃いにする方法です。

no image

【CSS】奇数、偶数、n番目でデザインを変更する方法

奇数偶数で色を変えたい。 奇数は画像を左寄せ、偶数は画像を右寄せ。 等にしたいときに使用する方法です。 最初の要素だけ適用

最後の要素 …

no image

【CSS】inline-blockの横並びの隙間を埋める方法

boxの間の改行コードが隙間を作る原因になるので、 親のスタイルでfont-sizeを0にして、子のスタイルで戻してやればできる

no image

【CSS】CSSで画像を中央でトリミングする方法

画像を中央位置でトリミングする

レスポンシブデザイン対応で 縦の高さのみを固定して、横幅は親要素いっぱいに表示させたい [crayon …