テキストフィールド 基本のテキストフィールドを作る方法【HTML/CSS・サンプルコード付き】
基本のテキストフィールドを作る方法 基本のテキストフィールドを作る方法を紹介します。このサンプルでは、HTMLのinput要素を使用して、1行の文字を入力できるシンプルなテキストフィールドを作成します。ラベル付きの入力フォームを見やすいレイ...
ゆきのふ
テキストフィールド 
セレクトボックス 基本のセレクトボックスを作る方法【HTML/CSS・サンプルコード付き】
基本のセレクトボックスを作る方法 基本のセレクトボックスを作る方法を紹介します。このサンプルでは、HTMLのselect要素とoption要素を使用し、一覧から1つの項目を選択できるシンプルなセレクトボックスを作成します。CSSでは見た目を...
ラジオボタン 基本のラジオボタンを作る方法【HTML/CSS・サンプルコード付き】
基本のラジオボタンを作る方法 基本のラジオボタンを作る方法を紹介します。このサンプルでは、HTMLのradio要素を使用し、複数の選択肢から1つだけ選択できるラジオボタンを作成します。HTMLとCSSだけで実装しているため、シンプルな構成で...
チェックボックス 基本のチェックボックスを作る方法【HTML/CSS・サンプルコード付き】
基本のチェックボックスを作る方法 基本のチェックボックスを作る方法を紹介します。このサンプルでは、HTMLのcheckbox要素を使用し、複数の項目を自由に選択できるチェックボックスを作成します。HTML・CSSだけで実装しているため、シン...
ポップアップ 基本のポップアップを作る方法【HTML/CSS・サンプルコード付き】
基本のポップアップを作る方法 基本のポップアップを作る方法を紹介します。このサンプルでは、ページを開いたときにお知らせを表示し、「閉じる」ボタンを押すとポップアップが非表示になるシンプルなUIを作成します。背景を覆うオーバーレイは使用せず、...
ツールチップ 基本のツールチップを作る方法【HTML/CSS・サンプルコード付き】
基本のツールチップを作る方法 基本のツールチップを作る方法を紹介します。このサンプルでは、HTMLとCSSだけを使用して、ボタンへマウスカーソルを合わせると説明文を表示するシンプルなツールチップを作成します。JavaScriptを使用しない...
ドロップダウンメニュー 基本のドロップダウンメニューを作る方法【HTML/CSS/JavaScript・サンプルコード付き】
基本のドロップダウンメニューを作る方法 基本のドロップダウンメニューを作る方法を紹介します。このサンプルでは、ボタンをクリックするとメニューを表示し、もう一度クリックすると閉じるシンプルなドロップダウンメニューをJavaScriptで実装し...
スライダー 基本のスライダーを作る方法【HTML/CSS/JavaScript・サンプルコード付き】
基本のスライダーを作る方法 基本のスライダーを作る方法を紹介します。このサンプルでは、HTML・CSS・JavaScriptだけを使って、左右のボタンやドットナビゲーションでスライドを切り替えられるシンプルなスライダーを実装しています。1枚...
カルーセル 基本のカルーセルを作る方法【HTML/CSS/JavaScript・サンプルコード付き】
基本のカルーセルを作る方法 Webサイトで商品や記事、画像などの複数コンテンツを横並びにして見せたい場合は、カルーセルを使うと限られたスペースを有効に活用できます。この記事では、HTML・CSS・JavaScriptを使って、複数のカードを...
カードUI 基本のカードを作る方法【HTML/CSS・サンプルコード付き】
基本のカードを作る方法 基本のカードを作る方法を紹介します。このサンプルでは、HTMLとCSSだけを使用して、見出しと説明文のみで構成されたシンプルなカードUIを作成します。画像やボタン、アイコンなどは使用せず、カード本体の枠線、角丸、余白...