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

CSS3のtransformプロパティを使うと、ワープロソフトなどでは簡単に実現できる「長体」(縦に細長い文字)や「平体」(横に平べったい文字)をウェブ上でも簡単に作れます。長体や平体を実現する方法と注意点等を解説。

アルバムのように、キャプション(タイトル名)を加えた画像を横方向にたくさん並べてみましょう。横に並ぶ数を指定せず、ウインドウサイズに応じて自動的に配置される「リキッドレイアウト」で実現する方法をご紹介。

ボタンをクリック(タップ)することによって、初期状態では非表示になっているサイドメニュー(メニューバー)を表示させる方法をご紹介。スクリプト「Sidebar Transitions」使って14種類のアニメーション効果でサイドメニューを表示する方法を解説。

見栄えの良いデザインやインターフェイスが簡単に作れるフレームワーク「Bootstrap2」のグリッド機能を使うと、段組構造がとても簡単に作成できて便利です。

長いURLや長い英数字の羅列を表示する場合でも適切に自動改行(折り返し)させることで、ボックスから文字列がはみ出したり、横スクロールが必要になったりしないようにするCSSの書き方を解説。overflow-wrap、word-wrap、word-breakという3種類のプロパティ名が混在していて紛らわしいので、これらの違いと使い方をご紹介いたします。

Facebook内に独自のウェブサイトを持てる「Facebookページ」の作り方を解説。企業だけでなく個人でも今すぐ簡単に作成できます。Facebookの機能を活用して口コミでの広がりが期待できたり、訪問者とのコミュニケーションが取りやすいなどのメリットがあります。ぜひ作って活用してみて下さい。

モバイル端末でのウェブページの見え方を、実機を使わずにPC上で確認する方法をご紹介。PC用ブラウザには「スマートフォンやタブレット端末で表示した場合の見え方」を擬似表示する機能があります。Chromeのデベロッパーツール、IE・EdgeのF12開発者ツール、Firefoxのレスポンシブデザインビュー機能を使って、PC上でモバイル端末の表示を確認する方法を解説。

複数バージョンのInternet Explorerで同時に表示確認ができるMicrosoft製ソフト「Expression Web SuperPreview」の使い方を解説。IE6・IE7・IE8・IE9での見え方を比較できる上、表示のずれ具合を数値で知ることもできるなど、高機能で便利なソフトウェアです。古いバージョンのIEでの表示確認にぜひ活用してみて下さい。

ボタンクリックで後続コンテンツを表示する「続きを読む」ボタンの作り方を解説。ページを読み込んだ時点では冒頭以外のコンテンツは折りたたんで(＝非表示にして)おき、「続きを読む」ボタンが押された際にだけ続きを展開(表示)する仕組みを作ってみましょう。グラデーションを使って徐々に後続コンテンツを薄くしたり、アニメーション効果と共に続きを表示したりする方法も紹介しています。

閲覧者の画面が横向き(横長)なのか縦向き(縦長)なのかを判別してスタイルを切り替える方法を解説。スマートフォンのような「画面の小さな端末」を縦向きに使えば、横幅はとても狭くなります。縦向き時には縦向き専用デザインを適用したり、横向きの方が見やすいことを案内すれば、使いやすいウェブページになります。