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

Base64というエンコード方法を使って、画像そのものをCSSソース中に埋め込む方法を解説。ウェブ上に小さな画像を多数掲載する際、画像ファイル1つ1つを読み込むよう記述していると、サーバへのリクエスト回数も多くなるため余計な時間がかかります。小さな画像ファイルをCSSソース中に埋め込むことで余計な通信を減らし、読み込み待ち時間を軽減する方法をご紹介。

スマートフォン用にウェブページを作っても、コンテンツが多ければ自動的に縮小されて表示されます。これは、PC用ウェブサイトをうまく閲覧するためには必要な機能ですが、スマートフォン用にデザインしたページの表示では少々困ります。そこで、自動縮小を防ぐ「viewport」の記述を使ってみましょう。

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

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

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

多くのソフトウェアには便利なショートカットキーが用意されています。慣れると非常に重宝するショートカットキーをホームページ内部にも設けてみましょう。ページ内の各オブジェクトをキーで選択する方法をご紹介。

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

ウェブサーバの設定ファイル「.htaccess」を活用すると、特定ディレクトリへのアクセスを問答無用で拒否したり、指定ファイルへのアクセスだけを拒否したり、自分以外のユーザによるアクセスを拒否したりできます。

Google Chart APIを使ったQRコードの簡単な作成方法を解説。Google提供のQRコード作成サービスなら、HTMLソースに記述した文字列からQRコード画像が動的に生成されるため、ウェブ上にQRコードを表示したい場合でも事前に画像ファイルを用意する手間が不要で簡単です。URLやメールアドレスだけでなく、日本語などの自由な文字列を含むQRコードの作り方をご紹介。

リンクを作る場合や、画像を表示する場合には、「リンク先ページ」・「表示する画像」など、ファイル名を指定する記述が必要です。そのような外部ファイルの指定方法にはいくつかの種類があります。その方法を解説。