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

HTML＋CSSだけでタブの切り替え機能を作る方法をサンプルと共に解説。複数のタブから見たい対象を選ぶだけで、ページを移動することなく表示内容が一瞬で切り替わります。選択中のタブがどれなのかを明示できるようにタブの色を変化させるのも簡単。JavaScriptなどのスクリプトは不要です。サンプルソースをコピー＆ペーストして試してみて下さい。

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

タブのアイコンとして、ウェブサイト独自の画像を設定・表示する方法を解説。PC用ブラウザのタブやアドレスバー、スマホ用ブラウザのブックマークやホーム画面などに自作のアイコン画像を表示させてみましょう。favicon.icoやapple-touch-icon.pngなどのファイルを作成し、短いHTMLを書くだけの簡単な手順で独自アイコンを設定できます。

Enterキーによる誤送信を防ぐ方法や設定はあるのでしょうか。Enterキーを押してもフォームの内容が送信されないようにする方法と、送信する前に確認ダイアログを表示する方法の2通りをご紹介いたします。

わずか9行のjQueryソースで、ウェブサイトのメニューバーにドロップダウンメニュー機能を加える方法を解説。ul＋li要素で作るリスト形式のHTMLを、メニューらしく見えるようCSSで装飾し、JavaScript(jQuery)を使ってサブメニューの開閉を制御するだけで、簡単に「マウスに合わせて自動でサブメニューが展開、メニュー外のどこかをクリックすると消える」という使いやすいドロップダウンメニューが作れます。

レスポンシブWebデザインを使って2カラム(2段組)レイアウトを作成する方法を、簡単なテンプレートとしても使えるHTML＋CSSソースの例と共に解説。スマートフォンなど幅の狭い画面では1カラム(段組なし)で表示し、PCなど幅の広い画面ではマルチカラムで表示するような「画面幅に適したレイアウトで表示できるWebサイト」も、HTML＋CSSだけで簡単に作れます。

画像クリックで拡大画像を表示できるレスポンシブ対応の代表的スクリプトLightbox2の使い方とカスタマイズ方法を1ページで解説。表示サンプルと共にオプションの書き方も紹介。Lightbox2はjQueryと共にCDN経由で読み込めば、自サイトに何も設置することなく簡単に使用可能。PCでもスマホでも動きます。

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

画面サイズ別にCSSをメディアクエリで切り替える方法を解説。メディアクエリとは、画面サイズなどの閲覧環境に応じて適用スタイルを切り替えるCSSの機能です。レスポンシブWebデザインを作る際にも使い、HTMLのmedia属性値やCSSの@media規則で条件を指定します。スマホ専用スタイルや、PC等の広い画面幅向けスタイルなどを作成しておき、簡単に切り替えられます。

IE8・IE9・IE10・IE11といった古いバージョンのIEを複数同時に起動させる方法を解説。Microsoftが無償配布している仮想マシンイメージを使えば、仮想環境上で複数バージョンのIEやEdgeを起動して表示確認ができます。最新版のIEやEdgeがインストールされている環境でも古いIEを同時に併用できますし、LinuxやMac上でもIEやEdgeを起動して表示確認ができます。