HTML – Webサイト制作に関するノウハウブログ｜IWACODE https://iwacode-web.com 初心者でもわかりやすいようにWeb制作に関するノウハウを発信していきます。コーディングだけではなく、デザイン、WordPressに関する情報、フリーランスとしてのマインド、活動についても発信していきます。 Thu, 16 Oct 2025 04:31:56 +0000 ja hourly 1 https://wordpress.org/?v=6.9.4 https://iwacode-web.com/wp-content/uploads/2023/12/cropped-site-icon-32x32.png HTML – Webサイト制作に関するノウハウブログ｜IWACODE https://iwacode-web.com 32 32 【JavaScript】現在のページに対応するナビゲーションメニューにスタイルを追加する方法 https://iwacode-web.com/style-current-page/ Mon, 29 Jul 2024 05:42:10 +0000 https://iwacode-web.com/?p=947

皆さんこんにちは！IWACODEの岩村です！ 今回は現在のページに対応するナビゲーションメニューのリンクに対して、「このリンクが今のページですよ～」といった感じでスタイルを適用する方法を解説いたします。 実際によくあるヘ […]]]>

皆さんこんにちは！IWACODEの岩村です！

今回は現在のページに対応するナビゲーションメニューのリンクに対して、「このリンクが今のページですよ～」といった感じでスタイルを適用する方法を解説いたします。

実際によくあるヘッダーデザインを用いて解説していきます！

今回は以下のようなヘッダーを作成します。

トップページを開いている想定なので、TOPの文字がオレンジになっています。

WORKSを開いたらWORKSの文字がオレンジに・・・といったような制御を行います。

HTML/CSS/JavaScriptの例

HTML

今回使用するデザインのHTMLを構築していきます。

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ナビゲーションメニューのスタイル</title>
  <link rel="stylesheet" href="style.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link
    href="https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
    rel="stylesheet">
</head>

<body>
  <header class="header">
    <h1 class="header__logo">iwacode</h1>
    <nav class="header__nav">
      <ul class="header__nav-list">
        <li class="header__nav-item"><a href="index.html">toppage</a></li>
        <li class="header__nav-item"><a href="about.html">works</a></li>
        <li class="header__nav-item"><a href="services.html">srevice</a></li>
        <li class="header__nav-item"><a href="contact.html">contact</a></li>
      </ul>
    </nav>
  </header>
  <script src="script.js"></script>
</body>

</html>

CSS

一番下にJavaScriptでクラスが付与された際のスタイルを記載しています。
※.is-activeが付与された際の指定

/* スタイルの初期化 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style-type: none;
  text-decoration: none;
}

/* サイトの基本設定 */
html {
  color: #465572;
  font-size: 16px;
  letter-spacing: 0.03em;
}

.header {
  align-items: center;
  background-color: #E9ECEF;
  display: flex;
  height: 80px;
  justify-content: space-between;
  padding: 0 40px;
}

.header__logo {
  font-family: "Caveat", cursive;
  font-size: 2rem;
  font-weight: bold;
}

.header__nav {
  font-family: "Roboto", sans-serif;
  font-size: .925rem;
}

.header__nav-list {
  display: flex;
  gap: 2em;
}

.header__nav-item>a {
  color: #465572;
  font-weight: bold;
  display: block;
  transition: .3s;
}

.header__nav-item>a:hover {
  color: #FF983A;
}

/* ↓↓↓↓↓　今回のポイント　↓↓↓↓↓ */
/* JavaScriptにて.is-activeクラスが付与された場合のスタイル */
.header__nav-item>a.is-active {
  color: #FF983A;
}
/* ↑↑↑↑↑　今回のポイント　↑↑↑↑↑ */

JavaScriptの記載

const currentPath = window.location.pathname;
const navLinks = document.querySelectorAll(".header__nav-item a");

navLinks.forEach(link => {
  if (link.href === currentPath) {
    link.classList.add("is-active");
  }
});

JavaScriptの解説

分かりやすいよう１行ずつコメントを入れました。

// １）定数currentPathに現在開いているページのURLを格納
const currentPath = window.location.pathname;

// ２）定数navLinksに.header__nav-item a に該当する要素を格納
// 　　複数取得できるので配列となる
const navLinks = document.querySelectorAll(".header__nav-item a");

// ３）２で取得した要素をループで処理する
navLinks.forEach(link => {

  // ４）ここでのlink.hrefはaタグのhref属性に指定しているURL
  // 　　currentPathには現在開いているページのURLが入っているので、
  // 　　if文の===で比較し、一致している要素の場合、中の処理に入る
  if (link.href === currentPath) {

    // ５）linkにis-activeクラスを付与
    // 　　※linkはaタグのこと
    link.classList.add("is-active");
  }
});

処理の概要としては、aタグで指定しているURLと現在開いているページのURLを比較して、同一であれば、一致するhref属性を持つaタグに対して.is-activeクラスを付与するといったものになります。

さいごに

いかがでしたでしょうか。

上記の処理を行うことで、現在開いているページが閲覧している方も一目でわかるため、ページの回遊性にも繋がります。

比較的簡単なJavaScriptの処理で実装可能なため、仕様を理解しぜひ組み込んでいってください！

]]> 【CSS】ファーストビューや画像上のテキストなど、要素を中央、真ん中に配置する方法 https://iwacode-web.com/css-center-aligned/ Fri, 12 Jul 2024 11:17:46 +0000 https://iwacode-web.com/?p=911

皆さんこんにちは！IWACODEの岩村です。 今回はHTML/CSSコーディングにおいて避けては通れない、要素の真ん中寄せについて解説いたします。 真ん中寄せはWEBサイト上でかなりの頻度で実装する必要があるということと […]]]>

