ホームページ作成 新着記事一覧

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

CSSのtable-cellを使って、レスポンシブな段組(マルチカラム)レイアウトを簡単に作成する方法をご紹介。floatプロパティやclearfixなどのCSSハックを駆使しなくても、displayプロパティに値table-cellなどを指定するだけのシンプルなCSSソースで、段組はもっと簡単に作成できます。table-cellなら各段の高さ(下端)もきれいに揃いますし、レスポンシブWebデザインで段組量を変化させるのも楽々です。

解像度の高い写真など、1枚の大きな画像をブラウザの画面(ウインドウ)全面に背景画像として掲載する方法をご紹介。ブラウザのウインドウサイズに関係なく、1枚の背景画像が縦横比を維持した状態で必ず画面全体を覆うように表示できます。スクリプトは不要ですし、HTML側の工夫も不要。数行のCSSを書くだけで簡単に全画面表示ができます。スマホなどの小型端末で無駄に大きな画像を読まないようにする方法も併せて解説しています。

HTMLで作成したボックスにCSSのoverflowプロパティを使ってスクロールバーを追加すれば、表示面積の狭い空間の中にたくさんの情報を詰め込むことができます。過去のお知らせタイトル一覧や更新履歴の掲載など、「広い面積は使いたくないが、多くの情報を列挙しておきたい」という場合にお勧めのレイアウト方法です。

郵便番号を入力するだけで該当する住所が自動入力(自動補完)される仕組みを、自身のウェブサイト内に設置する方法を解説。jQueryプラグイン「jquery.jpostal.js」を使えば、とても簡単に「郵便番号からの住所自動入力機能」を任意の入力フォームに対して追加できます。郵便番号から住所が自動入力できると、ユーザの手間が省けるだけでなく入力ミスも防げて便利です。実際に動作するサンプルページと共に解説しています。

table要素を駆使して作られたテーブルレイアウトなウェブページを、CSSだけでレスポンシブ化する方法を解説。表のセルを作るtd要素などに対してdisplayプロパティを適用すれば、HTML上では表のままで、表を崩す(表ではないように見せる)ことも可能です。特に値「inline-block」を指定すれば、表に似た表示のままで列数を2列や3列など画面の横幅に合わせて自動変化させることもできます。

Google Chart APIを使えば、2次元コード「QRコード」を簡単に作成してウェブ上に掲載できます。HTMLソース内に記述した文字列を使ってQRコードが動的に生成されるため、事前にQRコード画像ファイルを作ってアップロードしておくような手間が一切不要で簡単です。URLやメールアドレスだけでなく、日本語を含む自由な文字列をQRコードにできます。Google Chart APIで提供されているQRコード生成機能の簡単な使い方を解説。

画像やボックスを横幅いっぱいに広げるためにCSSで横幅(widthプロパティの値)を100%にすると、なぜか親ボックスの領域からはみ出ることがあります。CSSで幅や長さの指定を100%にした際などに遭遇する「微妙にはみ出してしまう」現象について、box-sizingプロパティを使って解決する方法をご紹介いたします。意図しない変なはみ出しを簡単に解消できます。

JavaScriptを使って、テキスト入力欄(input要素やtextarea要素)に入力された文字列のチェック機能や入力制限機能を作る方法を解説。数字だけ・半角英数字だけなど、入力可能な文字種や文字数を制限したいフォームに入力された内容は、送信前に自動チェックしてエラー表示できると便利です。HTML5では正規表現を使った入力チェックが可能ですが、JavaScriptを併用すればさらに細かく制限できます。サンプルと共に書き方をご紹介。

HTMLソースの中に画像を直接埋め込んで表示する方法を解説。HTMLはテキストデータですから、そのままではバイナリデータである画像を含められません。しかし、Base64という方法で画像をエンコード(＝テキストデータに変換)すれば、画像をHTMLソースの中に直接埋め込むことができます。読み込むファイル数を削減して高速化したい場合などに活用できます。HTMLソース内に画像を直接挿入してみましょう。