プログラミング

HTMLフォーム(form)作成完全マニュアル！【初心者必見】

ウェブサイトを見ていると一度は以下の画像のようなデザインを見たことがあるかと思います。情報を入力出来る項目は『フォーム』と言われています。フォームに情報を入力し、登録ボタンを押すと入力した情報がサーバーに送られます。...

HTMLには、情報をリスト形式で表示するためのタグが提供されています。リストタグは、一つのタグだけでなく２つのタグを入れ子構造にして使用するHTMLタグであり、構造を理解ていないとUIが崩れる原因になります。また、リスト...

Webページの読み込みを高速化することはユーザーのエクスペリエンスを向上させるだけでなく、サイトスピードが上がることはSEOにも良い影響を与えます。読み込みを高速化させる方法は画像サイズの圧縮など様々な方法がありますが、...

Webページを構築する際に欠かせないのが画像の表示です。Webページに画像を表示するには、タグを使用します。この教材では、タグについて詳しく学び、画像の表示方法や画像の属性について理解していきましょう。 <img&...

Webサイトをマークアップする際は必ずといっていいほど、画像を設置することがあります。画像をそのまま配置するだけであれば、imgタグを使用するだけでいいですが、設置した画像の上に要素を配置したいこともあります。背景に画...

見やすいCSSのコード、保守性の高いコードというのは書く前の段階でどのようにコーディングしていくかを設計する必要があります。 CSSの設計にはすでにいくつか代表的な設計ルールもあります。今回は代表的なCSS設計を紹介して...

CSSのセレクタはHTMLタグ、ID属性やclass属性などの要素に直接指定するものだけではありません。セレクタの中には疑似要素という要素そのものではなく、要素の前後の部分などを指定する『疑似要素』というものがあります。...

要素がフォーカスされたときなど、要素の特定の状態を指定するものを『擬似クラス』と言います。CSSでは擬似クラスにスタイルを適用することで、要素の特定の状態の時に装飾することが出来るようになります。今回は擬似クラスへの装飾...

レスポンシブデザインとは、表示される画面サイズの幅によって見え方が変わるようにデザインされたWebページのことです。例えば以下のWebサイトは同じものになりますが、パソコンで見た時とスマートフォンで見た時にデザインが異な...

Webページを作る際には以下のような要素を横並びにしたいケースがよくあります。通常HTMLのブロック要素は同じ階層に並べても縦に並ぶようになっているので、横並びするにはCSSで制御する必要があります。そんな時に利用す...