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

CSS(スタイルシート)とは何なのかをわかりやすく解説。CSSとHTMLの関係は？ CSSソースの書き方は？ CSSファイルの読み込み方は？ CSS3やCSS4とは？ レスポンシブWebデザインとは？ CSSの基本的な構造は？ といった基本的な疑問を解消して、セレクタやプロパティなどのCSS用語を簡単に解説。代表的なブラウザのCSSサポート状況の調べ方も紹介。

HTMLとは何なのかを初心者にもわかりやすく解説。HTMLとCSSの関係とは？ タグと要素の違いとは？ HTMLの基本的な構造とは？ XHTMLやHTML5って何？ 属性の書き方は？ など、HTMLに関する基本的な疑問を解消できるよう解説しています。

大きさの異なる複数のブロックを、うまい具合に隙間無くタイル状(レンガ状)に自動整列してくれる「Masonry」の使い方を解説。横幅や高さの異なるボックスがいくつあっても、できるだけ無駄な隙間ができないように詰めて配置してくれます。当初の「jQuery Masonry」とは違ってjQueryなしで動作可能になり、CDN経由で読み込めるようにもなって手軽になりました。

SSI(Server Side Includes)という仕組みを使うと、ウェブサーバ側でHTMLソース内に別ファイルの中身を合成(挿入)できます。ウェブサイト内には、ヘッダ部分・サイドバー部分・フッタ部分など全ページ共通のパーツが存在することが多いでしょう。そのような共通部分を別ファイルに独立させておき、SSIで動的に合成すれば、共通部分の管理や更新作業が楽になります。

創作用素材としてNHKが無料提供している映像素材集サイト「NHKクリエイティブ・ライブラリー」には、NHKの番組から切り出した動画や音声素材が5,000本ほど公開されており、すべてを無料で利用できます。素材の動画や音声は編集したり他の素材と組み合わせたりでき、加工した動画や音声はウェブ上に公開することもできます。簡単な利用方法をご紹介いたします。

ウェブページ上で2乗や3乗など「n乗」の数値や単位(累乗の指数)を表示したい際には、右肩に小さく文字を載せるHTMLのsup要素を使えば簡単です。または、文字実体参照を使って2乗・3乗を記号として表示する方法もあります。それら両方の書き方をご紹介。sup要素は上付き文字にする要素なので、注釈を示す脚注番号を表示する用途にも活用できます。

テキスト入力欄を、PC用ブラウザだけでなく、スマートフォンやタブレット端末でも使いやすくしてみましょう。既存のページを大きく改修することなく、簡単に実現できる方法をご紹介。

ウェブページが見つからなかった際に表示される「404 Not Found」エラーページなどの内容を、独自のデザイン(内容)にカスタマイズする方法を解説。他にも「403 Forbidden」や「500 Internal Server Error」など、ウェブサーバ側が表示する各種エラーメッセージは、すべて自由に変更できます。

ウェブページをある程度スクロールした段階で、描画領域の上端にメニューなどの任意の「バー」を固定表示させる方法を解説。jQueryを使えば、「現在のスクロール位置」を取得してから「指定量以上スクロールされたかどうか」を判定して、ボックスの表示・非表示を切り替える……という処理も、とても簡単に実現できます。

ページを下方向にスクロールしたとき、「ヘッダ部分は消えるのに、メニューバーはウインドウ上部に張り付いて固定される」というデザインの作り方をご紹介。最初から上端にあるものを固定するのではなく、「最初は上端にはない要素(メニューなど)」を「スクロールによって上端に到達した時点で固定する」方法を解説。jQueryプラグインのjquery.sticky.jsを使うと、ほんの数行の追記だけで簡単に作れます。