ホームページ作成 人気記事ランキング(5ページ目)

Enterキーによる誤送信を防ぐ方法や設定はあるのでしょうか。Enterキーを押してもフォームの内容が送信されないようにする方法と、送信する前に確認ダイアログを表示する方法の2通りをご紹介いたします。

HTMLの背景に画像を全画面で表示させる方法を解説。ブラウザのウインドウサイズに関係なく、1枚の背景画像が縦横比を維持して必ず画面全体を覆うように表示できます。CSSのbackground関連プロパティを書くだけの簡単な方法で、フルスクリーンでの縦横中央配置ができます。画面サイズに応じて適切な解像度の画像に切り替えて読み込ませる記述方法も紹介。

Webページの周囲にある余白を消す方法や、余白部分にだけ背景色や背景画像を加えるスタイルの書き方、任意の余白サイズを指定する方法などを簡単に解説。Webページ周囲の余白は主に、HTMLのbody要素に対するマージンで作られています。上下左右のマージン量をCSSで調整したり装飾したりすれば、ページ周囲の余白をなくすことも自由な色を付けることも簡単です。

企業の製品紹介サイトなどでは、画面全体に文字や画像を大きく配置し、1画面ずつスクロールして見せるデザインのウェブページをよく見かけます。そのような「1画面単位で滑らかにスクロールして画面が切り替わる」デザインのページを、jQueryを使って簡単に作成してみましょう。

HTMLで複数の画像を隙間なくぴったり並べる方法を解説。画像を横並びに掲載すると、画像と画像の間に余計な空白ができてぴったりくっつかない場合があります。画像を縦並びに掲載すると、各画像の下に余白ができてしまうことがあります。HTMLソースの書き方を工夫したり、CSSでスタイルを追加したりすれば、余白を消して画像と画像をぴったりくっつけられます。

リストやテーブル(表組み)など多数の項目が連続する要素は、1行おきに装飾を分けると見やすくなります。CSSのnth-child疑似クラスを使えば、偶数行(＝2の倍数番目)だけの装飾、奇数行(＝2の倍数+1番目)だけの装飾などを簡単に指定できます。表なら「n番目の列」のように列単位で色分けするのも簡単です。そのほか、先頭だけ、先頭から5つだけ、3個おき(＝3の倍数)、最後から2番目だけ、最後だけ……など柔軟に指定できて便利です。

ハート記号（ハートマーク）を書く方法を解説。画像を使わなくても、Unicodeに定義された絵文字を使えば20種類以上のハート記号を簡単にウェブ上に表示できます。CSSを使えばハートの色もサイズも自由に装飾可能。文字実体参照や数値文字参照の書き方を使ってハート記号をウェブページ上に表示する方法などをご紹介。

HTMLのaudio要素を使って、Webページ上で音楽を再生したり効果音を鳴らしたりする方法を解説。ブラウザ内蔵の音楽再生コントロール（再生ボタンがあるプレーヤー）を表示させてMP3ファイルなどの音楽を流す方法や、JavaScriptを使って音を鳴らすタイミングを制御する方法を解説。autoplay属性で自動再生させたり、source要素で複数のファイル形式に対応させたりできます。

CSSの疑似クラスnth-childやnth-of-typeは、どちらも「何番目の要素を対象にして装飾」というスタイルを作れます。これらを使えば、CSSだけで表を縦方向に一括装飾できます。表の列をグループ化するcolgroup要素を使わなくても、nth-of-typeやnth-childを使えば対象セルの位置を番号で指定できるからです。表を列単位で装飾するCSSの書き方をご紹介。nth-childとnth-of-typeの違いも解説。

ウェブサイト内の特定ページやディレクトリにアクセス制限を施す設定方法として、Basic認証(ベーシック認証／基本認証)の使い方を初心者向けに解説。ユーザー名(ID)とパスワードの入力が必要な会員制ホームページの作成方法をご紹介。HTMLの修正は不要で、.htaccessファイル等を書けば簡単にパスワード認証を設定できます。