プログラミング

プログラミング
【detailsタグ】折りたたみウィジェットを使ってみよう!「HTML・解説・初心者向け」- ノブレコ

detailsとは、「details(ディテイルズ)」とは、「詳細」という意味を表します。折りたたみウィジェットとは、ディスクロージャー・ウィジェットとも呼ばれ、クリックやタップをした際に三角形のアイコンが回転し情報の開閉を切り替える機能のことです。

続きを読む
プログラミング
【legendタグ】fieldsetのグループにタイトルを付けるタグ!「HTML・解説」- ノブレコ

legendとは、fieldset要素のキャプションを表すためのタグです。fieldset要素でグループ化した入力項目にタイトルを付けられます。使用できるのはfleldset要素にだけで、fieldset要素でグループ化した内容のキャプションを扱うタグとなり、キャプションで説明した内容=タイトルになります。

続きを読む
プログラミング
【fieldsetタグ】フォーム内の入力項目をグループ化しよう!「HTML・解説・初心者向け」- ノブレコ

fieldsetとは、fieldsetはfieldをsetするためのタグで、主にformタグの中で使うタグで、フォームコントロールをグループ化するためのタグです。fieldsetを使う時には合わせてlegendとセットで使用します。CSSプロパティを指定することで、ボーダー線などの装飾をすることもできます。

続きを読む
プログラミング
【meterタグ】割合の値を棒グラフのゲージで表現してみよう!「HTML・解説・初心者向け」- ノブレコ

meterとは、HTML5から追加されたもので、一定範囲に収まるスカラー量や、割合を表現できる値を「棒グラフの様なゲージ」で表現するタグです。見た目はprogress要素に似たような表現になりますが、主に動的な進捗状況を表現したい場合はprogress要素を使い、そうでない場合にmeter要素を使うという形になります。

続きを読む
プログラミング
【progressタグ】タスクの進捗状況を表してみよう!「HTML・解説・初心者向け」- ノブレコ

progressタグ、タスクの進捗状況を表すために使用するタグです。このタグは、HTML5から追加された要素で、プログレスバーとしてレンダリングされます。対応しているブラウザでは、javascriptと組み合わせることで進捗状況を動的にリアルタイムで反映させることができます。

続きを読む
プログラミング
【outputタグ】アプリの実行結果の出力先を表してみよう!「HTML・解説・初心者向け」- ノブレコ

outputとは、フォーム部品の1つで、主にjavascriptの計算結果の出力先を表示するためのタグで、javascriptによる動的処理に適しているタグです。主にform要素の中で使われ、スクリプトによって実行された処理結果や、ユーザー操作で得られた結果などを表します。

続きを読む
プログラミング
【textareaタグ】複数の文字入力が可能な自由欄を作成しよう!「HTML・解説」- ノブレコ

textareaとは、テキストを入れる入力欄を表示し、入力欄の中に複数の文字を入れることが可能になるタグです。inputタグと同じくフォーム部品を構成するタグの1つです。指定した入力欄の幅と高さに応じて、文字の入力数を変化させることができます。

続きを読む
プログラミング
【datalistタグ】フォームなどで入力欄候補になるデータリストを使おう!「HTML・解説」- ノブレコ

datalistとは、入力候補となるデータリストを作成するためのタグです。input要素と組み合わせて使うことが多く、フォーム内での入力欄候補のデータリストを表示することもできますし、検索キーワードの入力候補を表示したりできます。フォームでコンボボックス(プルダウンメニュー)を作成するときに併用することができます。

続きを読む
プログラミング
【optgroupタグ】option要素をグループ化してみよう!「HTML・解説・初心者向け」- ノブレコ

optgroupとは、select要素の子要素として使用するタグで、メニューの選択肢となるoption要素をグループ化するためのタグです。optgruop要素を使用する際は、そのグループごとに「label属性」を使ってグループ名を付けることが必須です。

続きを読む
プログラミング
【optionタグ】serectタグ内でプルダウンメニューの選択肢を追加!「HTML・解説」- ノブレコ

optionとは、フォームを作成する際のselect要素内で使用し、プルダウンメニューの選択肢を追加するためのタグです。また、selected属性で最初から選択肢を選択することができたり、disabled属性により選択肢を選択できなくすることも可能です。

続きを読む