HTML / CSSについての記事

display: grid; の基礎

私はこれまでdisplay: flexを使用してレイアウトを整えてきましたが、最近display: gridを使用する機会がありました。 スマホで親要素に以下のようなCSSを書き、 .親要素のクラス名 { display: grid; grid-template-columns: 1fr 1fr; g...

私はこれまでdisplay: flexを使用してレイアウトを整えてきましたが、最近display: gridを使用する機会がありました。 スマホで親要素に以下のようなCSSを書き、 .親...

日本地図にリンクを設定する方法

HTML Imagemap Generatorというツールを使用して日本地図にリンクを設定する方法を紹介します。 私が住んでいる地域が東海エリアなので、東海3県の地図を使用していきます。 ※このイラストは、こちらのフリー素材を使用して作成しました。 サンプルサイト https://ki-hi-ro.com...

HTML Imagemap Generatorというツールを使用して日本地図にリンクを設定する方法を紹介します。 私が住んでいる地域が東海エリアなので、東海3県の地図を使用していきます。 ...

横スクロールできるコンテンツの作成方法

先日、本サイトのトップページのブログコンテンツを横スクロールできるようにしました。 本記事では、横スクロールできるコンテンツの作成方法を紹介します。 検証してみると googleの検証ツール(デベロッパーツール)を使用して上記画像の要素を検証してみると、"top-contents__wrap" というクラスを持...

先日、本サイトのトップページのブログコンテンツを横スクロールできるようにしました。 本記事では、横スクロールできるコンテンツの作成方法を紹介します。 検証してみると goo...

BEMについて

BEMは、クラス名をどのように付けていったらいいのかについての考え方です。 BEMの前に、HTMLとCSSについて書いていきます。 HTMLとCSSについて WEBサイトのデザインは、HTMLとCSSによって成り立っています。 HTMLについているクラスに対して、CSSを記述することで、WEBサイトのデザインが表...

BEMは、クラス名をどのように付けていったらいいのかについての考え方です。 BEMの前に、HTMLとCSSについて書いていきます。 HTMLとCSSについて WEBサイトのデザイン...

デザインカンプ固有のフォントをCSSで再現する方法

先日LPコーディングを行った際に、XDのデザインデータで指定されていたフォントを完全に再現することが出来なかったので、CSSでデザインのフォントを再現するにはどうすればいいのかについて書いていきます。 今回再現できなかったフォントと代替フォント 今回再現できなかったフォント 今回、デザインデータで指定されていたフォント...

先日LPコーディングを行った際に、XDのデザインデータで指定されていたフォントを完全に再現することが出来なかったので、CSSでデザインのフォントを再現するにはどうすればいいのかについて書いていきます...

HTML / CSSで実現可能なこと

おはようございます。フリーランスWeb制作エンジニアの柴田浩貴です。今回は、「HTML / CSSで実現可能なこと」というテーマで記事を書いていきます。 画面を構築することができる【HTML / CSS】 HTMLは、マークアップ言語と呼ばれ、画面の骨格を規定する言語です。一方、CSSはスタイルシート言語と呼ばれ、画...

おはようございます。フリーランスWeb制作エンジニアの柴田浩貴です。今回は、「HTML / CSSで実現可能なこと」というテーマで記事を書いていきます。 画面を構築することができる【H...

すべての記事はこちら

年月アーカイブ

  • 2024年4月 (19)
  • 2024年3月 (37)
  • 2024年2月 (27)
  • 2024年1月 (35)
  • 2023年12月 (17)
  • 2023年11月 (24)
  • 2023年10月 (7)
  • 2023年9月 (24)
  • 2023年8月 (33)
  • 2023年7月 (12)
  • 2023年6月 (22)
  • 2023年5月 (5)
  • 2023年4月 (20)
  • 2023年3月 (6)
  • 2023年2月 (18)
  • 2023年1月 (25)
  • 2022年12月 (34)
  • 2022年11月 (42)
  • 2022年10月 (14)
  • 2022年9月 (11)
  • 2022年8月 (11)
  • 2022年7月 (7)
  • 2022年5月 (22)
  • 2022年4月 (19)
  • 2022年3月 (12)
  • タグ