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

携帯電話で閲覧できる「ケータイサイト」作成方法の第3弾です。携帯端末ならではの「絵文字」を表示・入力する方法をご紹介。絵文字を入力するためのツールや入力方法の紹介と、絵文字の装飾方法も解説しています。

HTMLに記述したテキストをCSSで両端揃え(均等割り付け)にする方法を解説。行揃え方法を指定するtext-alignプロパティに、両端揃えを示す値「justify」を指定するだけで、各行の左端だけではなく右端もきれいに揃えられます。ただし、IEとEdgeではtext-justifyプロパティを併用する必要があります。

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

ホームページをスマホ対応にする方法として、サイト制作前に確認しておきたいポイントや、スマホ用ブラウザの仕様による注意点などを簡単に解説。スマホサイトに特殊な作り方は必要なく、HTML＋CSSはPCサイトとほぼ同じ書き方で作成できます。画面の小さなスマートフォンに適したデザインで、モバイル対応Webサイトを作ってみて下さい。

様々な状況での表示確認や動作確認・構造の把握などが手軽にできる、便利なFirefoxアドオン「Web Developer」をご紹介。CSSや画像の有効・無効を簡単に切り替えたり、特定の要素を強調したり、ウェブ制作に便利な機能が豊富です。

CSSで画像や文字を回転させる方法を解説。CSSのtransformプロパティを使うと、HTMLに書いた要素を45度でも90度でも自由な角度で回転できます。transformの値にrotateを使えば2D(平面)で傾けられ、rotateXなどを使えばX軸・Y軸・Z軸を基準に3D(立体)で回転できます。Y軸で中心から180度反転させれば鏡文字も簡単に作れます。何かを回転させるCSSの書き方をご紹介。

複数の画像が数秒間隔でフェイドアウト・フェイドインを繰り返す「ふわっと表示が切り替わる」効果のあるスライドショーをWeb上で作る方法を解説。画像を掲載する短いHTMLに、配置と重なり順序を調整するCSSを加え、jQueryでスライドショーを制御することで簡単に作れます。画像はリンクにもできるため、クリックすると詳細ページへ飛ぶスライドショーを作ることもでき、シンプルながら活用範囲の広いスライドショーになります。

Webページが指定距離だけスクロールされた際に「トップに戻る」ボタンを動的に表示する方法を解説。JavaScriptで「現在のスクロール位置」を取得し、「指定量以上スクロールされたかどうか」を判定してボタンの表示・非表示を切り替える処理は、jQueryを使えば簡単。HTMLで作成したリンクをCSSでボタン型に装飾し、常に画面の右下にボタンが表示されるように作ります。

ウェブページのデザインをモバイルファーストで作る際のCSSソースの書き方を解説。スマートフォンに最適化したシンプルなCSSを「共通デザイン」として先に記述しておき、後から「タブレット向けの差分デザイン」や「PC向けの差分デザイン」を付け足していくモバイルファーストな書き方なら、CSSソースの総量を減らしやすく、更新の手間も少なくて済みます。

画像の表示サイズをブラウザのウインドウ幅や端末の画面幅に自動で合わせたい場合があります。CSSを使えば画面幅と画像サイズを合わせるのは簡単ですが「拡大されすぎ／縮小されすぎ」を防ぎたいこともあります。「画像をウインドウ幅に合わせて表示したいが、本来の大きさより拡大はしたくない」、「画像を画面幅に合わせて表示したいが、極端な拡大や縮小は避けたい」など、画像サイズの自動調整に上限や下限を設けるCSSを解説。