私はこれまでdisplay:flexを使用してレイアウトを整えてきましたが、最近display:gridを使用する機会がありました。 スマホで親要素に以下のようなCSSを書き、 .親要素のクラス名{ display:grid; grid-template-columns:1fr1fr; gap:10px; } 以下のようなレイアウトを実現したわけですが、あまりdisplay:g...
私はこれまでdisplay:flexを使用してレイアウトを整えてきましたが、最近display:gridを使用する機会がありました。 スマホで...
HTMLImagemapGeneratorというツールを使用して日本地図にリンクを設定する方法を紹介します。 私が住んでいる地域が東海エリアなので、東海3県の地図を使用していきます。 ※このイラストは、こちらのフリー素材を使用して作成しました。 サンプルサイト https://ki-hi-ro.com/sample/img-link/ それぞれの県をクリック...
HTMLImagemapGeneratorというツールを使用して日本地図にリンクを設定する方法を紹介します。 私が住んでいる地域が東海エリアな...
先日、本サイトのトップページのブログコンテンツを横スクロールできるようにしました。 本記事では、横スクロールできるコンテンツの作成方法を紹介します。 検証してみると googleの検証ツール（デベロッパーツール）を使用して上記画像の要素を検証してみると、"top-contents__wrap"というクラスを持ったdivタグの中で、"skill-blog__link"とい...
先日、本サイトのトップページのブログコンテンツを横スクロールできるようにしました。 本記事では、横スクロールできるコンテンツの作成方法...
BEMは、クラス名をどのように付けていったらいいのかについての考え方です。 BEMの前に、HTMLとCSSについて書いていきます。 HTMLとCSSについて WEBサイトのデザインは、HTMLとCSSによって成り立っています。 HTMLについているクラスに対して、CSSを記述することで、WEBサイトのデザインが表示されています。 例えば、MUJIHOTELのサイトの...
BEMは、クラス名をどのように付けていったらいいのかについての考え方です。 BEMの前に、HTMLとCSSについて書いていきます。 HT...
先日LPコーディングを行った際に、XDのデザインデータで指定されていたフォントを完全に再現することが出来なかったので、CSSでデザインのフォントを再現するにはどうすればいいのかについて書いていきます。 今回再現できなかったフォントと代替フォント 今回再現できなかったフォント 今回、デザインデータで指定されていたフォントは、FOT-筑紫B丸ゴシックStdです。 XDでの表示...
先日LPコーディングを行った際に、XDのデザインデータで指定されていたフォントを完全に再現することが出来なかったので、CSSでデザインのフォントを再...
おはようございます。フリーランスWeb制作エンジニアの柴田浩貴です。今回は、「HTML/CSSで実現可能なこと」というテーマで記事を書いていきます。 画面を構築することができる【HTML/CSS】 HTMLは、マークアップ言語と呼ばれ、画面の骨格を規定する言語です。一方、CSSはスタイルシート言語と呼ばれ、画面の見た目を規定する言語です。 例えば、下記サイトでは、Ado...
おはようございます。フリーランスWeb制作エンジニアの柴田浩貴です。今回は、「HTML/CSSで実現可能なこと」というテーマで記事を書いていきます。...
