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

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

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

文字列を、円形に配置して表示したり、アーチ状（扇形）にカーブさせて表示したりする方法を解説。jQueryを使うスクリプト「Arctext.js」を活用すれば、テキストを画像化することなく自由な半径でアーチ状に配置できます。上向き・下向きのアーチを組み合わせれば、コーヒー店のロゴのように文字を円形に配置することもできます。

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

HTMLのhref属性の書き方を解説。hrefの読み方や意味などの基礎から、ページ内リンクやメールアドレスへのリンクの作り方、target属性やdownload属性との併記方法など、href属性値の書き方・活用方法をご紹介。

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

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

HTML＋CSSで「1行全体」をクリック可能なリンクにしたり、テーブルの枠線内で「1つのセル全体」を余白も含めてクリック可能なリンクにしたりする方法を解説。HTMLのa要素で作るリンクを、CSSでブロック化した上で空白量を調整する簡単な記述で作れます。文字(リンクテキスト)だけでなく余白も含めた広い範囲をクリック可能にする、押しやすいリンクの作り方をご紹介。

メールアドレスやURLの例を書きたいとき、誰かに所有されているドメイン名を使ってサンプル文字列を作ると問題があります。URLやメールアドレスなどの例示に使えるドメイン名としてexample.comなどいくつかのドメイン名が用意されていますので、それらを使ってサンプルを書きましょう。危険なサイトに繋がる可能性もある紛らわしいドメイン名にも注意して下さい。

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