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

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

短縮URLの作り方おすすめ3選と、短縮URLを自分の独自ドメインで作成する方法をご紹介。外部の短縮URL生成サービスは手軽に利用できて便利ですが、デメリットもあります。転送の仕組みやフリーのツールを使えば、自サイト専用の短縮URLも無料で用意できます。短縮URLの解析サービスも使うと転送先が安全かどうかを調べられます。

ウェブ上に表示できる矢印記号は、実は100種類以上もあります。上下左右を表す矢印「↑↓←→」だけではなく、斜め方向の矢印、二重線の矢印、カーブした矢印、太い矢印、手や指の形をした矢印など、テキストで表示できる絵文字のような矢印記号が多数あります。矢印の代わりに三角記号「▲▽」も使われますが、これも上下以外に横向きの三角形も表示できます。数値文字参照の書き方を使って特殊な矢印記号の出し方をご紹介。

ブラウザ上で右クリックした際に表示されるメニュー(コンテキストメニュー)の表示を禁止したり、コピー操作を無効化したり、その際に警告を表示したりする方法はとても簡単です。しかし、その禁止や無効化を解除(回避)する方法もとても簡単です。右クリックやコピーを禁止するHTML＋JavaScriptの書き方と、その解除方法の両方を解説。

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

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

環境依存文字(機種依存文字)でも文字化けせずに表示する方法を紹介。丸囲み数字、ローマ数字、ハートマークなど一部の特殊な文字や記号は、環境依存文字と呼ばれます。HTMLファイルの保存時に文字コード(テキストエンコーディング)をUTF-8にできない場合でも、数値文字参照という特殊な書き方を使えば、閲覧者の環境に関係なく各種記号を文字化けせずに表示できます。

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

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

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