JavaScript – Webサイト制作に関するノウハウブログ｜IWACODE https://iwacode-web.com 初心者でもわかりやすいようにWeb制作に関するノウハウを発信していきます。コーディングだけではなく、デザイン、WordPressに関する情報、フリーランスとしてのマインド、活動についても発信していきます。 Thu, 16 Oct 2025 04:31:34 +0000 ja hourly 1 https://wordpress.org/?v=7.0.2 https://iwacode-web.com/wp-content/uploads/2023/12/cropped-site-icon-32x32.png JavaScript – 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の処理で実装可能なため、仕様を理解しぜひ組み込んでいってください！

]]> 【Web制作】クリックしたら特定の場所まで移動（スクロール）させる方法 https://iwacode-web.com/hp-page-scroll/ https://iwacode-web.com/hp-page-scroll/#respond Sun, 24 Dec 2023 12:26:19 +0000 https://iwacode-web.com/?p=387

ホームページが縦長の場合、閲覧したい場所に一気にスクロールできるようなボタンなどがあると、ページに訪れた方が閲覧する際にとても便利です。 今回はページ内で特定の場所まで移動（スクロール）できる機能の実装方法について解説い […]]]>

ホームページが縦長の場合、閲覧したい場所に一気にスクロールできるようなボタンなどがあると、ページに訪れた方が閲覧する際にとても便利です。

今回はページ内で特定の場所まで移動（スクロール）できる機能の実装方法について解説いたします。

あわせて読みたい
【CSS】スクロールでヘッダーが重なる問題を解決！scroll-padding-topで快適なページ移動を実現しよう！ Webサイトを作っていると、固定されたヘッダー（ナビゲーションバーなど）がページをスクロールした時にセクションのタイトルに被ってしまう…なんて経験、ありませんか…

HTMLとCSSで実装する方法

  • スクロールさせて表示したいHTMLタグにidを付ける
  • aタグのhref属性にidを記載（先頭に#を付ける）

CSSではクリックした際にスムーズにスクロールされるようプロパティを指定しております。

scroll-behavior: smooth;

html要素に対して指定しているため、ページ全体に適用されております。

JavaScriptで実装する方法

一例ですが、このような方法でスクロールさせることも可能です。※aタグは未使用

ただ、HTMLとCSSのみで記載したほうがわかりやすく、実際にはHTMLとCSSで実装される場合が多いです。

HTMLとCSSで実装しない場合はどのようなとき？

注意点として、スクロール先の要素のdisplayプロパティがnoneだった場合、クリックしてもスクロールされません。

display: none;

display: none は要素自体がないものとして扱われるため、認識されません。

HTMLが記述されていないようなイメージです。

aタグでの指定は、idを持つ要素に対してスクロールが発生するため、スルーされてしまいます。

visibility: hidden;

こちらの指定ではHTML要素はあるけれども、非表示としている状態のため、認識されます。

そのため、スクロール先をあらかじめ非表示にしておく必要がある場合は、visibility: hidden を使用すると、aタグでの指定で動作します。

どうしてもWebサイトの仕様上、display: none; を使用しなければならない場合は、JavaScriptで制御しましょう。

さいごに

ページ内でのスクロール方法について解説させていただきました。

ランディングページ（LP）では、サイトが縦長になりやすく、ページ内スクロールが使用されていることが多いです。

サイト設計を行う上で、縦長になる場合はスクロール機能を追加するなど、ユーザ側にとって閲覧しやすいように作りこんでいきたいですね！

あわせて読みたい
【CSS】スクロールでヘッダーが重なる問題を解決！scroll-padding-topで快適なページ移動を実現しよう！ Webサイトを作っていると、固定されたヘッダー（ナビゲーションバーなど）がページをスクロールした時にセクションのタイトルに被ってしまう…なんて経験、ありませんか…
]]> https://iwacode-web.com/hp-page-scroll/feed/ 0 【WEBデザイナー】Web制作でJavaScriptはどこまで勉強したほうがいいのか？ https://iwacode-web.com/web-javascript-start/ https://iwacode-web.com/web-javascript-start/#respond Fri, 15 Dec 2023 22:48:05 +0000 https://iwacode-web.com/?p=257

Web制作の学習を進めていくと、「JavaScript」という文言が出てきます。 HTMLやCSSと違ってJavaScriptはプログラミング言語であり、学習難易度も比較すると高くなります。 本記事ではJavaScrip […]]]>

Web制作の学習を進めていくと、「JavaScript」という文言が出てきます。

HTMLやCSSと違ってJavaScriptはプログラミング言語であり、学習難易度も比較すると高くなります。

本記事ではJavaScriptはどこまで勉強する必要があるかについて考えてみました。

