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

HTMLの背景に画像を全画面で表示させる方法を解説。ブラウザのウインドウサイズに関係なく、1枚の背景画像が縦横比を維持して必ず画面全体を覆うように表示できます。CSSのbackground関連プロパティを書くだけの簡単な方法で、フルスクリーンでの縦横中央配置ができます。画面サイズに応じて適切な解像度の画像に切り替えて読み込ませる記述方法も紹介。

HTMLで複数の画像を隙間なくぴったり並べる方法を解説。画像を横並びに掲載すると、画像と画像の間に余計な空白ができてぴったりくっつかない場合があります。画像を縦並びに掲載すると、各画像の下に余白ができてしまうことがあります。HTMLソースの書き方を工夫したり、CSSでスタイルを追加したりすれば、余白を消して画像と画像をぴったりくっつけられます。

ファビコン(favicon／サイトアイコン)とは、ブラウザのタブやブックマークなどに表示されるWebサイト独自のアイコンのことです。ファビコンの簡単な作り方と設定方法を解説。複数サイズのアイコン画像を結合・変換したfavicon.icoファイルを無料で手軽に作成できる「x-icon editor」の使い方もご紹介。ホームページに合ったファビコンを作って設置してみましょう。

サブウインドウを開く方法！閲覧者に不便をかけない小窓とは。JavaScriptを使えば、ウェブページを表示しているウインドウとは別のサブウインドウを開くことができます。しかし書き方によっては弊害があります。それらの問題をすべて解決したサブウインドウの開き方や、そもそも別ウインドウを開かずに済ませる代替手段をご紹介。

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

プレースホルダーを表示する方法を解説。HTMLのplaceholder属性を使えば簡単に表示できます。textarea要素に表示するプレースホルダーは少し工夫すると改行も可能。CSSのplaceholder疑似クラスを併用すればプレースホルダーの文字を自由な色に変えられます。カーソルが入った瞬間にプレースホルダーの文字が消える仕様もCSSだけで作れます。placeholderの表示と装飾方法をご紹介。

CSSの疑似クラスnth-childやnth-of-typeは、どちらも「何番目の要素を対象にして装飾」というスタイルを作れます。これらを使えば、CSSだけで表を縦方向に一括装飾できます。表の列をグループ化するcolgroup要素を使わなくても、nth-of-typeやnth-childを使えば対象セルの位置を番号で指定できるからです。表を列単位で装飾するCSSの書き方をご紹介。nth-childとnth-of-typeの違いも解説。

imgタグとは、HTMLで画像を表示する際に使うタグのことです。imgタグの書き方は簡単で、src属性に画像のURLを指定し、alt属性に代替文字を指定するだけ。CSSを使えば画像の表示位置を中央寄せでも左右寄せでも自由に指定できます。HTML5で追加されたsrcset属性を使えば、複数の候補画像から条件に合致する1枚を自動選択することも可能。imgタグの簡単な書き方を解説。

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

空白文字の打ち方を解説。ウェブページ内でスペースを連続表示させる方法です。HTML中で半角スペースを連続して打っても、表示される空白は1つ分だけです。しかし「＆nbsp;」などの文字実体参照という特殊な記述方法を使えば、複数の連続した空白も入れられます。しかも、「半角スペースより細い空白」や「半角と全角スペースの中間くらいの空白」など4種類の空白文字があります。