ホームページ作成 人気記事ランキング

HTML＋CSSだけで画像サイズを画面サイズに自動で合わせる方法を解説。レスポンシブWebデザイン採用サイトや、デバイスの画面幅に合わせて(縦横比率を維持したまま)画像を拡大縮小させたい場合の簡単な書き方を中心に解説していきます。

タブ機能の作り方を解説。ページを移動することなくボックス内の表示内容を切り替える方法です。HTMLとCSSでタブを作り、JavaScriptを使って表示タブを切り替えます。タブ表示部分がクリックされれば一瞬でページ内容が変化するタブ機能は、狭い領域にたくさんの情報を掲載したい場合に便利です。

イメージマップの作り方をご紹介。1枚の画像内部に複数個のリンクを設定できるイメージマップ。画像1つを丸ごとリンクにするのではなく、画像内の一部分だけをリンクにしたり、画像の中の座標ごとに移動先の異なる複数のリンクを作ったりできます。HTMLのmap要素とarea要素を使って、画像内を円形や矩形など自由な形で区切るだけです。

HTMLで書いた文章の文字間隔を調整するには、CSSのletter-spacingプロパティを使います。単位emやpxを使って望みの字間を数値で指定すれば、細かく自由な幅で文字と文字の距離を広げられます。マイナスの値を指定すれば文字詰めもできます。CSSで字間を広げたり狭めたりする簡単な方法を解説。特に文字間隔を広げたい場合に、空白文字を使って調節してはダメな理由もご紹介。

ホームページを別のURLへ移転した際に便利な、指定したページへ自動的に移動(リダイレクト)させる方法を解説。すぐに自動転送するほか、旧サイトの全ページに同じ「新しいホームページへの引っ越し案内」を一括表示する方法も説明。.htaccess・HTML・JavaScriptの3通りでリダイレクトする書き方を紹介しています。

ドロップダウンメニューとは？HTML＋CSSだけでドロップダウンメニューを作る方法を解説。jQueryなどのJavaScriptは不要。リストの書き方(ul要素)を使って2階層以上のサブメニューも作れます。クリックせずにメニューを開閉できる、簡単でレスポンシブなメニューバーUIの作り方をサンプルと共にご紹介。

画像のクリック後にページを移動せず、その場で拡大画像を表示できるLightbox系スクリプトのおすすめ4本を紹介。JavaScriptを読み込むタグと短いHTMLを書くだけで簡単に使えます。jQueryを使う定番のLightbox2や、動画のポップアップも可能なColorbox、スマホ対応で全画面表示もできるIntense Imagesなどを紹介。CSSを使えば画像サイズの調整も簡単です。

Webページの周囲にある余白を消す方法や、余白部分にだけ背景色や背景画像を加えるスタイルの書き方、任意の余白サイズを指定する方法などを簡単に解説。Webページ周囲の余白は主に、HTMLのbody要素に対するマージンで作られています。上下左右のマージン量をCSSで調整したり装飾したりすれば、ページ周囲の余白をなくすことも自由な色を付けることも簡単です。

Web上の入力フォームで日本語入力機能(IME)のON・OFF・無効状態を制御する方法に、CSSのime-modeプロパティがあります。対応ブラウザはIEやFirefoxで、Edgeでは効かなくなりました。ime-modeの書き方と、ime-modeを使わずに済ませる代替方法として、ChromeやiOS版Safariなどで使えるHTML5.1のinputmode属性や、半角全角を自動変換する方法などをご紹介。

HTML内の特定の要素について表示/非表示を切り替えたい場合は、JavaScriptを使って当該要素のスタイルを変化させれば簡単です。ある要素の表示/非表示を切り替えるには、displayプロパティの値を変更する方法と、visibilityプロパティの値を変更する方法があります。ボタンのクリックで動作するサンプルを使って、画像の表示/非表示を動的に切り替える処理の書き方をご紹介。