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

ウェブ上に掲載したサムネイル画像をクリックしたときに、拡大画像を全画面で(ブラウザの描画領域全面に広げて)表示する方法をご紹介。ページ移動することなく拡大画像を全画面で表示できるスクリプト「Intense Images」の使い方を解説。スマートフォンでの操作にも対応。画面と画像との縦横比が異なる場合には、隠れた部分をマウスの動き(またはスワイプ操作)で見ることができる便利な仕様もあってお勧めです。

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

隠しリンクの作り方と見つけ方(探し方)、SEOでのペナルティなど注意点をご紹介。HTMLとCSSを使った「簡単に作れて簡単に見つけられる方法」から、JavaScriptを併用することで「リンク一覧作成機能(アドオンなど)を使っても見つけられない方法」まで、4種類の作り方・見つけ方を解説しています。隠しリンクゲームの作成や攻略などにお役立てください。

CSSで段組レイアウトを作る簡単な方法を解説。各段をdiv要素などのボックスで作るだけのシンプルなHTMLに、CSSのfloatとclearプロパティを適用するだけで段組レイアウトが作れます。HTMLとCSSをどう書けば段組になるのかの基本から、2段組や3段組の作り方、回り込み解除の便利な書き方(clearfix)まで、図とサンプルソースを使って説明しています。

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

画像ファイルなどへの直リンク(外部サイトからの直接参照)や、特定ページへのディープリンクを防ぎたい場合に、「禁止します」と宣言しても意味がありません。どうしてもリンクを阻止したい場合は、技術的にアクセス制限を施すしかありません。リンクを技術的に防ぐ(リンクされてもForbiddenエラーを表示する)方法をご紹介。

HTMLで作った2つのプルダウンメニューを、JavaScriptで連動させる方法を解説。メイン(1階層目)のプルダウンメニューの選択項目に応じて、サブ(2階層目)のプルダウンメニューを動的に表示する方法です。2段階に連動させると2階層目の表示項目数を絞れるため、選択肢をシンプルに分かりやすく表示できる効果があります。

テキスト入力欄にユーザが何かを入力する際に、現在の入力文字数をリアルタイムに表示するようにしてみましょう。入力文字数に制限のある入力欄などで活用すると便利です。入力可能な残り文字数の表示もできます。

リンク先を新規ウインドウで開くよう記述されているリンクに限定して、アイコンが付加されるようスタイルシートを書いてみましょう。target属性に値「_blank」が指定されているリンクに自動的に画像を表示させます。

ウェブ上のフォームでは、JavaScriptでリアルタイムに入力チェックし、その場でエラー表示のバルーンを出せると便利。jQuery-Validation-Engineを使えば、入力文字列や選択内容が指定条件(複数項目の組み合わせも可)を満たしているかどうかを入力と同時に確認し、ミスがあればエラーメッセージを吹き出しの形で表示可能。送信前に自動で入力チェックされる使いやすいフォームの作り方を解説。