HTML– tag –

はじめに 「flexboxだと縦横のレイアウトが思うように組めない」「カード一覧をきれいに整列させたい」という経験はありませんか？ これらの多くは、Grid（グリッド）レイアウトを使うことで簡単に解決できます。 前回の記事では、要素を1方向に並べるflex...

はじめに 「要素を横並びにしたいのに、思い通りにいかない」「中央揃えのやり方がいまいち分からない」という経験はありませんか？ これらの多くは、flexbox（フレックスボックス）を使うことで簡単に解決できます。 前回の記事では、CSSの基本となるボッ...

はじめに 「余白を設定したのにレイアウトが崩れた」「paddingとmarginの違いがよくわからない」という経験はありませんか？ これらの多くは、CSSのボックスモデルを理解することで解決できます。 前回の記事では、テキストの配置や装飾に関するプロパティ...

Webページで文字列の配置や装飾を制御する「CSSテキスト関連プロパティ」の基本についての解説です。 はじめに Webページで「文字の位置を変えたい」「下線を引きたい」「文字間隔を広げてスッキリ見せたい」と思ったことはありませんか？ こういった文字...

Webページの文字デザインを決める「CSSフォント」の基本を初心者向けに解説します。 はじめに 文字デザインは、Webサイトの印象を大きく左右します。CSSでフォントを正しく指定することは、サイトの見やすさ（視認性）だけでなく、サイトの雰囲気を伝える...

CSSセレクターとは、WebページのHTMLやXML文書内で、「どの要素に対してスタイル（デザインやレイアウトなど）を適用するか」を指定するためのパターンです。 はじめに CSSを書くうえで最も重要なのが「セレクタ」です。 セレクタを理解していれば、 特定...

Webページの基礎知識として、今回から「CSS (スタイルシート) 」について勉強します。 はじめに Webページを作るうえで欠かせないのが「CSS（スタイルシート）」です。HTMLが「骨組み」だとすれば、CSSは「見た目（デザイン）」を整える役割を担います。 ...

Webページの基礎、HTMLのフォーム <form> 内で使用する部品タグ<textarea> についてです。 はじめに HTMLフォーム <form> では、入力内容に応じて適切なパーツを使い分けることが重要です。 この記事では、複数行のテキスト入力ができる...

Webページの基礎、HTMLのフォーム <form> 内で使用する部品タグ <select> についてです。 はじめに ユーザーに入力させる内容を限定したい場合は、<select> タグが便利です。 この記事では、プルダウンメニューを作成する <select> タグの使い...

Webページの基礎、HTMLのフォーム <form> 内で使用する部品タグ <input> についてです。 はじめに 前回はHTMLのフォーム全体 (<form>タグ) について解説しました。今回はその中でも最も重要な部品である <input> タグについて詳し...

Webページの基礎、HTMLのフォーム<form>タグについてです。 はじめに <form>タグ(フォーム要素)は、フォームを表す際に使用します。 フォームに関連する各種要素を部品のように組み合わせることで、タイプの違ういろいろなフォームを作成する...

Webページの基礎、HTMLのリスト要素についてです。 はじめに リストは、関連する複数の情報を集めるのに使われます。集合化することによって、それぞれの情報相互の関連がはっきりして読みやすくなります。 HTMLには、タイプの違う3つのリストがあります。...

Webページの基礎、HTMLのテーブル要素についてです。 はじめに 大量のデータや情報を読みやすく、視覚的にも分かりやすく表示には、テーブル(表)で表示する方法が非常に便利です。この記事ではHTMLで表を作成する方法について学びます。 HTMLで表を作るに...

Webページの基礎、HTMLのグローバル属性についてです。 グローバル属性とは グローバル属性は、その名前のとおり、すべての要素で利用することができる属性のことです。 グローバル属性は、HTMLに標準で規定されている要素だけでなく、ユーザーが定義した...

Webページの基礎、HTMLのフレーム要素についてです。 はじめに HTMLのフレームは、一つのウィンドウ内に画面を分割して複数のページを表示します、それぞれに別々のHTMLを表示する機能のことです。分割方法を指定する土台となるHTMLと、分割した部分に表示...

Webページの基本、HTMLのリンクについてです。 HTMLのリンクとは、文書や画像、JavaScriptファイルなどの外部のリソースとの関係を指定する要素です。リンクを作成するには、<a>タグや<link>タグを使います。 それでは、HTML文書にリンクを設...

Webページの基本、HTMLのイメージ<img>タグについてです。 <img>は HTMLの要素で、HTML文書に画像を埋め込みます。それでは、<img>タグの基本的な設定方法について勉強していきます。 画像を表示する <img>は画像を表示する際に使...

Webページの基本、HTMLのテキストについてです。 HTML文書をブラウザーが意図したとおりに表示できるようにするには、テキストを構造化する必要があります。今回は、HTMLのテキストを構造化するための基本的な処理方法について勉強します。 見出しと段落を...