CSSのfilterプロパティとは？

CSSの中には、画像にエフェクトを簡単にかけられる「filter」プロパティがあります。

filterを使えば、画像を白黒にしたり、ぼかしを入れたり、明るさやコントラストを調整したりと、いろいろな加工ができます。

「デザインをもうちょっとオシャレにしたいな…」と思ったときに役立つ技の一つなので、ぜひ活用してみてください！

よく使われるfilter効果

filter: grayscale(100%);    /* 画像をモノクロにする */
filter: blur(5px);          /* ぼかし効果 */
filter: brightness(150%);   /* 明るさ調整 */
filter: contrast(200%);     /* コントラストを調整 */
filter: saturate(300%);     /* 彩度を調整 */
filter: sepia(80%);         /* 画像をセピア色にする */

filter効果は組み合わせて使用できる

filterプロパティは、複数の効果を組み合わせて使用できます。

例えば、白黒にした上で少し明るさを加えると、柔らかい印象のモノクロ画像が作れます。

filter: grayscale(100%) brightness(120%);

動きのあるエフェクトを作るには？

ただエフェクトをかけるだけでなく、動きがあるとさらに魅力が増します！

例えば、画像がグレースケール（モノクロ）からカラーに変わるようなアニメーションを加えてみましょう。

img {
  filter: grayscale(100%);
  transition: filter 1s ease-in-out;
}
img:hover {
  filter: grayscale(0%);
}

このコードでは、画像にマウスをホバーすると、徐々にカラーに戻るアニメーションが実現できます。

ホバーを外すとまたモノクロに戻るので、動きのあるスタイリッシュな演出ができますね！

マスクや影を使った効果でさらにオシャレに！

次に紹介するのは、画像にマスクや影を加える方法です。例えば、drop-shadow()を使えば、画像に立体感を持たせることができます。

filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.5));

こうすることで、画像の周りにぼんやりとした影をつけることができ、より深みのあるデザインが可能です。画像の配置や背景次第で、様々な演出に応用できます！

filterプロパティを使うときのポイント！

最後に、filterを使う上で気をつけたいポイントをいくつかご紹介します。

ブラウザ対応

filterプロパティはほとんどのモダンブラウザで対応していますが、古いブラウザでは一部サポートされていないことがあります。念のため、使いたいエフェクトが対応しているか確認しておきましょう。

パフォーマンス

特に大きな画像や多くのエフェクトを同時に適用すると、ページの読み込みやパフォーマンスに影響が出ることがあります。適度に使うのがポイントです！

さいごに

CSSのfilterプロパティを使えば、シンプルに見えるけど、プロっぽいエフェクトを画像に加えることができます！

ホバーアニメーションを使えば、動きのあるデザインが手軽に実現できるので、ぜひ試してみてください！

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

CSSのclip-pathプロパティを使うと、画像や要素をさまざまな形に切り取ることができます。borderプロパティでも三角形を作ることはできるんですが、少し手間がかかるのと少々わかりにくいところがあります。
clip-pathを使うともっと簡単に、そして柔軟に形を作ることができるので、特に三角形や直角三角形をデザインに取り入れたいときにはおすすめです。

本記事では、clip-pathを使って基本的な三角形から少し変わった形状までを作る方法を紹介し、それらを実際のデザインにどのように応用できるかも解説していきます。WEBデザインにちょっとしたアクセントを加えたい方には、clip-pathはとても便利なプロパティです。

さまざまな形の作り方と、その活用法をご覧ください！

clip-pathとは？

clip-pathは、要素の表示領域を指定するCSSプロパティです。形状を定義することで、その形に合わせて要素をクリップ（切り取り）できます。

clip-pathを使うことで、単純な四角形以外の形状をCSSだけで実現できます。

clip-pathで作る基本的な形

三角形の作成

三角形を作成する最も簡単な方法の一つがclip-pathを使うことです。まずはclip-pathを使った三角形の作成方法を見てみましょう。

<!-- 三角形 -->
<div class="triangle"></div>