皆さんこんにちは！IWACODEの岩村です。

今回はHTML/CSSコーディングにおいて避けては通れない、要素の真ん中寄せについて解説いたします。

真ん中寄せはWEBサイト上でかなりの頻度で実装する必要があるということと、仕組みについて理解することで、コーディングの知識が大きく高まるのかなと個人的には感じております。

今回記事を読んでいただくことによって、もう真ん中寄せでは悩まなくなると思います！

ぜひ最後まで読んでいただけると嬉しいです！

真ん中寄せをする方法について

真ん中寄せをする方法は大きくわけて４つ方法があり、それぞれ解説させていただきます！

display:flexを使用する方法

<div class="box wrap">
  <div class="item"></div>
</div>

<style>
  .box {
    width: 500px;
    height: 300px;
    background-color: rgb(209, 252, 245);
  }

  .item {
    background-color: rgb(0, 200, 200);
    width: 100px;
    height: 100px;
  }

  .wrap {
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>

wrapクラスに以下のCSSを適用しています。

.wrap {
  display: flex;
  justify-content: center;
  align-items: center;
}

まずはwrapクラスの要素に対して、display:flexを適用させます。
そうすることによって子要素（.item）がflexボックスとして操作できるようになります。
これを利用し、justify-content: centerで水平方向（←→）に対して真ん中寄せ、align-items: center; で垂直方向（↑↓）に対して真ん中寄せを行い、結果的に真ん中寄せを実現させています。

この方法でも特に問題はないのですが、真ん中寄せのためにCSSを３行使用しているため、可能であればもっと短い記載で実現させたいところです。
ということで次の方法が個人的にはオススメです！

display:gridを使用する方法

<div class="box wrap">
  <div class="item"></div>
</div>

<style>
  .body {
    padding: 40px;
  }

  .box {
    width: 500px;
    height: 300px;
    background-color: rgb(209, 252, 245);
  }

  .item {
    background-color: rgb(0, 200, 200);
    width: 100px;
    height: 100px;
  }

  .wrap {
    display: grid;
    place-items: center;
  }
</style>

wrapクラスに以下のCSSを適用しています。

  .wrap {
    display: grid;
    place-items: center;
  }

こちらでは上記の2行で真ん中寄せが実現可能です。

display:gridにてgridレイアウト化し、place-item: centerでgridコンテンツかしている要素（.item）を真ん中に寄せています。

コーディングを行う上で、この方法が一番記述が短く、楽に実現ができるのでかなりオススメな方法になります！

positionを使用する方法

<div class="box wrap">
  <div class="item"></div>
</div>

<style>
  .body {
    padding: 40px;
  }

  .box {
    width: 500px;
    height: 300px;
    background-color: rgb(209, 252, 245);
  }

  .item {
    background-color: rgb(0, 200, 200);
    width: 100px;
    height: 100px;
  }

  .wrap {
    position: relative;
  }

  .wrap .item {
    position: absolute;
    inset: 0; /* top: 0; right: 0; bottom: 0; left: 0; の略 */
    margin: auto;
  }
</style>

wrapクラスにposition: relativeを指定し、positionの基点にします。
子要素である.itemに対して、position: absolute; inset: 0; margin: auto; を指定します。

  .wrap {
    position: relative;
  }

  .wrap .item {
    position: absolute;
    inset: 0; /* top: 0; right: 0; bottom: 0; left: 0; の略 */
    margin: auto;
  }

こちらの方法でも真ん中寄せにはできるのですが、ちょっと記載量が多いです・・・

insetプロパティはpositionプロパティと併用して使用する、top/right/bottom/leftのショートハンドプロパティです。

上下左右に値を0で指定し、さらに上下左右の余白をautoにすることで、.itemを真ん中寄せにしています。

通常真ん中寄せにするのであれば、display:flexやdisplay:gridで指定する方がすっきりしますし見やすいのでそちらをオススメします。

ですが、子要素の方が親要素より大きい場合、上記の方法では実装ができません。

次に実装する方法では、親要素より子要素が大きい場合でも、真ん中寄せにすることが可能です。

positionを使用する方法（親要素より子要素が大きい場合）

<div class="box wrap">
  <div class="item"></div>
</div>

<style>
  .body {
    padding: 40px;
  }

  .box {
    width: 500px;
    height: 300px;
    background-color: rgb(209, 252, 245);
  }

  .item {
    background-color: rgb(0, 200, 200);
    width: 100px;
    height: 100px;
  }

  .wrap {
    position: relative;
  }

  .wrap .item {
    position: absolute;
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
  }
</style>

wrapクラスにposition: relativeを指定し、positionの基点にします。
子要素である.itemに対して、position: absolute; inset: 50% auto auto 0; transform: translate(-50%, -50%); を指定します。

  .wrap {
    position: relative;
  }

  .wrap .item {
    position: absolute;
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
  }

これを説明すると、insetプロパティにてtop: 50%,left50%で.itemを移動させます。この状態では以下のようになります。

これでは不完全なので、transform: translate(-50%, -50%);の指定で、.itemの縦横の半分の大きさ（-50%）だけずらして調節します。

この方法であれば、もし子要素が親要素より大きい場合でも対応ができるため、より汎用的に対応が可能です！

さいごに

今回は真ん中寄せについて４種類解説させていただきました。

最後に解説した方法だけで特に困ることはないのですが、コードが長くなると複雑になってわかりにくくなってしまうため、出来るだけ簡潔にコーディングを済ませたいところです。

そのため、可能な範囲でdisplay:gridなどで調節できるとよりきれいにコーディングが進めれると思います！

今回の記事が少しでも参考になりましたら幸いです。

]]> 【HTML】TABLEタグで線が2重になる-線が重ならないとき https://iwacode-web.com/table-border-collapse/ Thu, 11 Jul 2024 12:26:30 +0000 https://iwacode-web.com/?p=902