本記事を通して以下のお悩みが解決できるかと思います！

  • JavaScriptがどういうもので、HTMLとCSSとはどのように違うのかが理解できる
  • JavaScriptはどこまで勉強したほうが良いのかが把握できる。

皆様のお悩みが解決できますと幸いです。

JavaScriptとは

まず、JavaScriptとはいったい何なのか、簡単にご説明させていただきます。

JavaScriptとはプログラミング言語の一種で、フロントエンド側の動作を制御します。

フロントエンドというのは、ユーザから見える部分のことを指します。

HTMLではページの骨組みにあたる部分を、CSSでは色や配置など、装飾に当たる部分を指定します。

JavaScriptでは、クリックしたらメッセージを表示したり、色を変えたり、Webサイトに動的な要素を取り入れる役割があります。

プログラミング言語に「Java」というものがありますが、それとは全く別物で、「Java」は主にアプリケーション開発に用いられる言語で、「JavaScript」とは全く用途がことなります。

名前が似ているので混同しやすいですが、別物ということをご認識ください！

どこまで勉強すればよいのか？

一般的なWeb制作では、複雑な処理を書く必要もなく、そこまで難易度の高いことを考える必要はありません。

そのため、毎回制作で使用する範囲が決まってくるので、よく使用する処理についてご紹介させていただきます。

特定の要素（HTMLタグ）を取得

DOM操作とも呼ばれますが、特定の要素（HTMLタグ）を取得することによって、あとからclassを付与したり、消したりすることが可能です。

DOMとは「Document Object Model」の略で、この段階では「HTMLとJavaScriptをつなぐために必要なもの」と認識いただければよいかと思います。

DOM操作は頻繁に使用しますので、押さえておきたい構文になります。

要素（HTMLタグ）の操作

取得した要素（HTMLタグ）に対して、classを付与したり、要素（タグ）そのものを削除したりといったことが可能です。

HTMLとCSSで制作されたサイトではできない、JavaScriptならではの処理になりますね。

後述するイベント処理と組み合わせて使用するケースがほとんどです。

イベント処理

特定の要素が○○をしたら○○をするといったように、動的な処理を付与することができます。

例えば、ハンバーガーメニューのボタンをクリックしたら、サブメニューを表示するなど、ユーザ側の操作によって要素が動作するということもでき、いわゆる「動的サイト」を制作することが可能です。

要素の取得、イベント処理、要素の操作をセットで使用することが多いです。

スクロールしたら要素がフワッと表示されるような処理も、イベント処理によって制御されています。

本では勉強しない？

HTMLとCSSをある程度勉強できたから、こう考える方もいらっしゃるかと思います。

  • 次はJavaScriptだ！
  • よし、本を買って勉強しよう！！
  • やたらと分厚いけど、とりあえず大事そうだから１周してみよう！

ちょっと待ってほしいです！

Web制作で使用する部分はほんの一握りで合って、仮に勉強したとしても使用しない可能性が高いです。

Web制作を主とするのであれば、そこまでする必要はないと考えております。

私もJavaScriptに関しては極めているわけでもなく、わからない部分は調べるといったやり方で、特に問題も発生しておりません。

ですが、「わからない部分は調べる」といったことは、基礎的な知識がないと、

  • わからないけどどうやって調べていいのかわからない
  • わからないことがわからない

といったことになりかねません。

ではどこまで（何を）勉強すればよいのか？

Web制作を進めるにあたり、以下のことについて理解できるよう勉強を進めるのがよいと考えております。

  • 変数
  • 変数を使用した計算や文字の結合
  • IF文
  • 配列
  • 繰り返し処理
  • DOM操作
  • イベント処理
  • 非同期処理

上記のことについては、本サイト内でも今後解説させていただく予定です！

完璧でなくても、どういったものなのか、ということが理解できていれば、わからない場合でも調べやすくなると思います。

JavaScriptには「jQuery」（ジェイクエリー）というライブラリというものが用意されております。

これを利用することにより、JavaScriptを簡単に記載することができるようになります。

基本的な概念が勉強できた後は「jQuery」にも触れてみるのが良いかと思います。

さいごに

HTMLやCSSとは違って、JavaScriptはプログラミング言語であるため、若干抵抗がある方もいらっしゃるかと思われます。

ですが、JavaScriptが使用できると、よりリッチな動きのあるWebサイトが制作できるようになります。

ユーザからもう少しおしゃれにしたい、スクロールしたらふわっと表示させてほしいなど、ご要望をいただくことは多々あります。

そんなときに、JavaScriptが使用できると実装するのが用意になるため、案件もスムーズに進めると思います。

より柔軟な対応ができるよう、頑張って身に付けていきたいですね！

]]> https://iwacode-web.com/web-javascript-start/feed/ 0