JavaScript

 Computer >> コンピューター >  >> プログラミング >> JavaScript
  1. JavaScriptで配列の末尾から要素を削除する方法

    配列の末尾（最後）から要素を削除したい場合は、pop()メソッドを使用します。pop()は配列の最後の要素を取り除き、その要素を戻り値として返します。サンプルコードlet veggies = [Onion, Raddish]; veggies.pop(); console.log(veggies);実行結果上記のコードを実行すると、次のような出力が得られます。[Onion]このように、pop()メソッドを呼び出すだけで、配列の最後の要素「Raddish」が削除され、残りの要素だけが配列に残ります。なお、元の配列自体が変更される点に注意してください。

  2. JavaScriptで配列の先頭から要素を削除する方法【shiftメソッドの使い方】

    JavaScriptで配列の先頭の要素を削除するJavaScriptでは、shift()メソッドを使うことで、配列の先頭にある要素を簡単に削除できます。shift()メソッドは配列の最初の要素を取り除き、元の配列を直接変更（破壊的変更）します。また、shift()メソッドは削除された要素を戻り値として返すため、削除した値を後から利用したい場合にも便利です。空の配列に対して実行した場合はundefinedが返されます。サンプルコード以下は、shift()メソッドを使って配列の先頭の要素を削除する例です。let veggies = [Onion, Raddish]; veggies.shift()

  3. JavaScriptのspliceメソッドで配列の特定位置から要素を削除する方法

    配列の中から特定の位置にある要素を削除したい場面はよくあります。JavaScriptでは、spliceメソッドを使うことで、指定したインデックスから要素を簡単に取り除くことができます。 spliceメソッドの基本構文 spliceメソッドは、第1引数に削除を開始するインデックス番号、第2引数に削除する要素の個数を指定します。 配列.splice(開始インデックス, 削除する要素数); 使用例 次の例では、配列の先頭（インデックス0）から1つの要素を削除しています。 let veggies = ["Onion", "Raddish", "Br

  4. JavaScriptで2つの配列を結合する方法

    JavaScriptで2つの配列を結合する方法は、主に2つあります。元の配列を変更せずに、新しい配列として結合結果を取得したい場合は、concatメソッドを使います。以下のように記述します。 concatメソッドの例 let arr1 = [1, 2, 3, 4]; let arr2 = [5, 6, 7, 8]; let arr3 = arr1.concat(arr2); console.log(arr1); console.log(arr2); console.log(arr3); 実行結果 このコードを実行すると、次の出力が得られます。 [1, 2, 3, 4] [5, 6, 7, 8

  5. BootstrapのClearfix（クリアフィックス）クラスの使い方

    Bootstrapでは、.clearfixクラスを使用することで、要素に適用されたフロート（float）を簡単に解除できます。フロートを解除しないままにすると、親要素の高さが正しく計算されず、レイアウトが崩れる原因となります。clearfixは、こうした問題を防ぐための便利なユーティリティクラスです。使用例以下のコードを実行して、clearfixクラスの動作を確認してみてください。<!DOCTYPE html> <html>    <head>       <title>Bootstrap Exa

  6. Bootstrapのボタングループクラス（.btn-group）の使い方と実装例

    Bootstrapで複数のボタンをひとまとめのグループとして表示したい場合は、.btn-group クラスを使用します。このクラスを親要素に指定するだけで、ボタン同士が横並びに連結され、見た目が統一されたボタングループを簡単に作成できます。.btn-groupクラスとは.btn-group は、Bootstrapが提供するコンポーネントクラスの一つです。ツールバーのような操作パネルや、ページネーション、トグルボタンなど、関連するアクションを視覚的にグルーピングしたい場面で活用されます。基本的な使用例以下のコードは、.btn-group を使って3つのボタンをグループ化するシンプルな例です。実際

  7. Bootstrapで作る分割ボタン（スプリットボタン）のドロップダウン実装方法

    分割ボタンのドロップダウンは、通常のドロップダウンボタンと同じ基本スタイルをベースにしながら、主要なアクション（プライマリアクション）を組み合わせたUIコンポーネントです。ボタンの左側にはメインとなるアクションが配置され、右側のトグル部分をクリックするとドロップダウンメニューが展開される仕組みになっています。実装例以下のコードを実行すると、分割ボタンのドロップダウンを実際に確認できます。<!DOCTYPE html> <html>     <head>      &nb

  8. 【Bootstrap】ナビゲーションバーでテキストを折り返す方法（navbar-textクラスの使い方）

    Bootstrapのナビゲーションバー内でテキストを表示・折り返しするには、.navbar-textクラスを使用します。このクラスを適用すると、ナビゲーションバーのデザインに調和したスタイルでテキストが表示され、ブランド名やリンクとのバランスも自然に整います。実装例以下のコードを実行すると、Bootstrapのナビゲーションバーにテキストを設定できます。<!DOCTYPE html> <html>    <head>       <title>Bootstrap Example</title

  9. Bootstrapのnavbar-left・navbar-rightクラスでナビバー内のコンポーネントを左寄せ・右寄せする方法

    Bootstrapのナビバーでは、.navbar-left または .navbar-right ユーティリティクラスを使用することで、ナビリンク、フォーム、ボタン、テキストなどのコンポーネントを簡単に左寄せ・右寄せできます。これらのクラスを要素に追加すると、指定した方向へCSSのfloatが適用され、ナビバー内の任意の位置にコンポーネントを柔軟に配置できるようになります。主なユーティリティクラス.navbar-left:コンポーネントをナビバーの左側に配置します(float:left が適用されます).navbar-right:コンポーネントをナビバーの右側に配置します(float:right

  10. Bootstrapナビゲーションバー入門：navbar-inverseクラスで黒背景・白文字の反転デザインを作る方法

    navbar-inverseクラスとはBootstrapでは、.navbar-inverseクラスを.navbarクラスに追加するだけで、黒い背景に白い文字の反転ナビゲーションバー（逆色ナビバー）を簡単に作成できます。通常のナビゲーションバーは明るい配色になっていますが、このクラスを適用することで、ダークテーマのサイトや視認性・コントラストを高めたい場面に最適な見た目になります。追加のコードを書く必要がなく、クラスを一つ加えるだけで手軽にデザインを切り替えられるのが魅力です。実装例以下のコードを実行すると、navbar-inverseクラスを適用したナビゲーションバーの動作を実際に確認できます

  11. Bootstrapのtable-stripedクラスでテーブルに縞模様（ストライプ）を実装する方法

    Bootstrapのtable-stripedクラスとは Bootstrapには、テーブルの行に交互の縞模様（ストライプ）を自動的に付けることができる table-striped クラスが用意されています。table クラスと組み合わせて指定するだけで、奇数行と偶数行の背景色が自動的に切り替わり、大量のデータを扱う表でも視認性が大きく向上します。 以下は、Bootstrap 4で table-striped クラスを実装したサンプルコードです。 実装例（サンプルコード） <!DOCTYPE html> <html>    <head>

  12. Bootstrapで要素を非表示にする方法：hiddenクラスの使い方

    Bootstrapで要素を非表示にする方法BootstrapでHTML要素を非表示にしたい場合は、.hiddenクラスを使用します。このクラスを要素に適用すると、その要素は画面上から隠れ、表示されなくなります。使用例以下のコードを実行すると、hiddenクラスの動作を実際に確認できます。<!DOCTYPE html> <html>    <head>       <title>Bootstrap Example</title>       <link

  13. Bootstrapで角丸のない全幅ジャンボトロンを実装する方法

    Bootstrapで画面幅いっぱいに広がり、角が丸くない（角丸のない）ジャンボトロンを作成したい場合は、.jumbotronクラスをすべての.containerクラスの外側に配置し、代わりにその内側へ.containerを追加します。 仕組みの解説 通常、.jumbotronを.containerの中に配置すると、ジャンボトロンはコンテナの幅に収まり、デフォルトのスタイルとして角丸（rounded corners）が適用されます。 一方、.jumbotronをコンテナの外に直接置くと、ジャンボトロンはブラウザの全幅（full width）に拡張され、角丸も適用されなくなります。このとき、内側に

  14. 【Bootstrap】ラベル（Labels）の使い方と表示サンプルをわかりやすく解説

    ラベル（Labels）とはラベルは、記事や項目に対する件数・カウント数・ヒント・補足情報などを手軽に目立たせて表示できる、Bootstrapの便利なUIコンポーネントです。見出しの横に未読通知の数を添えたり、カテゴリ名を小さく装飾して強調したりといった場面で活躍します。基本の使い方ラベルを表示するには、<span>などのインライン要素に .label クラスを指定します。標準的な外観にしたい場合は .label-default を組み合わせるのが基本です。以下は、見出しの横にラベルで数値（チュートリアル数・クイズ数）を表示するシンプルなサンプルです。実際にブラウザで実行して、表示を

  15. Bootstrapのコンテキストクラスとは？テーブルの行・セルに色を付ける方法

    Bootstrapのコンテキストクラス（Contextual Class）を使うと、テーブルの行や個々のセルの背景色を簡単に変更できます。状態に応じた色分けを行うことで、ユーザーにとって視覚的に分かりやすい表を作成できます。 主なコンテキストクラスの一覧 用意されているクラスは以下のとおりです。 クラス名説明 .active特定の行やセルに、マウスホバー時と同じ色を適用します .success成功した操作やポジティブな結果を示します（緑系の色） .warning注意が必要な可能性がある警告を示します（黄色系の色） .danger危険な、または否定的な可能性のある操作を示します（赤系の色

  16. Bootstrapの検証状態（バリデーションステート）の使い方をわかりやすく解説

    Bootstrapには、エラー・警告・成功といった入力チェックの結果を表すためのバリデーション（検証）スタイルがあらかじめ用意されています。使い方は非常にシンプルで、フォームの親要素（.form-groupなど）に対応したクラスを追加するだけでOKです。検証状態に使える3つのクラス.has-success … 入力が正常なことを示す緑色のスタイル.has-warning … 警告を示す黄色いスタイル.has-error … エラーを示す赤色のスタイルこれらのクラスを指定すると、ラベル・枠線・テキストの色が自動的に変わり、ユーザーに対して入力状況を視覚的に伝えられます。フォームのユーザビリティ向

  17. Bootstrapフォームのセレクトボックスの使い方と実装例

    セレクト（<select>）は、ユーザーに複数の選択肢の中から選ばせたい場合に使用するフォーム要素です。デフォルトでは、1つの項目のみを選択できます。都道府県や数値など、ユーザーが馴染みのあるリスト項目には <select> を使用しましょう。multiple = multiple 属性を指定すると、ユーザーが複数の項目を同時に選択できるようになります。サンプルコード以下のコードを実行すると、Bootstrapフォームにおけるセレクトの実装を確認できます。<!DOCTYPE html> <html>    <head&g

  18. Bootstrapでフォームの高さと幅を設定する方法｜input-lgやcol-lg-*クラスの使い方

    Bootstrapでは、.input-lg や .input-sm といったサイズ用のクラスを使えば、入力フォームの高さを簡単に調整できます。また、.col-lg-* などのグリッドシステムのクラスを組み合わせることで、フォームの幅も柔軟にコントロール可能です。 フォームの高さを変更するクラス .form-control に対して以下のクラスを追加するだけで、入力欄の高さを変えられます。 .input-lg … 大きめの高さに設定 （指定なし） … 標準（デフォルト）サイズ .input-sm … 小さめの高さに設定 テキスト入力欄だけでなく、セレクトボックスにも同じクラスが使えます。 フ

  19. Bootstrapフォームでtextarea（複数行テキスト入力）を使う方法

    Bootstrapのフォームで、住所やコメントなど複数行にわたるテキストを入力させたい場合には、<textarea>要素を使用します。単一行の<input type=text>とは異なり、ユーザーが自由に改行しながら長い文章を入力できるのが特徴です。textareaの基本的な使い方Bootstrapでtextareaを使う場合は、form-controlクラスを指定することで、他のフォーム部品と統一感のあるスタイルが自動的に適用されます。また、rows属性で表示する行数を指定できるため、入力項目に応じた高さに調整可能です。主なポイントform-controlクラス：Bo

  20. 【Bootstrap入門】ボタンのサイズを変更するクラス（btn-lg・btn-sm・btn-block）の使い方

    Bootstrapでは、専用のクラスをボタンに追加するだけで、サイズを簡単に調整できます。ここでは、ボタンの大きさを制御するための主要なクラスと、実際のサンプルコードをわかりやすく解説します。 ボタンのサイズを指定できるクラス一覧 クラス名説明 .btn-lgボタンを通常より大きいサイズ（Large）にします。 .btn-smボタンを小さいサイズ（Small）にします。 .btn-xsボタンを極小サイズ（Extra Small）にします。※Bootstrap 3までのクラスで、Bootstrap 4以降では廃止されています。 .btn-blockブロックレベルのボタンを作成します。

Total 5937 -コンピューター  FirstPage PreviousPage NextPage LastPage CurrentPage:192/297  20-コンピューター/Page Goto:1 186 187 188 189 190 191 192 193 194 195 196 197 198