皆さんこんにちは！IWACODEの岩村です。 今回はTABLEタグの罫線について解説いたします。 WEBサイト上で料金表や時間割などの表を作成する際に使用するTABLEタグですが、 TABLEタグで罫線を引いたとき以下の […]]]>

皆さんこんにちは！IWACODEの岩村です。

今回はTABLEタグの罫線について解説いたします。

WEBサイト上で料金表や時間割などの表を作成する際に使用するTABLEタグですが、

TABLEタグで罫線を引いたとき以下のような表示になったことはないでしょうか。TABLEタグにはとあるプロパティの初期値の影響で、borderプロパティで罫線を引くと以下のような状態になってしまいます。

  <table>
    <tr>
      <th>見出し</th>
      <th>見出し</th>
      <th>見出し</th>
    </tr>
    <tr>
      <td>内容</td>
      <td>内容</td>
      <td>内容</td>
    </tr>
    <tr>
      <td>内容</td>
      <td>内容</td>
      <td>内容</td>
    </tr>
  </table>

  <style>
    table {
      width: 500px;
    }

    th,
    td {
      padding: 1em 0;
      background-color: #eee;
      border: 1px solid #999;
    }

    td {
      text-align: center;
    }
  </style>

border-collapseプロパティについて

セルとセルの間に謎の間隔が生まれるのは、TABLEタグのborder-collapseプロパティが影響しています。

border-collapseプロパティの値が初期値ではseparateになっているため間隔があいています。

間隔を埋めるためにはTABLEタグに以下のように指定します。

  <table>
    <tr>
      <th>見出し</th>
      <th>見出し</th>
      <th>見出し</th>
    </tr>
    <tr>
      <td>内容</td>
      <td>内容</td>
      <td>内容</td>
    </tr>
    <tr>
      <td>内容</td>
      <td>内容</td>
      <td>内容</td>
    </tr>
  </table>

  <style>
    table {
      width: 500px;
      border-collapse: collapse;  /* 追加 */
    }

    th,
    td {
      padding: 1em 0;
      background-color: #eee;
      border: 1px solid #999;
    }

    td {
      text-align: center;
    }
 </style>
border-collapse: collapse;

このプロパティ、値を指定することで、セルとセル間の間隔を消すことができます。

セルとセルの線が重なって見栄えがスッキリしますね。

セルとセルの間隔を空けて見せるには

WEBサイトのデザインにもよりますが、基本的にTABLEタグではborder-collapse: collapseで指定してコーディングすることが多いです。

セルとセルの間隔があいているような表をデザインすることもありますが、そのような場合でもborder-collapse: collapseを指定して、罫線を白にするなど間隔があいているように見せることもできます。

以下はborderプロパティで白線で間隔を空けています。

  <table>
    <tr>
      <th>見出し</th>
      <th>見出し</th>
      <th>見出し</th>
    </tr>
    <tr>
      <td>内容</td>
      <td>内容</td>
      <td>内容</td>
    </tr>
    <tr>
      <td>内容</td>
      <td>内容</td>
      <td>内容</td>
    </tr>
  </table>

  <style>
    table {
      width: 500px;
      border-collapse: collapse;
      /* 追加 */
    }

    th,
    td {
      padding: 1em 0;
      border: 3px solid #fff;
    }

    th {
      background-color: bisque;
    }

    td {
      text-align: center;
      background-color: #f5f5f5;
    }
  </style>

このように記載することによって間隔を空けて見せることも可能です。

さいごに

今回はborder-collapseについて解説いたしました。

初心者のうちはハマりやすいところでもあるので、TABLEタグを使用する際にはぜひ参考にしていただければと思います。

TABLEタグについては以下の記事でも解説しております。

少しでも参考になれば幸いです♪

あわせて読みたい
【初心者向け】tableタグの使い方！部分的に結合、セルを結合した表を作成する こんにちは。IWACODEの岩村彰斗です。 今回はtableタグの使い方ということで、部分的に結合された表の作成方法について解説させていただきます。 見出しなどが2行になっ…
あわせて読みたい
tableタグは使わない？どんな時に使う？使用するケースについて解説 こんにちは。IWACODEの岩村彰斗です。 今回はtableタグについて、どのようなときに使用するのが良いのか、tableタグを使用しない場合はどのようにするのかについて解説…
]]> 【フリーランス/WEBデザイナー】コーディングができないとダメなのか – HTML/CSS/JavaScriptの勉強 https://iwacode-web.com/webdesign-htmlcss-coding/ Fri, 31 May 2024 10:42:30 +0000 https://iwacode-web.com/?p=896

こんにちは！IWACODEのいわむらあきとです。 今回はYouTubeでフリーランスのWEBデザイナーはコーディング（HTML/CSS）ができないとダメなのかということをテーマにおいて、お話しております。 「フリーランス […]]]>

こんにちは！IWACODEのいわむらあきとです。

今回はYouTubeでフリーランスのWEBデザイナーはコーディング（HTML/CSS）ができないとダメなのかということをテーマにおいて、お話しております。

「フリーランス」として活動する上で、どのような立ち位置で、どのような仕事を取っていくかによっても方向性が変わってきます。

WEBデザイナーの方で、

コーディングには手を付けていない方

苦手だから今後どうしようかな

といった方はぜひチェックをしてみてください。

