CSS – Webサイト制作に関するノウハウブログ｜IWACODE https://iwacode-web.com 初心者でもわかりやすいようにWeb制作に関するノウハウを発信していきます。コーディングだけではなく、デザイン、WordPressに関する情報、フリーランスとしてのマインド、活動についても発信していきます。 Thu, 16 Oct 2025 04:32:04 +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 CSS – Webサイト制作に関するノウハウブログ｜IWACODE https://iwacode-web.com 32 32 【CSS】【filter】画像にエフェクトをかける方法 – ホバーした際に写真を白黒からカラーに https://iwacode-web.com/css-filter-image-effects-hover/ Tue, 01 Oct 2024 07:11:17 +0000 https://iwacode-web.com/?p=1082

CSSのfilterプロパティとは？ CSSの中には、画像にエフェクトを簡単にかけられる「filter」プロパティがあります。 filterを使えば、画像を白黒にしたり、ぼかしを入れたり、明るさやコントラストを調整したり […]]]>

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プロパティを使えば、シンプルに見えるけど、プロっぽいエフェクトを画像に加えることができます！

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

]]> 【CSS】【アスペクト比】aspect-ratioプロパティで要素の縦横比を簡単に設定する方法 https://iwacode-web.com/css-aspect-ratio-tutorial/ Tue, 17 Sep 2024 13:14:53 +0000 https://iwacode-web.com/?p=1072

はじめに WEBデザインにおいて、要素の縦横比を調整するのはよくある課題です。特に、画像や動画、カードレイアウトなど、特定のアスペクト比を維持したい場合、従来の方法ではpaddingを利用したトリックやJavaScrip […]]]>

はじめに

WEBデザインにおいて、要素の縦横比を調整するのはよくある課題です。特に、画像や動画、カードレイアウトなど、特定のアスペクト比を維持したい場合、従来の方法ではpaddingを利用したトリックやJavaScriptによる調整が必要でした。しかし、CSSのaspect-ratioプロパティを使えば、これが非常に簡単になります！

この記事では、aspect-ratioプロパティの使い方や注意点について詳しく解説していきます。

概要

aspect-ratioプロパティは、要素の縦横の比率を簡単に指定できるCSSのプロパティです。これを使うと、幅に合わせて高さを自動で計算してくれるので、面倒な調整が不要になります。値の指定は「横:縦」の形式で行います。例えば、aspect-ratio: 16 / 9;と書けば、その要素は常に16:9の比率を保つようになります。

それでは、このプロパティを使ったシンプルな例を見てみましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>aspect-ratioの例</title>
    <style>
        .aspect-box {
            width: 100%;
            max-width: 500px;
            aspect-ratio: 16 / 9;
            background-color: #e0e0e0;
            border: 2px solid #333;
        }
    </style>
</head>
<body>
    <div class="aspect-box"></div>
</body>
</html>

この例では、.aspect-boxクラスの要素にaspect-ratio: 16 / 9;を設定しています。この要素の幅は100%（最大500px）に設定されており、それに合わせて縦横比16:9が自動的に保たれます。画面サイズが変わっても、この比率は変わらず、見た目がきれいに維持されるのがポイントです。

注意点

aspect-ratioプロパティは、明示的に高さや幅が指定されている場合、それらのプロパティに影響を受けます。例えば、要素にすでに高さが設定されていると、aspect-ratioはCSSの記載の順番によっては無視される可能性があります。このため、aspect-ratioを使う際は、他のCSSプロパティとの組み合わせに気をつけてください。

活用例

aspect-ratioをうまく使うと、レイアウトに統一感を持たせることができます。例えば、ギャラリーの画像やカードのレイアウトに使うと、画像のサイズがバラバラでも一貫した比率で表示されるので、全体のデザインが整いやすくなります。

以下に、カードレイアウトにaspect-ratioを使った例を紹介します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>カードレイアウトの例</title>
    <style>
        .card-container {
            display: flex;
            gap: 16px;
            flex-wrap: wrap;
            max-width: 1000px;
            padding: 100px;
            width: 100%;
            margin: 0 auto;
        }
        .card {
            flex: 1 1 calc(33.333% - 16px);
            aspect-ratio: 4 / 3;
            background-color: #f5f5f5;
            border: 1px solid #ccc;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            font-size: 1.2rem;
        }
    </style>
</head>
<body>
    <div class="card-container">
        <div class="card">カード1</div>
        <div class="card">カード2</div>
        <div class="card">カード3</div>
        <div class="card">カード4</div>
        <div class="card">カード5</div>
        <div class="card">カード6</div>
    </div>
</body>
</html>

この例では、.cardクラスにaspect-ratio: 4 / 3;を設定して、カードの幅に対して4:3の比率を保っています。これにより、各カードが均等に配置され、レイアウト全体が整った印象になります。

おわりに

いかがでしたでしょうか。今回はaspect-ratioプロパティについて解説させていただきました。

