dl・dt・ddで作るTableタグ風の会社概要定義リストの作り方
この記事では、シンプルで見やすいtableタグ風の「会社概要」セクションの作成方法を紹介します。定義リスト（dl, dt, dd）を使って構造化し、CSSで美しく整列させる方法を実装します。 実装のポイント dlタグで情 […]
FAQカードデザインをHTMLとCSSだけで作る方法
この記事では、HTMLとCSSだけで実装できるFAQ（よくある質問）カードデザインを紹介します。 JavaScriptやプラグインを使わず、シンプルで動きのあるレイアウトを作る方法をわかりやすく解説します。 HTML構造 […]
ul・liタグでカード型数字リストデザインを作る方法
このリストは、HTMLの<ul>（順不同リスト）と<li>（リスト項目）タグを使って、カード風に表現したサンプルです。 各項目をリスト化することで、情報を整理して読みやすくし、CSSでデザインを加 […]
固定ページで使える ol・li ステップデザインの作り方
ペットを迎えるまでの流れを、ol/li タグを使ってステップ形式で表示するデザインです。番号は左に固定し、見出しと説明文は自然に改行されるようにレイアウトしています。 HTML構造 <ol class="step- […]
Flexboxで作る！左右非対称の特長セクションデザイン
サイトの特徴紹介セクションを美しく配置するデザイン例です。 左側に半円状の青背景とタイトル、右側に白いカードで内容を表示する構成です。 視覚的なリズムを持たせたいLP（ランディングページ）や企業サイトに最適です。 実装の […]
Font Awesome のアイコンを使って、紹介カードを作成する方法
この記事では、Font Awesome のアイコンを使って、紹介カードを作成する方法を紹介します。ここでは、犬・猫・小動物などを紹介するカードをレイアウトしてみましょう。 実装のポイント Flexboxを使って横並びレイ […]
もう使わない！HTMLの非推奨タグとCSSでの代替方法まとめ
HTMLやCSSには、以前はよく使われていたけれど現在は非推奨となったタグや属性があります。ここでは、以前の使い方の例と、HTML5/CSSでの代替方法を色分けして見やすくまとめました。 非推奨HTMLタグ一覧（HTML […]
HTML5とは？初心者でも分かる基礎と活用方法
この記事では、Web制作の基本となるHTML5について、初心者でも理解できるように解説します。HTML5の特徴や基本タグ、便利な機能までをまとめました。 HTML5の基本とは HTML5は、Webページを作るための最新の […]
JavaScriptを使わず、HTML＋CSSだけで棒グラフを作る方法
Webサイトで売上やアクセス数などのデータを視覚的に見せたい場合、 グラフを使うと一目で理解できます。 多くの人は「Chart.js」などのJavaScriptライブラリを使いますが、 今回はあえてJavaScriptを […]
Webデザインで使える font-family の基本とおすすめフォント例
Webサイトの文字はフォント次第で印象が大きく変わります。ここでは代表的な font-family の使い方とおすすめフォント例をご紹介します。 フォントの基本書き方 p { font-family: "Noto San […]
初心者向け！paddingで要素の内側に余白を作る方法
Webデザインでは、要素の内側に余白を作るために padding を使います。 特に「文字や画像を余白で囲む」「ボックスの内側を広くする」といった調整に便利です。 この記事では、基本のpaddingからショートカット指定 […]
初心者向け！marginで要素を左右に動かす方法
初心者向け！marginで要素を左右に動かす方法 Webデザインでは、要素の外側に余白を作るために margin を使います。 特に「左にずらす」「右に寄せる」「中央に配置する」といった配置調整は頻繁に使います。 この記 […]
ulタグとolタグの違い・デザインカスタマイズ方法
Webページで箇条書きを作るときによく使うのが、ulタグ（順序なしリスト）とolタグ（順序付きリスト）です。この記事では、その違いとCSSでデザインをカスタマイズする方法を紹介します。 ulタグとは？ ul は「unor […]
人気絵文字 Unicode の特殊文字コード
人気絵文字（Emoji）の特殊文字コード一覧 ブログやWebページで使える絵文字のHTML特殊文字コードをまとめました。コピーしてすぐ使えます。 工具・作業 🔧 : 🔧  […]
HTMLで使える丸数字①～⑳の一覧表
丸数字は文章内で順序やステップを示すときに便利です。HTMLでは文字実体参照（HTML Entity）を使って表現できます。 丸数字 HTML実体参照 UTF-8コード ① ① U+2460 ② &a […]
Googleマップをレスポンシブに埋め込む方法
会社概要やアクセスページで Google マップを埋め込むとき、画面サイズに合わせて縦横比を維持したい場合があります。 以下の方法を使うと、PC・スマホどちらでも崩れずに表示できます。 サンプルHTML <div […]
dl・dt・ddで作る会社概要ページでよく使われる定義リストの作り方
企業サイトの「会社概要」ページでは、表組みのように左に項目、右に内容を並べることが多いです。 サンプルHTML <div class="company-profile"> <dl> <div […]
YouTubeをレスポンシブ対応で埋め込む方法【CSSで動画サイズ自動調整】
ブログやWebサイトにYouTube動画を埋め込むとき、画面サイズによって動画の幅や高さが崩れてしまうことがあります。そこで便利なのが、レスポンシブ対応のCSSです。この方法を使うと、PC・タブレット・スマホに合わせて動 […]
CSSで簡単に角丸画像にする方法
WordPressでも普通のHTMLでも使える、画像の角を丸くするCSSをご紹介します。簡単に見た目を柔らかくできます。 基本の角丸 画像の角を少し丸くする場合は、border-radiusを使います。 HTMl < […]
CSS を使って文字を画像の上に重ねる方法
アイキャッチ画像や記事内の写真に「文字を重ねたい」と思ったことはありませんか？CSSを使えば簡単に実現できます。この記事では、基本のコードでの調整方法、さらにJavaScriptでアニメーションをつける方法までまとめて解 […]
アクセシビリティの基本【tableタグ】スマホ横スクロール
HTMLで表を作るときに使うのが table タグです。表はデータを整理して見やすく表示するのに便利です。ここでは table タグの基本と、アクセシビリティを意識した使い方も紹介します。 tableタグの基本構造 &l […]
アクセシビリティの基本【alt属性】
ウェブサイトに画像を掲載する際、alt属性 は単なるSEO対策ではなく、 目の見えない人や視力の弱い人が内容を理解するためにアクセシビリティとして非常に重要です。 ホームページは健常者、目の見えない人、視力の弱い人、高齢 […]
アクセシビリティの基本【emタグ】
CSSで文字サイズを指定する場合、pxとemのどちらを使うかで柔軟性が変わります。 特にブログ記事やテーマカスタマイズでは、emを使うことでユーザーに優しい設計が可能です。 em の基本 1em は 親要素のフォントサイ […]
アクセシビリティの基本【タイトルタグ】
ウェブサイトを誰にとっても使いやすくするためには、 アクセシビリティを意識することが大切です。 特に目の見えない人や視力の弱い人は、スクリーンリーダーを利用してWebページを読み上げさせています。 スクリーンリーダーと見 […]