本ブログ内でも記事にしておりますので、よろしければこちらもご覧ください。

あわせて読みたい
フリーランスのWEBデザイナーにコーディングスキルは必要なのか？ こんにちは！IWACODEの岩村彰斗です。 今回はフリーランスのWEBデザイナーに、コーディングスキルはあったほうがよいのか？について考えてみました。 コーディングとい…
]]> 【VSCODE】【効率化】入れておくと便利なおすすめプラグイン！ https://iwacode-web.com/vscode-useful-plugin/ Sun, 25 Feb 2024 02:03:10 +0000 https://iwacode-web.com/?p=769

こんにちは！IWACODEの岩村彰斗です。 今回はWeb制作や開発で使用するVisual Studio Code（以下、VSCODE）のおすすめプラグインについてご紹介させていただきます！ もし入れていないプラグインがあ […]]]>

こんにちは！IWACODEの岩村彰斗です。

今回はWeb制作や開発で使用するVisual Studio Code（以下、VSCODE）のおすすめプラグインについてご紹介させていただきます！

もし入れていないプラグインがありましたら参考にして頂けると幸いです。

プラグインとは？
VSCODEなどの「ソフトウェアやアプリケーション」で、機能を追加するための拡張プログラムになります。標準にはない機能を追加することによって、使い勝手が向上し作業効率も上がります。

プラグインのインストール方法

はじめに

プラグインのインストール方法について

VSCODEを起動し、左のサイドバーよりインストールを行います。

プラグインのマークをクリックし、プラグインを検索します。

インストールしたいプラグインをクリックし、インストールボタンを押すとインストールが始まります。

注意点

プラグインはインストール後、ソフトの再起動が必要な場合があります。その場合はVSCODEを一旦閉じて、再度起動してあげるとプラグインが有効となります。

おすすめプラグイン

まず入れておきたいプラグイン

Japanese Language Pack

VSCODEは英語表記のため、日本語で表示してほしいといった方向けのプラグインになります。

Auto Close Tag

開始タグを記載すると、閉じタグが自動で付いてくれます。

例えば<p>と打つと、</p>も自動で記載されます。閉じタグの記載漏れも減るので、とても便利です！

Auto Rename Tag

開始タグの名前を変更すると、終了タグも合わせて変更してくれます。

例えば、<p>・・・</p>を<div>に変更した場合、開始タグの名前を変更するだけで、終了タグも変更してくれます。

変更漏れも防げるのでとても便利です！

入れておくと見やすくなる（視認性が上がる）プラグイン

Color Highlight

色コードの背景色が指定した色になり、設定した色が分かりやすくなります！

Indent-Rainbow

インデントが色分けされて階層がより見やすくなります。

zenkaku

小文字と大文字を識別してくれます。打ち間違えてそのままにするケースがなくなるため、非常に助かります。

Trailing Spaces

コードの末尾に余分なスペースなどが入っている場合に、わかるようになります。

入れておくと効率化が図れる便利なプラグイン

Live Server

VSCODEの変更内容をリアルタイムでブラウザに反映できます。

ローカルサーバとして起動させることができ、VSCODEで保存すると自動的に変更内容が反映されるため、大変効率よくコーディングすることが可能です。

HTMLファイルをchromeなどのブラウザにドラッグアンドドロップする必要もなくなります。

CSS Peek

クラス名にカーソルを合わせて、F12を押すことで定義しているところを表示（ジャンプ）してくれます。

どのようなCSSプロパティがどこで定義されているかすぐわかります！

Alt（Option）+ F12キーでジャンプせずにその場に表示させることも可能なため、行ったり来たりする必要もないです。

IntelliSense for CSS class names in HTML

すでにclassとしてCSSに定義している場合、HTMLに記載する際に自動補完されます。

キーを打っている際に、自動で候補として挙がってくるため、効率よくコードの記載が可能になります。

htmltagwrap

選択したテキストをHTMLタグで囲むことができます。

コードを選択して、Alt（Option） + Wを押すことによって、自動的に開始終了タグが生成されるため、非常に便利です！

デフォルトのタグが<p>になっているので、こちら好みにはなりますが、プラグインの設定画面から変更することが可能です。

コーディングをしていて、レイアウトによっては「この要素に対して親要素を追加したい…」といった場面に遭遇したことはないでしょうか？

コードの量が少なければそれほど手間ではないですが、複数の要素を一気にとなると、下手すると1画面に収まらない場合もあるので、そういった場合に非常に便利です。

さいごに

いかがでしたでしょうか？

プラグインをインストールすることによって、作業時間の短縮や、品質をあげることが可能です。

もし使用していないプラグインや、困っていることが解決できそうなプラグインがありましたら是非お試しください。

今回の記事が少しでも参考になりましたら幸いです。

]]> 【初心者向け】tableタグの使い方！部分的に結合、セルを結合した表を作成する https://iwacode-web.com/html-tabletag-join/ https://iwacode-web.com/html-tabletag-join/#respond Wed, 21 Feb 2024 02:24:09 +0000 https://iwacode-web.com/?p=698

こんにちは。IWACODEの岩村彰斗です。 今回はtableタグの使い方ということで、部分的に結合された表の作成方法について解説させていただきます。 tableタグの使い方が分からないといった方は、以下の記事で基本的な記 […]]]>

こんにちは。IWACODEの岩村彰斗です。

今回はtableタグの使い方ということで、部分的に結合された表の作成方法について解説させていただきます。

見出しなどが2行になっている表ですね！

筆者

tableタグを使用することで、簡単に実装が可能なのでぜひ覚えていってください。

tableタグの使い方が分からないといった方は、以下の記事で基本的な記載方法をご紹介しております。ご参考いただけますと幸いです。