aspect-ratioプロパティを使うと、これまで難しかった要素の縦横比の調整がとてもシンプルになります。
自身で計算して値を算出しなくともプロパティ側で自動的に割り当ててくれるため、非常に便利です。aspect-ratioをうまく活用して、見た目が美しいデザインを実現していきましょう！

]]> 【CSS】【三角形】clip-pathの使い方 – borderは使わずpolygon,circleで多様な形を切り取る方法と実例 https://iwacode-web.com/css-clip-path-effect/ Sun, 15 Sep 2024 04:55:43 +0000 https://iwacode-web.com/?p=1046

皆さんこんにちは！IWACODEの岩村です。 CSSのclip-pathプロパティを使うと、画像や要素をさまざまな形に切り取ることができます。borderプロパティでも三角形を作ることはできるんですが、少し手間がかかるの […]]]>

皆さんこんにちは！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は非常に便利なプロパティのため、ぜひ使いこなして実線に役立てていきましょう！

]]> 【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デザイナーに、コーディングスキルはあったほうがよいのか？について考えてみました。 コーディングとい…
]]> 【CSS】【line-height】行間を調整 – 文字の高さを指定する方法 https://iwacode-web.com/css-line-height/ Sat, 06 Apr 2024 07:52:45 +0000 https://iwacode-web.com/?p=873

Webサイトの文字の高さ、行間を調整するにはline-heightプロパティを使用します。 複雑なプロパティではないため、初心者の方もわかりやすいかと思います。 わからないといった方は本記事を読んでいただくことで、イメー […]]]>

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プロパティについて解説させていただきました。

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

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

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

]]> 【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画面に収まらない場合もあるので、そういった場合に非常に便利です。

さいごに

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

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

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

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

]]> 【CSS】要素の幅の指定方法 – 便利な関数 – min() / max()の使い方 https://iwacode-web.com/css-min-max/ Thu, 22 Feb 2024 01:54:59 +0000 https://iwacode-web.com/?p=726

こんにちは！IWACODEの岩村彰斗です。 今回はCSSで要素の幅の指定で便利な関数である、min関数とmax関数の紹介をさせていただきます！ IE（Internet Explorer：インターネットエクスプローラー）に […]]]>

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

今回はCSSで要素の幅の指定で便利な関数である、min関数とmax関数の紹介をさせていただきます！

筆者

レスポンシブ対応で複数行記載していたのが、1行の記載で済むようになるので、ぜひ覚えていってください！

IE（Internet Explorer：インターネットエクスプローラー）に非対応だったのですが、IEが2022年6月にサポートが終了したため、現在では今回ご紹介する関数がよく使用されるようになっております。

min()の記載方法

()の中に値をカンマ区切りで２つ記載します。

width: min(値 , 値);

２つ入れた値のうち、どちらか小さい方が優先されて出力されます。

以下がサンプルコードになります。

  <div class="box1">
    <strong>min関数を使用した場合</strong><br>
    -<br>
    width: min(600px, 100%);
  </div>
  <div class="box2">
    <strong>max-widthを使用した場合</strong><br>
    -<br>
    max-width: 600px;<br>
    width: 100%;
  </div>

  <style>
    .box1 {
      background-color: #ffda96;
      width: min(600px, 100%);
    }

    .box2 {
      background-color: #96bcff;
      width: 100%;
      max-width: 600px;
    }

    div {
      margin-bottom: 50px;
      padding: 50px 0;
      line-height: 2;
    }

    body {
      box-sizing: border-box;
      padding: 32px;
      text-align: center;
    }
  </style>

600pxより小さいときは、100%の値が優先されて、パソコンなど画面が大きい場合は600pxが優先されていますね！

筆者

max-widthプロパティを使用しても同様の動作となりますが、min関数を使用すると1行で済むので、コードが短くなり視認性の向上に繋がりますね。

max()の記載方法

()の中に値をカンマ区切りで２つ記載します。

width: max(値 , 値);

２つ入れた値のうち、どちらか大きい方が優先されて出力されます。

以下がサンプルコードになります。

  <div class="box1">
    <strong>max関数を使用した場合</strong><br>
    -<br>
    width: max(600px, 100%);
  </div>
  <div class="box2">
    <strong>min-widthを使用した場合</strong><br>
    -<br>
    max-width: 600px;<br>
    width: 50%;
  </div>

  <style>
    .box1 {
      background-color: #ffda96;
      width: max(600px, 100%);
    }

    .box2 {
      background-color: #96bcff;
      width: 100%;
      min-width: 600px;
    }

    div {
      margin-bottom: 50px;
      padding: 50px 0;
      line-height: 2;
    }

    body {
      box-sizing: border-box;
      padding: 32px;
      text-align: center;
    }
  </style>

大きい方が優先されるので、600pxより小さくならないですね！

筆者

min-widthを使用した場合も同様の制御が可能です。

さいごに

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

min関数、max関数を使用することでより動的に制御することが可能になります。

今回はwidthの値として使用しておりましたが、要素の幅によって制御を変化させたい場合にも、値として使用できます。

max-widthやmin-widthを使用しても同様の制御が可能ですが、より見やすくするために使いこなしていきたいですね！

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

]]>