はじめに

HTMLのname属性を使って要素に名前をつける方法について、プログラミング初心者の方に向けて説明いたします。

この記事は、オンラインプログラミング学習講座「Webエンジニア入門総合コース」サポート記事です。

name属性とは

次のHTMLの要素に対して、name属性をつかって要素の名前をつけることができます。

• <button></button>

• <form>

• <fieldset>

• <iframe>

• <input />

• <keygen>

• <object>

• <output>

• <select>

• <textarea>

• <map>

• <meta>

• <param>

1番利用頻度が多いのはフォームName属性は、送信されたフォームでサーバがフィールドを識別するために1番よく使われます。
例ログインフォーム。「ユーザーネーム」入力欄、「パスワード」入力欄、「ログイン」ボタンがあります。

<form action="#" method="post">
  <input type="text" name="username" placeholder="ユーザーネーム">
  <input type="password" name="password" placeholder="パスワード">
  <input type="submit" value="ログイン">
</form>

ブラウザからフォームのデータがサーバへ送信された時、サーバサイドのプログラムは、- name属性がusernameだから、ユーザーネームとして処理しよう- name属性がpasswordだから、パスワードとして処理しようということができるようになります。

おわりに

この記事では、HTMLのname属性について学習しました。
「Webエンジニア入門総合コース」では、データベースの基礎はもちろんのこと、プログラミミング初心者向けに、HTML5, CSS3, JavaScript, Bootstrap, SQL, Ruby, Ruby on Rails, Cloud9, Git, GitHubなどを動画をつかって学習できます。

Web開発に必要なプログラミングスキルを1つのコースで沢山学べてお得です。264レクチャー・18時間の大型コースとなっています。

内容をしっかり確認できるように、無料プレビュー60分を公開していますので、ぜひご覧ください！

ウェブ開発入門完全攻略コース - HTML/CSS/JavaScript. プログラミングをはじめて学び創れる人へ！中村 祐太 Yuta Nakamura, Proglus （プログラス）Ruby on Rails7/MySQL/Bootstrap/AWS Cloud9/Git/GitHub等ウェブ開発に必要な様々なスキルを沢山学ぼう！カフェのウェブサイト、フォトギャラリー、ポートフォリオサイト、タスク管理アプリ等に挑戦！ 4.4 (7380 ratings)462 lectures, 28 hours

動画でプログラミング入門をしよう

オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！

プレミアムプランを2週間無料体験しよう

今すぐ詳細を確認する

HTMLにけるid属性とclass属性の使い分けについて、プログラミング初心者向けに説明します。

この記事は、オンラインプログラミング学習講座「ウェブ開発入門完全攻略コース」サポート記事です。

動画を使って学習する

チャンネル登録してね！

id属性

原則として、Webページ内に一つしかないものにはid属性を使って、固有のID名をつける

<p id="french">フレンチ</p>

注意：同じWebページ内で、同じID名を複数箇所で使うことはできません。

NG例

<p id="italian">パスタ</p>
<p id="italian">ピザ</p>
<p id="italian">リゾット</p>

class属性

同じWebページ内に、複数箇所で同じ役目をもたせたいものには、class属性を使います。

<p class="italian">パスタ</p>
<p class="italian">ピザ</p>
<p class="italian">リゾット</p>

事例

イタリアンレストランのメニュー

料理にはfood、ドリンクにはdrinkのクラス名
コーラにはcokeという固有のID名をつける

<ul>
  <li class="food">濃厚バーニャカウダ</li>
  <li class="food">魚介類のマリネ</li>
  <li class="food">ソーセージの盛り合わせ</li>
  <li id="coke" class="drink">コーラ</li>
  <li class="drink">ジンジャーエール</li>
  <li class="drink">烏龍茶</li>
</ul>

idが使える場合はidの利用を検討する

「class属性だけ使えば、良いのでは？」と思われた方もいらっしゃると思います。

実際にclassだけをつかってもエラーになることはありませんので、その考え方も間違いではありません。

しかしながら、idは、Webページ内に一つという特徴があるため、「わかりやすさ」「メンテナンス性」の点で有利です。

基本的には、Webページ内に一つしか無いものにはid属性をつけるようにしましょう。

おわりに

この記事では、HTMLにおけるid属性とclass属性の使い分けについて説明しました。

尚、紹介した内容は代表的な考え方であり、必ずしも全てのケースに当てはまるとは限りません。

例えば、今はページ内に1つしか存在しないけれど、将来的なアップデートで2つ以上になる可能性がある場合はどうするか？など考えていくとキリがありません。

id, classどちらでも良いケースに遭遇した場合には、まずは原則的な考え方を適応し、必要に応じで後ほどリファクタリングなど柔軟に対応することを心がけましょう。

「ウェブ開発入門完全攻略コース」では、データベースの基礎はもちろんのこと、プログラミミング初心者向けに、HTML5, CSS3, JavaScript, Bootstrap, SQL, Ruby, Ruby on Rails, Cloud9, Git, GitHubなどを動画をつかって学習できます。

Web開発に必要なプログラミングスキルを1つのコースで沢山学べてお得です。264レクチャー・18時間の大型コースとなっています。

内容をしっかり確認できるように、無料プレビュー60分を公開していますので、ぜひご覧ください！

ウェブ開発入門完全攻略コース - HTML/CSS/JavaScript. プログラミングをはじめて学び創れる人へ！中村 祐太 Yuta Nakamura, Proglus （プログラス）Ruby on Rails7/MySQL/Bootstrap/AWS Cloud9/Git/GitHub等ウェブ開発に必要な様々なスキルを沢山学ぼう！カフェのウェブサイト、フォトギャラリー、ポートフォリオサイト、タスク管理アプリ等に挑戦！ 4.4 (7380 ratings)462 lectures, 28 hours

動画でプログラミング入門をしよう

オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！

プレミアムプランを2週間無料体験しよう

今すぐ詳細を確認する