あわせて読みたい
【初心者向け】tableタグの使い方！tr/th/tdなど基本的を覚えてなレイアウトを作成する こんにちは。IWACODEの岩村彰斗です。 今回はtableタグについて、初心者の方向けに、基本的なコーディング方法について解説いたします。 tableタグって、trとかthとかい…

tableタグで結合する方法

結合を行う際にはthタグ、もしくはtdタグに以下の記載を行います。

<!-- 横方向に結合する場合 -->
<th colspan="2"></th>

<!-- 縦方向に結合する場合 -->
<td rowspan="2"></td>

colspanとrowspanを記載するんですね！

筆者

結合する際には、タグの属性として、開始タグの中に記載します。

colspanとrowspanに「=2」と記載しているのは、2列（col）、または2行（row）結合するかを表しています。

colspanでは何列分広げるか、rowspanでは何行分広げるかを想像していただけると、わかりやすいかと思います。

tableタグを使用した表を作成

見出し部分が結合されたレイアウト

筆者

今回はこのような表を作成していきます。

見出しが２行、２列になっていますね！

筆者

２行になっている部分は、colspanとrowspanを使用して作成します。

  <table>
    <thead>
      <!-- 1行目 -->
      <tr>
        <th colspan="2" rowspan="2"></th>
        <th colspan="2">a</th>
        <th colspan="2">b</th>
      </tr>
      <!-- 2行目 -->
      <tr>
        <th>a1</th>
        <th>a2</th>
        <th>b1</th>
        <th>b2</th>
      </tr>
    </thead>

    <tbody>
      <!-- 3行目 -->
      <tr>
        <th rowspan="2">c</th>
        <th>c1</th>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <!-- 4行目 -->
      <tr>
        <th>c2</th>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <!-- 5行目 -->
      <tr>
        <th rowspan="2">d</th>
        <th>d1</th>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <!-- 6行目 -->
      <tr>
        <th>d2</th>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </tbody>
  </table>

  <style>
    thead {
      background-color: #2CA5FF;
      color: #fff;
    }

    th,
    td {
      border-collapse: collapse;
      border: 3px solid #fff;
      padding: 10px;
      text-align: center;
      width: 100px;
    }

    tbody {
      color: #555;
      font-weight: 700;
    }

    tbody th {
      background-color: #2CD9FF;
    }

    tbody td {
      background-color: #FFF8DF;
    }
  </style>

１行目の記載にcolspan=2が３つ入っております。これで２列分の要素を３つ作成しております。

内容部分の１列目は２行分広げる必要があるため、rowspan=2を指定しています。３行目と５行目の１列目にあたる要素に指定しております。

左上の２行２列分枠を取っているところは、非表示にすることで、見えなくすることも可能です。

<th colspan="2" rowspan="2" style="visibility: hidden;"></th>

注意点

colspanとrowspanですが、それぞれ複数列、複数行存在するレイアウトでないと、正しく動作しません。

以下の例をご覧ください。

    <thead>
      <tr>
        <th colspan="2"></th>
        <th></th>
        <th></th>
      </tr>
    </thead>

    <!-- CSS省略 -->

このようにcolspanを２で指定しても、複数行ないため、正しく動作しません。

    <thead>
      <tr>
        <th colspan="2"></th>
        <th></th>
        <th></th>
      </tr>
      <tr>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
      </tr>
    </thead>

複数行作成することで、colspanでの指定が有効となります。※rowspanの場合でも同様となります。

筆者

単一行の場合は、tableタグを使用する必要もないですし、要素の幅をCSSで調整するとよいですね！

どのようなときにtableタグを使用したほうがよいのかについては、以下の記事にて解説しております！

こちらもご参考いただけますと幸いです。

あわせて読みたい
tableタグは使わない？どんな時に使う？使用するケースについて解説 こんにちは。IWACODEの岩村彰斗です。 今回はtableタグについて、どのようなときに使用するのが良いのか、tableタグを使用しない場合はどのようにするのかについて解説…

さいごに

いかがでしたでしょうか。

表の中でExcelのように結合されているようなレイアウトの場合は、colspan、rowspanで実現することが可能です。

個別にCSSで調整することも可能ですが、tableタグの場合はこのような方法もあるということを知っておくだけで、コーディングを行う上での引き出しが増えると思います！

本記事が少しでも参考になりましたら幸いです。

]]> https://iwacode-web.com/html-tabletag-join/feed/ 0 【初心者向け】tableタグの使い方！tr/th/tdなど基本的を覚えてなレイアウトを作成する https://iwacode-web.com/html-tabletag-beginner/ https://iwacode-web.com/html-tabletag-beginner/#respond Tue, 20 Feb 2024 04:32:33 +0000 https://iwacode-web.com/?p=666

こんにちは。IWACODEの岩村彰斗です。 今回はtableタグについて、初心者の方向けに、基本的なコーディング方法について解説いたします。 tableタグで使用されるタグの種類 tableタグの基本的な記載方法について […]]]>

こんにちは。IWACODEの岩村彰斗です。

今回はtableタグについて、初心者の方向けに、基本的なコーディング方法について解説いたします。

tableタグって、trとかthとかいろいろ出てきて覚えづらいんですよね･･･

筆者

tableタグはdivタグやpタグと違って、使用するタグにルールがあるため、少し癖がありますね。

どのようにして覚えていったらよいでしょうか？

筆者

タグの名前と文章だけ見ても中々覚えづらいので、実際に手を動かして作りながら覚えていきましょう！
今回は以下のようなレイアウトを作っていきます。

よく見かけるレイアウトですね！

