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

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

画像やボックスを横幅いっぱいに広げるためにCSSで横幅(widthプロパティの値)を100%にすると、なぜか親ボックスの領域からはみ出ることがあります。CSSで幅や長さの指定を100%にした際などに遭遇する「微妙にはみ出してしまう」現象について、box-sizingプロパティを使って解決する方法をご紹介いたします。意図しない変なはみ出しを簡単に解消できます。

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

imgタグとは、HTMLで画像を表示する際に使うタグのことです。imgタグの書き方は簡単で、src属性に画像のURLを指定し、alt属性に代替文字を指定するだけ。CSSを使えば画像の表示位置を中央寄せでも左右寄せでも自由に指定できます。HTML5で追加されたsrcset属性を使えば、複数の候補画像から条件に合致する1枚を自動選択することも可能。imgタグの簡単な書き方を解説。

画像リストの中からランダムに1つの画像を表示する方法を解説。アクセス者がページを閲覧するたびに画像を切り替えて表示できます。乱数を使ってランダムに画像を表示すると言っても、記述するJavaScriptソースはほんの数行だけなので簡単に作れます。

CSSで段組レイアウトを作る簡単な方法を解説。各段をdiv要素などのボックスで作るだけのシンプルなHTMLに、CSSのfloatとclearプロパティを適用するだけで段組レイアウトが作れます。HTMLとCSSをどう書けば段組になるのかの基本から、2段組や3段組の作り方、回り込み解除の便利な書き方(clearfix)まで、図とサンプルソースを使って説明しています。

Microsoft製のホームページ作成ソフト「Microsoft Expression Web 4」が開発終了に伴って無料公開されています。HTMLやCSSだけでなくJavaScriptやPHPも含めたソース補完機能、入力支援機能、文法チェック機能などを備えた、統合ホームページ作成フリーソフトです。この機会に使ってみてはいかがでしょうか。Windows10でも動作し、HTML5で記述することもできます。日本語版のインストール方法と各種機能をご紹介いたします。

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

HTMLで作成できる入力フォームで複数の選択肢を見せる方法には、チェックボックス・ラジオボタン・プルダウンメニュー(リストボックス)などのUIがあります。複数の値から1項目だけを選ばせる入力フォームとして使う場合の特徴を比較して、UIとしての選択例とHTMLの書き方を解説。使いやすくて分かりやすい入力フォームの作り方をご紹介いたします。

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