CodingHaku｜プログラミング学習・開発Tips・技術情報

HTML、CSS、Javascript、PHPなどサイト制作についてのお役立ち記事を配信していきます。

検索付きのナビゲーションバーを作成する方法

css コピペでOK ブログ

この記事では、CSSを使用して美しい検索バーを作成する方法を解説します。サンプルコードを参考にして、あなたのウェブサイトにおしゃれな検索バーを実装しましょう。

基本的なのHTML構造

まず、基本的なHTMLを作成します。

<div class="topnav">
  <a class="active" href="#home">HOME</a>
  <a href="#about">ABOUT</a>
  <a href="#contact">CONTACT</a>
  <input type="text" placeholder="検索">
</div>

CSSデザイン

以下のサンプルコードを参考してください。

/* トップナビゲーションバーに黒い背景色を追加 */
.topnav {
    overflow: hidden;
    background-color: #e9e9e9;
}

/* ナビゲーションバーのリンクスタイルを設定 */
.topnav a {
    float: left;
    display: block;
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

/* ホバー時にリンクの色を変更 */
.topnav a:hover {
    background-color: #ddd;
    color: black;
}

/* 現在選択されている要素を強調表示 */
.topnav a.active {
    background-color: #2196F3;
    color: white;
}

/* ナビゲーションバーの検索ボックススタイルを設定 */
.topnav input[type=text] {
    float: right;
    padding: 6px;
    border: none;
    margin-top: 8px;
    margin-right: 16px;
    font-size: 17px;
}

/* 画面幅が 600px 未満の場合、メニューオプションと検索ボックスを垂直にスタック表示 */
@media screen and (max-width: 600px) {
    .topnav a, .topnav input[type=text] {
        float: none;
        display: block;
        text-align: left;
        width: 100%;
        margin: 0;
        padding: 14px;
    }
    .topnav input[type=text] {
        border: 1px solid #ccc;
    }
}

JavaScriptを使ってリストを簡単にフィルタリングする方法

JavaScript コピペでOK テクニック集 フォーム ブログ

この記事では、JavaScriptを使用してリストをリアルタイムでフィルタリングする方法を解説します。これにより、ユーザーがリスト内のアイテムを瞬時に検索・絞り込むことができます。サンプルコードも用意していますので、あなたのウェブサイトに簡単に実装することができます。

基本的なHTMLテーブルの構造

まず、フィルタリング機能を実装するための基本的なHTMLリストを作成しましょう。

以下は、シンプルなリストの構造例です。

<ul id="myList">
  <li>アイテム1</li>
  <li>アイテム2</li>
  <li>アイテム3</li>
  <!-- 以下、さらにリストアイテムを追加 -->
</ul>

検索ボックスの追加

次に、リストアイテムを検索するための検索ボックスを作成します。

<input type="text" id="searchInput" placeholder="キーワードで検索">

JavaScriptコードでフィルタリング機能を実装

最後に、JavaScriptコードを使って、検索ボックスで入力されたキーワードに基づいてリストアイテムをフィルタリングする機能を実装します。

表の内容、tableとinputのIDは自由に変更してください。

document.getElementById('searchInput').addEventListener('keyup', function() {
  let searchValue = this.value.toLowerCase();
  let listItems = document.getElementById('myList').getElementsByTagName('li');
  
  for (let i = 0; i < listItems.length; i++) {
    let itemText = listItems[i].textContent.toLowerCase();
    if (itemText.indexOf(searchValue) > -1) {
      listItems[i].style.display = '';
    } else {
      listItems[i].style.display = 'none';
    }
  }
});

このJavaScriptコードでは、検索ボックスでキーワードが入力されるたびに、keyupイベントが発火し、リストアイテムをフィルタリングする関数が実行されます。関数内では、入力されたキーワードを小文字に変換し、リストの各アイテムをループ処理しています。アイテムのテキストがキーワードを含んでいれば、そのアイテムを表示し、含んでいなければ非表示にしています。

JavaScriptを使ってテーブルを簡単にフィルタリングする方法

JavaScript コピペでOK テクニック集 フォーム ブログ

JavaScriptを使用してHTMLテーブルをリアルタイムでフィルタリングする方法を解説します。これにより、ユーザーがテーブル内のデータを瞬時に検索・絞り込むことができます。サンプルコードも用意していますので、あなたのサイトに簡単に実装することができます。

名前 年齢 国籍
キム 22 韓国
田中 25 日本
Smith 30 アメリカ
グェン 19 ベトナム

基本的なHTMLテーブルの構造

まず、フィルタリング機能を実装するための基本的なHTMLテーブルを作成しましょう。

以下は、シンプルなテーブルの構造例です。

<table id="myTable">
  <tr>
    <th>名前</th>
    <th>年齢</th>
    <th>国籍</th>
  </tr>
  <tr>
    <td>田中</td>
    <td>25</td>
    <td>日本</td>
  </tr>
  <tr>
    <td>Smith</td>
    <td>30</td>
    <td>アメリカ</td>
  </tr>
  <!-- 以下、さらに行を追加 -->
</table>

検索ボックスの追加

次に、テーブルデータを検索するための検索ボックスを作成します。

<input type="text" id="searchInput" placeholder="キーワードで検索">

JavaScriptコードでフィルタリング機能を実装

最後に、JavaScriptコードを使って、検索ボックスで入力されたキーワードに基づいてテーブルデータをフィルタリングする機能を実装します。

表の内容、tableとinputのIDは自由に変更してください。

document.getElementById('searchInput').addEventListener('keyup', function() {
  let searchValue = this.value.toLowerCase();
  let tableRows = document.getElementById('myTable').getElementsByTagName('tr');
  
  for (let i = 1; i < tableRows.length; i++) {
    let rowText = tableRows[i].textContent.toLowerCase();
    if (rowText.indexOf(searchValue) > -1) {
      tableRows[i].style.display = '';
    } else {
      tableRows[i].style.display = 'none';
    }
  }
});

このJavaScriptコードは、検索ボックスでキーワードが入力されるたびに、keyupイベントが発火し、テーブルデータをフィルタリングする関数が実行されます。関数内では、入力されたキーワードを小文字に変換し、テーブルの各行をループ処理しています。行のテキストがキーワードを含んでいれば、その行を表示し、含んでいなければ非表示にしています。

ドロップダウンメニューのサンプルコード

css コピペでOK ブログ メニュー

ドロップダウンメニュー ①

ドロップダウンメニューの例

<ul class="dropdown">
    <li>ホームページ</li>
    <li>
      <div>チュートリアル</div>
      <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>
          <div>JavaScript</div>
          <ul>
            <li>基本</li>
            <li>上級</li>
          </ul>
        </li>
      </ul>
    </li>
    <li>お問合わせ</li>
    <li>その他</li>
  </ul>
  ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
  }

  .dropdown {
    display: flex;
    border: 1px solid rgba(0, 0, 0, 0.3);
  }

  .dropdown li {
    padding: 8px;
    position: relative;
  }

  .dropdown ul {
    width: 200px;
    border: 1px solid rgba(0, 0, 0, 0.3);
    position: absolute;
    left: 0;
    top: 100%;
    display: none; /*デフォルトで非表示*/
  }

  .dropdown ul ul {
    position: absolute;
    left: 100%;
    top: 0;
  }
  /* マウスオーバーで背景色を表示 */
  .dropdown li:hover {
    background-color: rgba(0, 0, 0, 0.1);
  }

  .dropdown li:hover > ul {
    display: block;

ドロップダウンメニュー ②

ドロップダウンメニューの例

<div class="container">
  <div class="item">メニュー1</div>
  <div class="item">メニュー2</div>
  <div class="item">
    メニュー3
    <div class="item-content">コンテンツ</div>
  </div>
  <div class="item">メニュー4</div>
</div>
.container {
  height: 50px;
  position: relative; 
  display: flex;
  background-color: skyblue;
}
.container .item {
  padding: 0px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.item-content {
  width: 100%;
  min-height: 100px;
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-top-width: 0;
  background: pink;
  margin-top: -1px;
  position: absolute; 
  left: 0px;
  top: 100%;
  box-sizing: border-box;
  z-index: 9999;
  display: none;
}
.item:hover {
  background-color: pink;
}

.item:hover .item-content {
  display: block;
}

JavaScriptを使ってクリックで特定の文章をコピーする方法

JavaScript クリックする テクニック集 ブログ

この記事では、JavaScriptを使用して特定の文章をクリックでコピーする方法を学びます。これにより、ユーザーエクスペリエンスを向上させ、情報の共有を容易にします。以下の手順に従って、簡単に実装できます。

クリックでコピーできる文章です。

次の入力ボックスに貼り付けてみてください。

必要なHTML構造の作成

まず、クリックしてコピーしたい文章を含むHTML要素を作成します。その要素には、data-copy属性を追加して、コピー可能であることを示します。

<p data-copy>クリックでコピーできる文章です。</p>

また、Font Awesomeのアイコンを使用して、コピー可能な要素であることを視覚的に示すこともできます。

<p data-copy>クリックでコピーできる文章です。 <i class="fas fa-copy"></i></p>

JavaScriptコードの実装

次に、JavaScriptコードを作成し、data-copy属性がある要素をクリックすると、その要素のテキストがコピーされるようにします。以下のコードを使用して、クリックイベントリスナーを追加し、コピー処理を実行できます。

document.querySelectorAll('[data-copy]').forEach(function(element) {
  element.addEventListener('click', function() {
    const textToCopy = this.textContent;
    const textarea = document.createElement('textarea');
    textarea.value = textToCopy;
    document.body.appendChild(textarea);
    textarea.select();
    document.execCommand('copy');
    document.body.removeChild(textarea);
  });
});

コピー成功時のフィードバック

最後に、コピーが成功したことをユーザーに知らせるために、短いフィードバックメッセージを表示する機能を追加します。この例では、コピー成功時に「コピーしました」というメッセージを一時的に表示します。

document.querySelectorAll('[data-copy]').forEach(function(element) {
  element.addEventListener('click', function() {
    const textToCopy = this.textContent;
    const textarea = document.createElement('textarea');
    textarea.value = textToCopy;
    document.body.appendChild(textarea);
    textarea.select();
    document.execCommand('copy');
    document.body.removeChild(textarea);

    const feedback = document.createElement('span');
    feedback.innerText = 'コピーしました';
    feedback.style.position = 'absolute';
    feedback.style.backgroundColor = '#333';
    feedback.style.color = '#fff';
    feedback.style.padding = '5px';
    feedback.style.borderRadius = '5px';
    feedback.style.opacity = '0';
    feedback.style.transition = 'opacity 0.5s';
    this.appendChild(feedback);
    
    setTimeout(function() {
      feedback.style.opacity = '1';
    }, 100);

    setTimeout(function() {
      feedback.style.opacity = '0';
      setTimeout(function() {
        feedback.remove();
      }, 500);
    }, 2000);
  });
});

これで、クリックで特定の文章をコピーする機能が実装できました。この機能は、ユーザーにとって便利であるだけでなく、ウェブサイトのエンゲージメントを向上させることが期待できます。

ボタンを利用する場合

もしボタンでコピーしたいなら、下のサンプルコードを参考してください。（CSSスタイルなしで、最もシンプルのデザインです。）

<input type="text" value="コピーしたい内容" id="myInput">
<button onclick="myFunction()">コピー</button>
<p>次の入力ボックスに貼り付けてみてください</p>
<textarea></textarea>
<script>
function myFunction() {
  /* テキスト内容を取得 */
  var copyText = document.getElementById("myInput");
/* コピーする内容を選択 /
copyText.select();
copyText.setSelectionRange(0, 99999); / *テキスト要素の全ての内容を選択範囲に含めること */

/* テキスト領域にコピーした内容を貼り付け */
navigator.clipboard.writeText(copyText.value);

/* コピーされた内容をポップアップで表示 */
alert("コピーされたテキスト: " + copyText.value);
}
</script>

ボタンをクリックすると、入力ボックス内のテキストがコピーされます。その後、テキスト（ctrl+v）を貼り付けて効果を確認してください。

次の入力ボックスに貼り付けてみてください。

まとめ

この記事では、JavaScriptを使用してクリックで特定の文章をコピーする方法を学びました。手順は以下の通りです。

  1. HTML要素にdata-copy属性を追加し、コピー可能な要素を作成します。
  2. JavaScriptコードを実装して、data-copy属性がある要素をクリックすると、その要素のテキストがコピーされるようにします。
  3. コピー成功時にフィードバックメッセージを表示する機能を追加します。

この方法を使用して、ウェブサイトのユーザーエクスペリエンスを向上させ、情報共有を容易にできます。応用範囲は広く、さまざまなウェブサイトやアプリケーションで活用できます。

検索フォームを作成しましょう

css カスタマイズ フォーム ブログ

CSSとFont Awesomeを使って、検索フォームを作成する方法について説明します。

以下の手順に従って、独自の検索フォームを作成しましょう。

Font Awesomeの導入

Font Awesomeを使用するには、まずFont AwesomeのCDNリンクをHTMLファイルの<head>内に追加します。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>検索フォーム</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.0/css/all.min.css">
</head>
<body>
  <!-- 検索フォームのコードはここに入ります -->
</body>
</html>

検索フォームのHTMLコードを作成

次に、検索フォームのHTMLコードを作成します。以下のコードを<body>内に追加してください。

<form class="example">
  <input type="text" placeholder="搜索.." name="search">
  <button type="submit"><i class="fa fa-search"></i></button>
</form>

このコードでは、検索フォームと検索ボタンが含まれています。検索ボタンにはFont Awesomeの検索アイコンが表示されます。

検索フォームのスタイルを追加

最後に、検索フォームのスタイルを追加します。以下のCSSコードを<style>タグを使って<head>内に追加してください。

* {
  box-sizing: border-box;
}
 
form.example input[type=text] {
  padding: 10px;
  font-size: 17px;
  border: 1px solid grey;
  float: left;
  width: 80%;
  background: #f1f1f1;
}
 
form.example button {
  float: left;
  width: 20%;
  padding: 10px;
  background: #2196F3;
  color: white;
  font-size: 17px;
  border: 1px solid grey;
  border-left: none;
  cursor: pointer;
}
 
form.example button:hover {
  background: #0b7dda;
}

form.example::after {
  content: "";
  clear: both;
  display: table;
}

これで、検索フォームが完成しました。

完成：

幅を設定するmax-width：


もう一つの検索フォームのスタイル

<style>
.search {
  width: 100%;
  position: relative;
  display: flex;
}

.searchTerm {
  width: 100%;
  border: 3px solid #00B4CC;
  border-right: none;
  padding: 5px;
  height: 20px;
  border-radius: 5px 0 0 5px;
  outline: none;
  color: #9DBFAF;
}

.searchTerm:focus{
  color: #00B4CC;
}

.searchButton {
  width: 40px;
  height: 36px;
  border: 1px solid #00B4CC;
  background: #00B4CC;
  text-align: center;
  color: #fff;
  border-radius: 0 5px 5px 0;
  cursor: pointer;
  font-size: 20px;
}

.wrap{
  width: 30%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>

<div class="wrap">
   <div class="search">
      <input type="text" class="searchTerm" placeholder="你想找什么?">
      <button type="submit" class="searchButton">
        <i class="fa fa-search"></i>
     </button>
   </div>
</div>

Font Awesomeのアイコンを使って、見た目が美しくて使いやすい検索フォームを作成することができました。必要に応じて、スタイルをカスタマイズして、独自のデザインに仕上げましょう。

Font Awesome アイコン 完全版

css カスタマイズ ブログ ボタン

Font Awesomeは、多くのWebサイトで使用されている人気のあるアイコンセットとCSSツールキットです。簡単にベクターアイコンを埋め込んで、サイズ、色、ドロップシャドウなどをCSSでカスタマイズできます。

Font Awesome の導入

Font Awesomeをプロジェクトに導入する方法は、CDNを使用するか、ファイルをダウンロードしてローカルに配置するかの2つがあります。

CDNを使用する方法

<head>タグの中に以下のリンクタグを追加して、Font AwesomeをCDNから読み込みます。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.0/css/all.min.css" integrity="sha384-KyZXEAg3QhqLMpG8r+Knujsl7/1B1ZsAd3JkD3IMoET19xrsKCRXWyvt7V/u6yp5" crossorigin="anonymous">

ダウンロードする方法（おすすめしない）

Font Awesomeの公式サイトからファイルをダウンロードし、プロジェクトフォルダに配置します。そして、以下のリンクタグを<head>タグの中に追加します。

<link rel="stylesheet" href="path/to/font-awesome/css/all.min.css">

アイコンの使用方法

Font Awesomeのアイコンを使用するには、<i>タグまたは<span>タグを使用し、適切なクラス名を指定します。

以下は、いくつかの例です。

<i class="fas fa-camera"></i>
<i class="fas fa-envelope"></i>
<i class="fas fa-heart"></i>

アイコンのカスタマイズ

CSSを使ってアイコンのサイズ、色、回転、ドロップシャドウなどをカスタマイズできます。

サイズの変更

i {
  font-size: 24px;
}

色の変更

i {
  color: red;
}

回転

i {
  transform: rotate(45deg);
}

ドロップシャドウの追加

i {
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
}

Font Awesomeを使用することで、ウェブサイトのデザインに簡単に美しいアイコンを追加できます。公式ドキュメントで利用可能なアイコンやクラスを調べて、プロジェクトに応じてカスタマイズしてください。

スタックされたアイコン

Font Awesomeでは、アイコンを重ね合わせてカスタムデザインを作成することができます。この方法は、アイコンの組み合わせが無限大で、独自のデザインが可能です。

スタックされたアイコンを作成するには、<span>タグにfa-stackクラスを使用し、重ねるアイコンにfa-stack-1xやfa-stack-2xのクラスを使用します。

<span class="fa-stack fa-lg">
  <i class="fas fa-circle fa-stack-2x"></i>
  <i class="fas fa-flag fa-stack-1x fa-inverse"></i>
</span>

アイコンのアニメーション

アイコンにアニメーションを適用することもできます。

アイコンを回転させるfa-spinや、ゆっくり回転させるfa-pulseなどのクラスを使うことで、動的なデザインが可能です。

<i class="fas fa-spinner fa-spin"></i>
<i class="fas fa-circle-notch fa-spin"></i>
<i class="fas fa-sync fa-spin"></i>
<i class="fas fa-cog fa-spin"></i>

アイコンのサイズ変更

Font Awesomeアイコンは、ベクターグラフィックスであるため、簡単にサイズを変更できます。

fa-xs, fa-sm, fa-lg, fa-2x, fa-3x, fa-4x, fa-5x, fa-10x などのクラスを使って、アイコンのサイズを調整できます。

<i class="fas fa-star fa-xs"></i>
<i class="fas fa-star fa-sm"></i>
<i class="fas fa-star fa-lg"></i>
<i class="fas fa-star fa-2x"></i>
<i class="fas fa-star fa-3x"></i>

アイコンの色や透明度の変更

アイコンの色や透明度を変更することで、デザインのバリエーションが増えます。

CSSでアイコンの color や opacity プロパティを変更することで実現できます。

i.red {
  color: red;
}
i.semi-transparent {
  opacity: 0.5;
}
<i class="fas fa-star red"></i>
<i class="fas fa-star semi-transparent"></i>

アイコンのテキストとの組み合わせ

Font Awesomeアイコンは、テキストと組み合わせることができ、情報の伝達やデザインの向上に役立ちます。

例えば、ボタンの中にアイコンを配置したり、リンクテキストとアイコンを一緒に使うことができます。

<button class="btn">
  <i class="fas fa-download"></i> Download
</button>
<a href="#">
  <i class="fas fa-chevron-right"></i> Read More
</a>


Read More