筆者

作り方さえ覚えてしまえば、ある程度のレイアウトは応用して作れるようになるので、頑張っていきましょう！

tableタグで使用されるタグの種類

筆者

まず、tableタグで使用されるタグは以下のようになります。

  • <table>・・・</table>
  • <tr>・・・</tr>
  • <th>・・・</th>
  • <td>・・・</td>
  • <thead>・・・</thead>
  • <tbody>・・・</tbody>
  • <tfoot>・・・</tfoot>

いや、いきなり７つ出てきたんですけど・・・

筆者

７つ記載しましたが、頻繁に使用するのは、tr、th、tdです！
まず先ほどのレイアウトがどのように構成されているか見てみましょう！

筆者

tableタグが一番外側にあって、１行ずつtrタグが記載されていますね。

tableタグの基本的な記載方法について

見出し（header）にあたる部分のコーディング

筆者

では、まずこの上の見出しの部分からコードを書いていきますね。

  <table>
    <thead>
      <tr>
        <th></th>
        <th>国語</th>
        <th>算数</th>
        <th>理科</th>
        <th>社会</th>
      </tr>
    </thead>
  </table>

  <style>
    thead {
      background-color: #2CA5FF;
      color: #fff;
    }

    th,
    td {
      border-collapse: collapse;
      border: 3px solid #fff;
      padding: 10px;
      text-align: center;
      width: 100px;
    }
  </style>
筆者

上の見出し部分だけ作成してみました。

trタグの中にthタグとtdタグが入るんですね！

筆者

tableタグの構成では、大枠をtableタグとして、その中にデザイン上１行ずつコーディングを行っていきます。
１行ずつtrタグで囲っていくイメージですね！

・trタグ
Table Rowの略で、tableタグ内の行を意味します。子要素としてthタグ、tdタグを使用することができます。
・thタグ
Table Headerの略で、tableタグ内の見出しとして使用します。
・tdタグ
Table Dataの略で、tableタグ内のデータとして使用します。

theadタグで囲われていますが、これはどのような意味なのでしょうか？

筆者

theadタグは、HTML上でどこが見出し部分にあたるのかわかりやすくするために使用すると認識いただいて大丈夫です。
また、CSSの適用が行いやすくなるなどの利点があります。

見出しにあたる部分をtheadタグで囲っているので、例えばtheadタグにbackgroundプロパティを指定すれば、一気に背景色が変更できますね！

筆者

次は内容部分のコーディングを行っていきます。

内容（body）にあたる部分のコーディング

  <table>
    <thead>
      <tr>
        <th></th>
        <th>国語</th>
        <th>算数</th>
        <th>理科</th>
        <th>社会</th>
      </tr>
    </thead>
    <!-- ↓↓↓ HTMLはここから追記 ↓↓↓ -->
    <tbody>
      <tr>
        <th>A君</th>
        <td>80</td>
        <td>85</td>
        <td>90</td>
        <td>95</td>
      </tr>
      <tr>
        <th>B君</th>
        <td>85</td>
        <td>90</td>
        <td>95</td>
        <td>80</td>
      </tr>
      <tr>
        <th>C君</th>
        <td>90</td>
        <td>95</td>
        <td>80</td>
        <td>85</td>
      </tr>
    </tbody>
    <!-- ↑↑↑ HTMLはここまで追記 ↑↑↑ -->
  </table>

  <style>
    thead {
      background-color: #2CA5FF;
      color: #fff;
    }

    th,
    td {
      border-collapse: collapse;
      border: 3px solid #fff;
      padding: 10px;
      text-align: center;
      width: 100px;
    }

    /* ↓↓↓ CSSはここから追記 ↓↓↓ */
    tbody {
      color: #555;
      font-weight: 700;
    }

    tbody th {
      background-color: #2CD9FF;
    }

    tbody td {
      background-color: #FFF8DF;
    }
    /* ↑↑↑ CSSはここから追記 ↑↑↑ */
  </style>
筆者

内容部分を３行分追加しました。

内容部分はtbodyで囲ってありますね！

筆者

tbodyタグも同様に、記載しなくても動作しますが、はやり囲っておいた方が見やすく、丁寧な記載になります。

thタグとtdタグが使用されていますが、この違いは何ですか？

筆者

見出しにあたる部分はthタグを使用し、データ部分にあたるところはtdタグを使用しますね！内容部分でも一番左側が見出しになっているので、thタグを使用しています。

tbodyで囲っているので、tbodyの中のthタグというようにCSSが適用できますね！

筆者

theadタグと同様にCSSが適用しやすくなるのも良いところですね。
では最後に表のフッター部分を作成していきます。

フッター（footer）にあたる部分のコーディング

  <table>
    <thead>
      <tr>
        <th></th>
        <th>国語</th>
        <th>算数</th>
        <th>理科</th>
        <th>社会</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>A君</th>
        <td>80</td>
        <td>85</td>
        <td>90</td>
        <td>95</td>
      </tr>
      <tr>
        <th>B君</th>
        <td>85</td>
        <td>90</td>
        <td>95</td>
        <td>80</td>
      </tr>
      <tr>
        <th>C君</th>
        <td>90</td>
        <td>95</td>
        <td>80</td>
        <td>85</td>
      </tr>
    </tbody>
    <!-- ↓↓↓ HTMLはここから追記 ↓↓↓ -->
    <tfoot>
      <tr>
        <th>平均</th>
        <td>85</td>
        <td>90</td>
        <td>90</td>
        <td>85</td>
      </tr>
    </tfoot>
    <!-- ↑↑↑ HTMLはここまで追記 ↑↑↑ -->
  </table>

  <style>
    thead {
      background-color: #2CA5FF;
      color: #fff;
    }

    th,
    td {
      border-collapse: collapse;
      border: 3px solid #fff;
      padding: 10px;
      text-align: center;
      width: 100px;
    }

    tbody {
      color: #555;
      font-weight: 700;
    }

    tbody th {
      background-color: #2CD9FF;
    }

    tbody td {
      background-color: #FFF8DF;
    }

    /* ↓↓↓ CSSはここから追記 ↓↓↓ */
    tfoot {
      background-color: #ECECEC;
      color: #555;
      font-weight: 700;
    }
    /* ↑↑↑ CSSはここから追記 ↑↑↑ */
  </style>
