HTML / CSSについての記事

display: grid; の基礎

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

私はこれまでdisplay:flexを使用してレイアウトを整えてきましたが、最近display:gridを使用する機会がありました。 スマホで...

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

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

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

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

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

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

BEMについて

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

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

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

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

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

HTML / CSSで実現可能なこと

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

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

ランダムに表示される記事

FutureShopの固定ページのコーディングを行った(2回)

先日地元のWEB制作会社さんからFutureShopの新規ページ作成のコーディングをご依頼いただけました。AdobeXDのデザインデータがすでにあり、それを元に構築していくという内容でした。先月と今月の2回続けて対応しました。 必要だった情報 トップページのファイルや画像,CSSをアップロードするためのFTP情報が必要でした...

先日地元のWEB制作会社さんからFutureShopの新規ページ作成のコーディングをご依頼いただけました。AdobeXDのデザインデータがすでにあり...

【Excel】特定の範囲のグラフを作成する方法

先週、業務で特定の範囲のグラフを作成する必要がありましたが、やり方が分からず終業時間になってしまいました。 なので、この記事でその方法を実現したいと思います。 作りたかったグラフ 以下のようなデータがあります。 このデータは「No159」まで続いています。 最大値は、1000ですが、最大値付...

先週、業務で特定の範囲のグラフを作成する必要がありましたが、やり方が分からず終業時間になってしまいました。 なので、この記事でその方法を実現し...

平日の早朝にイオンモールノリタケガーデンの近くにオープンしたchocoZAPへ

9時から自宅で始業なので、朝の時間を有効活用して、chocoZAPへ行ってきました。 胸筋を鍛えるやつ チェストプレスは、35kgで4回が限界でした。 肩を鍛えるやつ ショルダープレスは、15kgで10回もいきませんでした。 背中を鍛えるやつ ラ...

9時から自宅で始業なので、朝の時間を有効活用して、chocoZAPへ行ってきました。 胸筋を鍛えるやつ チェストプレスは、35kgで4回...

すべての記事はこちら

年月アーカイブ

  • 2023年12月 (1)
  • 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月 (23)
  • 2022年4月 (19)
  • 2022年3月 (12)
  • タグ