.triangle {
  width: 150px;
  height: 150px;
  background-color: #3498db;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

コードの解説

clip-path: polygon()を使って三角形の頂点を指定しています。polygon関数の引数は、要素内の各頂点の位置を示します。この例では、3つの頂点が指定されています。

• 50% 0%：要素の上部中央を示します（x軸の50%、y軸の0%）
• 0% 100%：要素の左下を示します（x軸の0%、y軸の100%）
• 100% 100%：要素の右下を示します（x軸の100%、y軸の100%）

応用形の作成

直角三角形

直角三角形もclip-pathを使って簡単に作成できます。

<!-- 直角三角形 -->
<div class="right-triangle"></div>

.right-triangle {
  width: 100px;
  height: 100px;
  background-color: #e74c3c;
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}

コードの解説

この例では、3つの頂点を以下のように指定しています。

• 0 0：要素の左上を示します（x軸の0、y軸の0）
• 100% 100%：要素の右下を示します（x軸の100%、y軸の100%）
• 0 100%：要素の左下を示します（x軸の0、y軸の100%）

台形

台形もclip-pathを使って簡単に作成可能です。

<!-- 台形 -->
<div class="trapezoid"></div>

.trapezoid {
  width: 200px;
  height: 100px;
  background-color: #9b59b6;
  clip-path: polygon(25% 0%, 75% 0%, 100% 100%, 0% 100%);
}

実用例

カスタム形状の画像切り取り

円形

clip-pathを使うと、画像を任意の形状にクリップすることが可能です。例えば、プロフィール写真を円形することもできます。

<!-- 円形（プロフィール画像の例） -->
<div class="profile-image"></div>

.profile-image {
  width: 150px;
  height: 150px;
  background-image: url('https://via.placeholder.com/150');
  background-size: cover;
  clip-path: circle(50%);
}

多角形

頂点を増やすことで以下のように多角形も作成することが可能です。

<div class="hexagon"></div>

.hexagon {
  width: 150px;
  height: 150px;
  background-color: #3498db;
  clip-path: polygon(
    /* 上辺中央 */
    50% 0%,
    /* 右上 */
    100% 25%,
    /* 右下 */
    100% 75%,
    /* 下辺中央 */
    50% 100%,
    /* 左下 */
    0% 75%,
    /* 左上 */
    0% 25%
    );
}

三角形で吹き出しを実装

吹き出しの角の部分を疑似要素を使用して作成しております。

positionプロパティにて三角形の位置を調整することで吹き出しのデザインを実現しています。

positionプロパティの指定によっては右側に角を付けることも可能です。

<div class="speech-bubble">吹き出しを作成</div>

/* 吹き出しの本体部分 */
.speech-bubble {
  position: relative;
  background-color: #f0f0f0;
  padding: 1em;
  border-radius: 10px;
  width: fit-content;
  text-align: center;
  border: 1px solid #f0f0f0;
}

/* 三角形の部分 */
.speech-bubble::after {
  content: "";
  display: block;
  background-color: #f0f0f0;
  position: absolute;
  inset: 100% 0 auto 0;
  margin-inline: auto;
  width: 30px;
  height: 30px;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

さいごに

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

clip-pathを使用すると、要素や画像をさまざまな形にクリップでき、三角形などのデザインも容易に作成することができます。

clip-pathは非常に便利なプロパティのため、ぜひ使いこなして実線に役立てていきましょう！

皆さんこんにちは！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サイトの文字の高さ、行間を調整するにはline-heightプロパティを使用します。

複雑なプロパティではないため、初心者の方もわかりやすいかと思います。

わからないといった方は本記事を読んでいただくことで、イメージをつかんでいただけると幸いです。

line-heightプロパティとは

上記の図のように、行の高さを調整するプロパティとなります。

フォントサイズ（px）に対して相対的に値を設定することが多く、主に数値（単位なし）や%を使用して指定します。

詳しくは以下をご覧ください。

line-heightプロパティの指定方法

数字での指定（単位なし）

<body>
  <p class="text">line-heightについて</p>
  <style>
    html {
    }

    .text {
      font-size: 16px;
      background-color: #eee;  /* 分かりやすいよう背景色を付ける */

      /* 数値のみで指定 */
      line-height: 1.5;
    }
</style>
</body>

グレーの背景色になっている部分がline-heightプロパティで指定している高さとなります。

1.5の指定はフォントサイズ（この場合は16px）に対する相対値となっており、16 * 1.5 = 24pxの高さが付与されております。

%での指定

<body>
  <p class="text">line-heightについて</p>
  <style>
    html {
    }

    .text {
      font-size: 16px;
      background-color: #eee;  /* 分かりやすいよう背景色を付ける */

      /* 数値のみで指定 */
      line-height: 150%;
    }
</style>
</body>

150%の指定は数値のみで指定した場合と同様にフォントサイズに対しての相対値となっております。

この場合、高さは24pxとなり、1.5と指定した場合と同様のレイアウトとなります。

line-heightプロパティの推奨値

制作するデザインにもよりますが、一般的に1.5～2.0（150%～200%）の間がよく使用されています。line-heightの単位をpxで設定することも可能ですが、レスポンシブ対応などでフォントサイズが変わった場合、line-heightの値も変更する必要がでてきます。

数値のみ、もしくは%での指定をするのがオススメです。

1.5～2.0よりも値が大きくなると、文章が読みづらくなるため、調整する際には注意しましょう。

デザインカンプからのline-heightプロパティの考え方

デザインカンプがPhotoshop、illustratorの場合はデザイン上、絶対値で設定されているため、デザインの行間を考慮して値を指定する必要があります。

Figmaについては%で指定することも可能ですが、pxで設定されている場合もあるため、コーディングを行う際にはあらかじめ確認しておきましょう。

行間以外での使い方

ボタンのレイアウトでline-heightプロパティを使用することもできます。

line-heightプロパティの特徴ですが、上下に均等に高さが生まれるため、自然と縦方向（垂直方向）に対して文字が真ん中になります。

この特徴を利用してボタンのレイアウトを作成します。

<body>
  <a href="#" class="btn">詳細はこちら</a>
  <style>
    .btn {
      background-color: #1925ae;
      color: #fff;
      display: inline-block;
      font-size: 14px;
      margin: 0 auto;
      padding-inline: 3em;

      /* line-heightで高さを指定 */
      line-height: 3;
    }
  </style>
</body>

このようにline-heightプロパティで行の高さを指定し、ボタンのレイアウトが実現できます。

さいごに

line-heightプロパティについて解説させていただきました。

文章のデザインを行う際には必ず使用するプロパティのため、ぜひ覚えていってください。

特に長めの文章の場合は、行間の取り方ひとつで見栄えがかなり変わってきますので、狭すぎず、広すぎずデザインを整えていきたいですね。

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

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

今回はWebサイトを作成する上でとても大切なOGPについてご紹介させていただきます。

OGPとは？

OGPは（Open Graph Protocol）を略したもので、簡単に言えば、SNS（X、Facebook、LINEのトーク）でURLを張り付けた際に、表示される仕組みのことです。

LINEのトーク画面でサイトのURLを張り付けた際に、画像などが自動で表示されたりしたことはないでしょうか？

LINEでお店のURLを張り付けたときに勝手に画像が表示されたような・・・

筆者

このように設定していると、画像が表示されます。

SNSでいろんな方にシェアしてほしい、クリックしてほしい！といった方にはとても重要です！

OGPの指定方法について

WordPressプラグインを使用する場合

WordPressを使用している場合、プラグインで制御することも可能です。

もし何らかのWordPressテーマを使用している場合は、次のプラグインのうち１つ選んで使用すれば問題ありません。

プラグインで設定できるんですね！

筆者

注意することがあって、インストールするのは１つだけでよいです！
設定が重複して正しく表示されない可能性もあるので、複数入っていないか確認してみましょう。

コーディングで実装する場合

コーディングに関しては大体決まっているので、今回ご紹介するコードをコピペして、それぞれのページに合わせて名前や説明を変更すれば基本的には問題ありません。

<meta property="og:title" content="Webページのタイトルをここに記載">
<meta property="og:description" content="Webページの説明文をここに記載（～90文字程度）">
<meta property="og:type" content="website">
<meta property="og:image" content="表示する画像のURL">
<meta property="og:url" content="WebページのURL">
<meta property="og:site_name" content="Webサイトの名前">
<!-- X（Twitter） -->
<meta name="twitter:title" content="Webページのタイトルをここに記載">
<meta name="twitter:description" content="Webページの説明文をここに記載（～90文字程度）">
<meta name="twitter:image" content="表示する画像のURL">
<meta name="twitter:card" content="summary">

設定の詳細

X（旧Twitter）の設定（省略可）

注意点

表示されるカードの大きさによっては、設定している画像が自動的にトリミングされてしまいます。

OGPで推奨されている画像の大きさは横が1200px、縦が630px（比率1.91：1）となっています。

LINEのトーク画面などは上記の大きさで問題ありませんが、その他のSNSでシェアした場合、正方形のサイズにトリミングされます。

トリミングされると画像の文字切れなどが発生する可能性もあるため、サイズは横：1200px、縦：630pxで作成し、必要な情報は、中央の正方形部分に収めるようにするのがオススメです！

設定したOGPの確認をする方法

プラグイン、またはコーディングによってOGPの設定が完了した後、どのようになっているか、または正しく設定されているか確認する方法があります。

以下のサイト（シミュレーター）にてOGP設定を行ったサイトのURLを張り付けるだけで、確認が可能です。

ラッコツールズ

OGP確認 | ラッコツールズ WebページのURLを入力するだけで、SNSでシェアした際に表示されるOGPの画像・タイトル・説明文の見え方やサイズを確認できる無料ツール。各SNSでの表示イメージをプレビュ…

設定が完了したら、一度確認してみるのをおススメします！

さいごに

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

OGPの設定はWebサイトを制作する上で非常に重要なので、制作する際には忘れずに設定を入れるようにしましょう！

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

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

今回はフリーランスのWEBデザイナーに、コーディングスキルはあったほうがよいのか？について考えてみました。

コーディングというのは、HTML、CSS、JavaScriptといった技術を用いてWEBサイトを構築することを指します。

コーディングを覚えたほうがいいのかな・・・と考えられている方のお悩みが少しでも解消できれば幸いです！

WEBデザイナーの仕事内容について

まずWEBデザイナーの仕事内容ですが、一般的にインターネット上の広告画像であったり、Youtubeのサムネイル画像、WEBサイト（ホームページ）のデザインカンプ作成が主な業務になります。

デザインカンプとは
WEBサイト（ホームページ）の設計図のようなもので、WEBサイトのイメージを画像として作成し、どのような仕様でWEBサイトを構築するかを示します。
デザインカンプを基に、WEBサイトを構築していきます。構築まで担当するWEBデザイナーもいますが、構築される方はコーダーとも呼ばれたりします。

コーディングスキルが必要なWEBデザイナーについて

WEBデザイナーって画像制作が主な業務なのであれば、コーディングスキルは必要ないのではないですか？

筆者

広告画像やサムネイル画像専門で活動されている方はコーディングスキルは必要ないと思われます。
ただ、デザインカンプの作成など、コーダーに引き継ぐ必要がある場合はコーディングスキルは必要かと思います。

デザインカンプを作成するWEBデザイナー

デザインカンプを作成するということは、コーダーに仕様を引き継ぐ必要があります。

デザイン（画像）からWEBサイトを作成していく上で、コーディングで実装しづらかったり、WEBサイト上で再現するには困難な場合もあります。

コーディングを知らないと、WEBサイト上で実現ができないデザインになってしまう可能性があり、デザインの差し戻しなど２度手間、３度手間になってしまう可能性もあります。

どこまでコーディングは覚えればよい？

完璧に理解するのは厳しいので、HTML／CSSがどのような役割で、どのようなことができるのかが、分かってればよいかと思います。

簡単な修正や、簡素なWEBサイトがHTMLとCSSで構築できるくらいまでなるとより良いです。

最近はスマートフォンでWEBサイトを見る方が圧倒的に多く、スマホでの表示を制御するレスポンシブ対応について、どのような形で実装されるのか、知っておくとより良いかと思います。

筆者

個人的には、JavaScriptまでは覚える必要はないかと思います！

ノーコードツールで制作するWEBデザイナーは？

最近では「WIX」や「STUDIO」といったノーコードツールというものが存在し、HTML／CSSのスキルが無くてもWEBサイトが作成できるようになっております。

ただ必要がないといっても、WEBサイトの根幹を担っているのは、HTMLとCSSです。

ノーコードツールはそれらを、パソコン上の操作で簡単に実装でき、作られたWEBサイトの裏ではHTMLとCSSで制御されています。

ノーコードツールで制作するとなっても、HTML／CSSの知識は必ず役に立つため、覚えておいて損はありません。

以下の記事にてコーディングに関することも投稿しております。

もし興味がございましたら、チェックしていただけると幸いです。

あわせて読みたい

【初心者必見】Webサイト制作の基礎、HTMLとCSSとは何なのかをわかりやすく解説 Webサイト制作を始めるうえで、必須となる知識として「HTML」と「CSS」が挙げられます。それぞれわかりやすく、簡単にご説明させていただきます。 HTMLとは？ HTMLとは…

あわせて読みたい

CSSとは？何ができるの？HTMLとの違いやできることを解説！ HTMLはWebサイトの骨組みにあたるもので、文章や、見出しといった設定を行いました。ですがHTMLだけだと、ただ文章だけが表示され、サイトを閲覧される方にとってみれば…

さいごに

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

フリーランスWEBデザイナーはコーディングスキルはあったほうがよいのか？について記載させていただきました。

デザインカンプを作成される方は、コーディングスキルがないといけない！といったことはないですが、あれば手間を省ける可能性もありますし、コーダーへの引継ぎもスムーズになります。

もしコーディングが難しくて中々勉強が進まない・・・という方がいらっしゃいましたら、以下の記事で独学での勉強の進め方について解説しております。

よろしければご参考ください♪

あわせて読みたい

HTMLとCSSが難しい…　独学での勉強の進め方 HTMLとCSSの勉強で悩まれておりませんか？ HTMLはタグがたくさんあって、 どのタグを使えばいいのかわからない！ そもそもどう記載していけばいいのかわからない！ CSS…

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

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

今回はHTMLやCSSのコーディングで使用するVisual Studio Code、通称VSCODEでよく使用するショートカットキーをご紹介いたします。

ショートカットキーはかなりたくさんあり、すべて覚えるのは中々ハードルが高いですが、その中でも覚えたら時短に繋がるものについて厳選しました。

たくさんあって覚えられないです・・・

筆者

いきなり全部覚えようとすると、かなり大変なので、まずはどんなものがあるか認識していただき、少しずつでいいので自然に使えるようになりましょう！

一般的な基本的なショートカットキー

筆者

これらは一般的なショートカットキーになります。

Excelなどの別ツールでも同様に使用できるショートカットのため、別枠でご紹介させていただきました。

特にCmd +s , Ctrl + s の保存についてはかなり重要です。

作業をしていて、「あ、保存してなかった」など保存を忘れてしまうお話をよく耳にします。

こまめにCmd + s , Ctrl + s で保存することで、そういったことを防ぐこともできますので、保存についてはこまめに行うことを推奨いたします。

筆者

５分置き、数行に１回など、こまめに保存することをオススメします！

Cmd + c , Ctrl + c のコピー、Cmd + v , Ctrl + v の貼り付けもかなり大事なショートカットなので、もし使用されていない場合は、ぜひ覚えていってください。

右クリックでメニューを出してコピー、貼り付けをするよりもかなり時短になります。

VSCODEでの操作で使用するショートカットキー

エディタ以外での操作

筆者

特にCmb + b,Ctrl + bのサイドバーの開閉は、画面を広く使えるようになるので、覚えておくと便利です！

エディタでの操作

筆者

これらのショートカットは使えるとかなり便利なため、出来るだけ使いながら覚えていきたいですね！
文字だけではわかりずらいものについては抜粋してご紹介いたします。

カーソルがある行ごと移動

筆者

タグの位置を入れ替えたい、といった場面で便利です。

カーソルがある行の削除

カーソルがある行の複製

筆者

同様のタグを複製したい時に便利です。

カーソルを複製（同時に複数個所を編集できる）

筆者

同じ記載を複数個所に入れる場合に便利です。

単語を選択、複数回追加することで、同一の単語を一気に選択する

筆者

同じ記載の場所を同時に編集したい場合に便利です。

同一の単語を同時に選択

筆者

Ctrl（Cmd） + D でも同様のことが可能ですが、こちらのショートカットでは一気に行うことが可能です。

コードの自動整形

筆者

インデント（左側のスペース）が自動的にそろってくれます。インデントがずれていると、どこからどこまでがタグで囲まれているのか、とても分かりずらいため、ずれている場合はこのように成型するのが重要です。

矩形（くけい）選択　※ボックス選択

マウスで選択した場合

矢印キーで選択した場合

筆者

箱型で選択できるため、ボックス選択とも呼ばれます。
このように選択することで一部のテキストだけを削除したり、あるいは変更といったことが簡単にできるようになります。

さいごに

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

ショートカットキーは知っているだけで、作業時間の短縮に繋がりますので覚えていきたいですね！

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

こんにちは。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タグの場合はこのような方法もあるということを知っておくだけで、コーディングを行う上での引き出しが増えると思います！

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

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

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

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

筆者

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

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

筆者

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

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

筆者

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

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

筆者

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

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

筆者

７つ記載しましたが、頻繁に使用するのは、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タグを繰り返し記載していくことが多いので、実際にコーディングをしながら慣れていきたいですね！

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

リセットCSSがどのようなものかご存じでしょうか？

CSSにはデフォルトの値というものがあり、ブラウザ（chromeやsafari、edgeなど）で見え方が異なります。

リセットCSSを使用することにより、CSSのデフォルトの値を初期化することができます。

デフォルトの値があって何が悪いの？と疑問に思われる方もいらっしゃるかと思いますので、今回はリセットCSSについて解説いたします。

リセットCSSを使用する理由について

リセットCSSを使用しないことにより、想定しないスタイルが適用されるケースがあります。

<h1>h1タグです</h1>
<h2>h2タグです</h2>
<h3>h3タグです</h3>
<h4>h4タグです</h4>
<h5>h5タグです</h5>
<h6>h6タグです</h6>
<p>pタグです</p>
<a href="#">aタグです</a>
<ul>
  <li>ul-liタグです</li>
  <li>ul-liタグです</li>
  <li>ul-liタグです</li>
</ul>
<ol>
  <li>ol-liタグです</li>
  <li>ol-liタグです</li>
  <li>ol-liタグです</li>
</ol>

こちらはCSSを指定していない状態ですが、各タグで文字の大きさや、文字の下に余白が作成されております。

リストに関しては先頭に・がついていたり、番号がついていたりといった状態です。

リセットCSSを適用した場合の違い

リセットCSSを適用することによって、デフォルトのスタイルが初期化されるため、以下のような状態になります。

フォントサイズが統一され、余白も削除されております。

また、リストに関しては先頭の「・」や番号も消えております。

このように初期化をして、０からCSSを適用することで、想定外の動作や表示を防ぐことが可能です。

リセットCSSの適用方法

リセットCSSの適用

リセットCSSにはさまざまな種類がありますが、「これを使用しないといけない」といった決まりもありません。

私の場合は、destyle.cssを使用しております。

destyle.cssはダウンロード版とCDN版があり、容量も軽く使いやすいです。

destyle.cssの公式サイトはこちらから

CDN（Contents Delivery Network）とは、簡単に説明すると、インターネット上に保管されているファイルを読み込むことを指します。

適用方法はstyle.cssの記載方法と同じで、headタグの中にlinkタグで指定します。

<!-- ファイルをダウンロードして使用する場合 -->
<link rel="stylesheet" href="destyle.css">

<!-- CDNを使用する場合 -->
<link rel="stylesheet" href="https://unpkg.com/browse/destyle.css@4.0.0/destyle.min.css">

もしCSSの適用方法がわからないといった方は、下記記事にて解説しておりますので、ご参考にしていただければ幸いです。

あわせて読みたい

CSSはどうやって適用させる？基本的な適用方法について解説！ CSSを学習する際に、どうやってCSSを記載するんだろうと悩まれている方もいらっしゃるかと思います。そんな方に向けて、作成したHTMLファイルに対して、どのようにCSSを…

destyle.cssの特徴

Destyle.css 公式サイトより一部抜粋して引用しております。

適用する際の注意点

<!-- 良い例 -->  
<link rel="stylesheet" href="destyle.css">   <!-- 先に読み込む -->
<link rel="stylesheet" href="style.css">

実際に適用する場合は、こちらのように初期化用のCSSファイルを読み込んだ後に、style.cssを読み込みます。

<!-- 悪い例 -->
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="destyle.css">  <!-- この記載で初期化してしまう -->

これがもし上記のように逆転していた場合、style.cssに記載している内容が初期化され、うまく反映しなくなります。

これは上に記載しているものから順番に読み込まれるのが起因しています。

CSSに限った話ではないのですが、このように記載の順番によって想定している動作にならない場合があります。

もしCSSがぜんぜん反映しないな、といった場合は上記の可能性もありますので確認するようにしましょう。

さいごに

リセットCSSを使用することによって、想定外の表示を防ぐことができるため、Web制作の際には必ず使用します。

リセットCSSと検索すると、色々な種類のリセットCSSが表示されますが、その中でもdestyle.cssは使いやすくおすすめです。

Web制作を行われている方で、もしリセットCSSを使用されていない場合は、ぜひ使用してみてください！