筆者

フッター部分を追加しました。これで完成ですね！

フッター部分はtfootタグを使用するんですね！

筆者

theadタグ、tbodyタグと同様にフッター部分にあたる箇所をtfootタグで囲っております。

さいごに

今回は基本的なtableタグの記載方法について解説させていただきました。

theadタグ、tbodyタグ、tfootタグについてはなくても問題はないのですが、メンテナンスの観点から考えると、囲っておいた方が構成が分かりやすく、管理もしやすくなるため、記載したほうが良いと考えております。

今回ご紹介した以外にも、Excelのようにセルが結合されているような表も実装することができ、こちらは別途解説させていただく予定です。

複雑そうに見えて、実際のところ、trタグの中にthタグ、tdタグを繰り返し記載していくことが多いので、実際にコーディングをしながら慣れていきたいですね！

今回の記事が参考になりましたら幸いです。

]]> https://iwacode-web.com/html-tabletag-beginner/feed/ 0 HTML レスポンシブデザインでの画像の切り替え方法 https://iwacode-web.com/html-picture-tag/ https://iwacode-web.com/html-picture-tag/#respond Thu, 04 Jan 2024 13:21:13 +0000 https://iwacode-web.com/?p=476

Webサイト制作を行っていると、パソコンとスマートフォンで表示させたい画像が異なる場合があります。 パソコンは基本横向きでの表示となりますが、スマートフォンやタブレットは縦で見ることが多く、どうしても同じ画像を表示すると […]]]>

Webサイト制作を行っていると、パソコンとスマートフォンで表示させたい画像が異なる場合があります。

パソコンは基本横向きでの表示となりますが、スマートフォンやタブレットは縦で見ることが多く、どうしても同じ画像を表示すると見栄えが悪くなってしまうことがあります。

例えば横長の画像をスマートフォンで見た場合、縮小されてしまいかなり小さくなってしまうなど・・・

パソコンでは16：9などの横長で表示し、スマートフォンでは1：1などの正方形サイズで表示するなど、さまざまです。

みなさまはWeb制作を行う際に、パソコンとスマートフォン（タブレット）で画像を切り替える場合はどのようにされていますか？

CSSのメディアクエリで実装されているという方、HTMLのpictureタグを使用することで簡単に実装することが可能です。

CSSを記載せず、HTMLだけで完結することができるため、コードの量の減らすことができます。

画像の切り替えはpictureタグで行うようにしましょう！

pictureタグの基本的な書き方

<picture>
  <source srcset="画像ファイルのパス" media="(min-width: 1024px)">
  <source srcset="画像ファイルのパス" media="(min-width: 768px)">
  <img src="画像のパス" alt=”代替テキスト”>
</picture>

pictureタグの中に、sourceタグ、imgタグを記載します。

sourceタグにはsrcset属性、media属性を指定することができ、

srcset属性は、画像ファイルのパスを指定、

media属性はmin-widthやmax-widthを使用して、画面の幅を指定します。

sourceタグの属性について

<picture>
  <source srcset="画像ファイルのパス" media="(min-width: 1024px)">　<!-- 優先1-->
  <source srcset="画像ファイルのパス" media="(min-width: 768px)"> 　<!-- 優先2-->
  <img src="画像ファイルのパス" alt="">
</picture>

source属性は複数設定することができ、上から順に優先順位が高くなり、条件に当てはまった画像ファイルが出力される仕様となります。

source属性で指定している条件にあてはまらなかった場合はimgタグで指定している画像ファイルが出力されます。

上記の場合、

画面幅が1024px以上の場合は「優先1」の画像ファイルが出力、

画面幅が1023px～768pxの場合は「優先2」の画像ファイルが出力、

それ以外（以下）の場合は、imgタグで指定されている画像ファイルが出力されます。

画像の大きさなど、CSSの指定方法について

  <picture class="image">
    <source srcset="./image/PC.jpg" media="(min-width: 1024px)">
    <img src="./image/sm.jpg" alt="デバイスの画像">
  </picture>
.image img {
　width: 300px;
  height: 300px;
}

sourceタグに記載されているタグは、内部的にimgタグとして置き換えられるため、imgタグに対してCSSを記載します。

min-width: 1024pxをmedia属性に指定しているため、1024pxではpc.jpgが表示されております。

画面の幅が1023pxになったため、画像がsm.jpgに切り替わりました。

さいごに

pictureタグの使用方法について解説させていただきました。

CSSでメディアクエリを使用して実現することも可能ですが、pictureタグを使用することによりコーディングの量を減らすことができます。

pictureタグで実装する場合はHTMLだけで切り替えを実装できるため、レスポンシブ対応も容易にできます。

Webサイトで使用する画像を、デバイスごとに切り替えたい場合は、ぜひpictureタグを使用してみてください。

]]> https://iwacode-web.com/html-picture-tag/feed/ 0 CSSのマージン（margin）とパディング（padding）の違いがわからない！図を用いて簡単に説明！ https://iwacode-web.com/css-margin-padding/ https://iwacode-web.com/css-margin-padding/#respond Thu, 14 Dec 2023 13:40:23 +0000 https://iwacode-web.com/?p=226

