プログラミングメモ

セレクトボックスとフォームユーザー側で複数の選択のうち一つを選ぶフォームはラジオボタンがありますが、select要素を用いたセレクトボックスも同じようなフォームとして利用できます。select要素を用いたセレクトボックスをフォームとして扱うにはフォーム要素内にselect要素を記述する必要があります。また、select要素はフォーム以外にもHTML上の選択肢のインターフェースとして利用できます。セレクトボックスの記述セレクト...

続きを読む

チェックボックスについて今回はフォームの一つであるチェックボックスについて紹介したいと思います。前回のラジオボタンは複数の選択肢の中から一つを選ぶものでしたが、チェックボックスは複数の選択を行うフォームです。以下はHTMLのフォームの例の一つです<input type="checkbox" name="box" value="A" onchange="boxSelect(this.value)" checked>扱い方は前回のラジオボタン...

続きを読む

フォームについてWebページではページの閲覧の他にも、データの入出力を行う場面があります。ユーザーが何らかのデーターを入力してやり取りを行う要素をフォームといいます。具体的にはHTMLでの文章の入力欄やボタン等の選択を行うラジオボタンやチェックボックスなどがフォームとなります。フォームは<input>タグで作成される要素です。またフォームは<form>タグを用いてデータをまとめて取り扱うことができます。ラ...

続きを読む

コンテンツをタイル状に並べるレイアウトはグリッドレイアウトの一つですが、大量のコンテンツを表示する幅に応じて可変的に並べるのにもFlexboxは便利です。ここではFlexboxのflex-wrapプロパティを用いてコンテンツを並べてみます。flex-wrapプロパティはFlexboxのコンテンツ要素の折り返しを指定するプロパティです。ここでflex-wrapプロパティで指定した要素はFlexboxの要素の範囲内を越えた場合、自動的に要素の並びを折り返...

続きを読む

HTMLでよく見かけるレイアウトである3カラムのレイアウトですがFlexboxを用いても3カラムのレイアウトでコンテンツを配置できます。Flexboxを用いる場合単純に横三つに並べたい要素にCSSでdisplay:flexと指定すれば並べます。上下にヘッダーとフッターを加えたければヘッダーとフッターの要素の間にCSSでdisplay:flexを指定すればヘッダーとフッターの間で3カラムの配置になります。Flexboxは単に縦横に並べるレイアウトは向いてい...

続きを読む