Flexbox カードを縦方向に均等に並べる方法(Flexbox)｜3種類の間隔指定
Flexboxを使って、縦並びの3枚のカードを均等な間隔で配置する方法を紹介します。gapがカード同士の間隔を数値で指定するのに対し、justify-contentは親要素内の残りの空きスペースを分配して配置を調整します。この記事では、sp...
ゆきのふ
Flexbox 
レンタルサーバー InfinityFreeのFile Managerの使い方【ファイルのアップロードから公開まで初心者向けに解説】
InfinityFreeへログインする まず、InfinityFreeの公式サイトを開きます。 InfinityFree公式サイトを開く InfinityFreeのトップページが表示されたら、画面右上にある赤枠の「Login」をクリックしま...
レンタルサーバー InfinityFreeで無料サーバーを作る方法【登録から準備完了まで初心者向けに解説】
InfinityFreeで無料サーバーを作る方法 InfinityFreeを使って、PHPを実行できる無料サーバーを作る方法を紹介します。PHPを使ったサンプルコードをブラウザ上で動作させるには、PHPに対応したサーバーが必要です。HTML...
ツールチップ 基本のツールチップの作り方｜「？」アイコンにホバーして上下左右に表示する方法
「？」アイコンにマウスカーソルを合わせると補足説明が表示される、基本のツールチップの作り方を紹介します。パソコンではホバーで表示され、カーソルを外すと非表示になります。スマートフォンではアイコンをタップして表示し、もう一度タップすると閉じる...
通知 スクロールするとお知らせバーを表示する方法【HTML/CSS/JavaScript】
スクロールするとお知らせバーを表示する方法 ページをスクロールすると画面上部にお知らせバーを表示する方法を紹介します。このサンプルでは、ページを開いた直後はお知らせバーを非表示にしておき、一定量まで下方向へスクロールすると画面上部へお知らせ...
ラジオボタン 指定時間後に選択できなくなるラジオボタンを作る方法
ページを開いてから指定した時間が経過すると、ラジオボタンを選択できなくする方法を紹介します。制限時間内は自由に選択できますが、時間が経過するとすべてのラジオボタンが無効になり、選択内容を変更できなくなります。 今回は「りんご」「みかん」「ぶ...
通知 ESCキーでお知らせバーを閉じる方法【HTML/CSS/JavaScript・サンプルコード付き】
ESCキーでお知らせバーを閉じる方法 ESCキーでお知らせバーを閉じる方法を紹介します。このサンプルでは、ページを開いた時点からブラウザの画面上部へお知らせバーを固定表示し、キーボードのESCキーを押すと非表示にできます。HTMLとCSSで...
ボタン 指定時間後に押せなくなるボタンを作る方法【HTML/CSS/JavaScript・サンプルコード付き】
指定時間後に押せなくなるボタンを作る方法 指定時間後に押せなくなるボタンを作る方法を紹介します。このサンプルでは、ページを表示してから3秒間はボタンを押すことができ、3秒が経過すると自動的にボタンを無効化して押せない状態へ切り替えます。一定...
トグルスイッチ 指定時間後に操作できなくなるトグルスイッチを作る方法【HTML/CSS/JavaScript・サンプルコード付き】
指定時間後に操作できなくなるトグルスイッチを作る方法 指定時間後に操作できなくなるトグルスイッチを作る方法を紹介します。このサンプルでは、ページが表示されてから3秒間はトグルスイッチを自由にON・OFFでき、3秒が経過すると自動的に操作でき...
トースト 指定時間後にトーストを表示にする方法【HTML/CSS/JavaScript・サンプルコード付き】
指定時間後にトーストを表示する方法 指定時間後にトーストを表示する方法を紹介します。このサンプルでは、ページを表示してから3秒が経過すると、画面右下へ「保存しました」というトーストを自動で表示します。ボタンをクリックする必要はなく、ページが...