CSSで頻繁に使用するマージン（margin）とパディング（padding）ですが、似たような指定のため、ごちゃごちゃになってしまう方もいらっしゃるかと思います。 今回はこのマージン（margin）とパディング（padd […]]]>

CSSで頻繁に使用するマージン（margin）とパディング（padding）ですが、似たような指定のため、ごちゃごちゃになってしまう方もいらっしゃるかと思います。

今回はこのマージン（margin）とパディング（padding）について詳しく、かつ簡単に解説させていただきます！

本記事を読むことによって、マージンとパディングについてしっかり理解して、実際のコーディングでも使用できるようになると思います！

実際の記載方法にも触れていきますので、ぜひ最後まで読んでいただけると幸いです！

マージン（margin）とは？

CSSでは余白を表す意味合いで使用されており、主にHTMLの要素と要素の間隔を調整するために使用します。

まずは下記の例をご覧ください。

<!-- HTML -->
<div class="box-1">box-1</div>

/* CSS */
.box-1 {
  width: 200px;
  height: 200px;
  background-color: pink;
}

このようにボックスが表示されます。

もう一つ別の名前で追加してみましょう。

<!-- HTML -->
<div class="box-1">box-1</div>
<div class="box-2">box-2</div>

/* CSS */
.box-1 {
  width: 200px;
  height: 200px;
  background-color: pink;
}
.box-2 {
  width: 200px;
  height: 200px;
  background-color: orange;
}

特に指定をしていないため、くっついて表示されています。

ここにマージンを指定してみます。

/* CSS */
.box-1 {
  width: 200px;
  height: 200px;
  background-color: pink;
  margin-bottom: 30px;    /* 追加 */

}
.box-2 {
  width: 200px;
  height: 200px;
  background-color: orange;
}

「box-1」のclassが付与されている要素の下に「margin-bottom: 30px」を指定しました。マージンでは要素の外側、いわゆる余白にあたる部分の幅を指定するプロパティとなります。

marginプロパティでは、上下左右に指定することが可能です。

margin-top: 40px;     /* 要素の上側に40pxの余白 */
margin-right: 30px;   /* 要素の右側に30pxの余白 */
margin-bottom: 20px;  /* 要素の下側に20pxの余白 */
margin-left: 10px;    /* 要素の左側に10pxの余白 */

上下左右を一気に指定することも可能で、実際には下記の指定方法をよく使用します。

margin: 40px 30px 20px 10px;  /* 上側 右側 下側 左側　*/

上側から始まり、時計回りに値を指定します。
このパターンでは、4方向すべて違う値でしたが、実際にはさまざまなパタンがあり、指定方法も異なります。
下記がその他の例となります。

/* 4方向すべて同じ場合の省略形 */
margin: 40px;

/* 上下は40px、左右は20pxの省略形 */
margin: 40px 20px;

/* 上下は40px、左右は30px、下は20pxの省略形 */
margin: 40px 30px 20px;

パディング（padding）とは？

マージンは外側の余白という意味でした。パディングは反対で、要素の内側の余白になります！

先ほど使用した図でパティングを使用してみましょう。

/* CSS */
.box-1 {
  width: 200px;
  height: 200px;
  background-color: pink;
  margin-bottom: 30px;
  padding-top: 20px   /* 追加 */
}
.box-2 {
  width: 200px;
  height: 200px;
  background-color: orange;
}

ピンクの中に余白ができているのがわかるかと思います。「padding-top: 20px」を指定することによって、要素の内側の上側に余白が作成されています。

/* CSS */
.box-1 {
  width: 200px;
  height: 200px;
  background-color: pink;
  margin-bottom: 30px;
  padding-top: 20px   /* 追加 */
  padding-left: 20px;   /* 追加 */
}
.box-2 {
  width: 200px;
  height: 200px;
  background-color: orange;
}

今度は左側にもパティングを追加してみました。

要素の中の左側にも余白が作成されました。

パディングもマージンと同様に省略形での記載が可能です。

pading-top: 40px;     /* 要素内の上側に40pxの余白 */
pading-right: 30px;   /* 要素内の右側に30pxの余白 */
pading-bottom: 20px;  /* 要素内の下側に20pxの余白 */
pading-left: 10px;    /* 要素内の左側に10pxの余白 */

/* 上側 右側 下側 左側　*/
pading: 40px 30px 20px 10px;
/* 4方向すべて同じ場合の省略形 */
pading: 40px;

/* 上下は40px、左右は20pxの省略形 */
pading: 40px 20px;

/* 上下は40px、左右は30px、下は20pxの省略形 */
pading: 40px 30px 20px;

省略形で記載したほうがよい？

結論から言って、省略形で記載しなくても、動きに変化があるわけではないので、必須ではありません！

ですが、コーディングの量が多くなってくると、省略できるところを省略していかないと、ものすごく長いコードになってしまい、見辛くなってしまうんですね・・・

省略形を使用しないと、どこまでもスクロールするなんてことに・・・

コーディングにおいては、1画面でどれだけコードが見れるか、というところが非常に大事になってきます。

さいごに

マージンとパディングについて、解説させていただきました。

ごちゃごちゃになりやすいですが、どちらも実際のコーディングではなくてはならない存在で、非常に大事な部分になります。

実際に使用しながら、理解を深めていけば大丈夫です。

本記事にて少しでもお悩みの解決に繋がれば幸いです！

]]> https://iwacode-web.com/css-margin-padding/feed/ 0