ホームページ作成　ガイド 西村 文宏

スマートフォン用ページが自動縮小されないようにする

スマートフォン用にウェブページを作っても、コンテンツが多ければ自動的に縮小されて表示されます。これは、PC用ウェブサイトをうまく閲覧するためには必要な機能ですが、スマートフォン用にデザインしたページの表示では少々困ります。そこで、自動縮小を防ぐ「viewport」の記述を使ってみましょう。

スマートフォンで押しやすいボタン型リンクを作るCSS

スマートフォンでは、画面に表示されたリンクを指で直接押して操作します。リンクを「大きなボタンの形」にして掲載すれば、押しやすいリンクになるでしょう。CSSを使えば、リンク自体はHTMLのa要素を使って作る「普通のリンク」のままで、「ボタン」の形に見えるように装飾できます。

「CSS Sprite」で画像の表示速度を高速化する

【ホームページの表示速度を速くする！】読み込む画像ファイルがたくさんあると、ホームページの読み込み速度が低下してしまいます。画像がたくさんあるなら、それらを「1つの大きな画像」に結合させてみましょう。すると、全体のファイルサイズも減り、通信回数も減るため、ページの読込速度が速くなります。複数の画像を1つにまとめ、スタイルシートを使って表示対象を選択するテクニック「CSS Sprite」の使い方をご紹介！

IE9を含む代表的なブラウザで使えるCSS3プロパティ

CSS3で新しく追加されたプロパティのうち、代表的なブラウザの最新版でなら既に表示可能になっているものをご紹介。背景画像のサイズ調節、透明度の指定、ボックスの影、角の丸い枠など、Internet ExplorerでもIE9でなら表示可能になっているものを集めました。具体的な記述方法も掲載していますので、ぜひ活用してみて下さい。

HTML5の書き方の基礎

これまでHTML4.01やXHTML1.xを使ってウェブページを記述してきたなら、HTML5を使ってウェブページを記述するのは特に難しくありません。XHTML1.1との違いを確認しつつ、HTML5ソースを記述する「最初の基礎」をご紹介。

名称と説明をセットにした「定義型リスト」を活用する

名称(用語)と説明文(定義)をセットにしてリスト表示する「定義型リスト」を活用してみましょう。HTMLのdl要素・dt要素・dd要素を使って作り、スタイルシートで装飾することで簡単に使えます。用語説明にも便利ですが、「友達のウェブサイトを紹介するリンクリスト」などにも活用できます。記述方法と装飾方法をご紹介！

意外と気づきにくい連番リストの使い方

ol要素とli要素で作る「連番リスト」（番号付きリスト）は、算用数字で「1」から順に番号を割り振るだけが表示方法ではありません。算用数字以外も使えますし、途中の番号から開始することもできますし、HTML5では逆順にカウントすることもできます。意外と気づきにくい活用方法をご紹介。

HTML5概要：動画や音声を再生できるvideo・audio要素

「HTML5」って何でしょうか？ それは「HTML4」や「XHTML1」の後継となる、便利な機能が増えた次世代のHTMLです。今回はHTML5で追加されたvideo要素・audio要素について解説します。video要素・audio要素を使えば、動画や音声を簡単に再生できます。

FirefoxでHTMLソース中のSVGやMathMLを有効にする方法

「HTML5」って何でしょうか？ それは「HTML4」や「XHTML1」の後継となる、便利な機能が増えた次世代のHTMLです。その中のひとつにSVG要素があります。しかしHTML内に直接記述されたSVGをそのまま表示できるブラウザは2010年9月現在まだありません。しかしFirefoxでは、設定を変更すれば表示できるようになります。今回はHTMLソース中のSVGやMathMLを有効にする方法を解説します。

HTML5概要：種類が増えて便利になった入力フォーム

「HTML5」って何でしょうか？ それは「HTML4」や「XHTML1」の後継となる、便利な機能が増えた次世代のHTMLです。HTML5では、従来のinput要素では作れなかった様々な入力欄が作れるようになっています。