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

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

無味乾燥なテキスト入力フォームの内側左端にアイコンを表示させてみましょう。検索用の入力欄なら虫眼鏡などの「検索機能」を示すアイコンを表示させることで、役割が分かりやすいテキスト入力フォームになります。

CSSのborder-radiusプロパティを使って、スタイルシートだけでボックスなどの角を丸くする方法を解説。枠線が引かれていれば四角い枠線の角が丸くなりますし、背景色が塗られていれば四角い塗りつぶし領域の角が丸くなります。画像の四隅を丸くカットすることも可能。角丸の半径は1ピクセル単位で設定でき、四隅の一部だけ(上だけ・下だけ・左だけなど)を角丸にすることもできるため、連結ボタンに見せる装飾も簡単に作れます。

HTMLに記述したテキストをCSSで両端揃え(均等割り付け)にする方法を解説。行揃え方法を指定するtext-alignプロパティに、両端揃えを示す値「justify」を指定するだけで、各行の左端だけではなく右端もきれいに揃えられます。ただし、IEとEdgeではtext-justifyプロパティを併用する必要があります。

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

Microsoft製のホームページ作成ソフト「Microsoft Expression Web 4」が開発終了に伴って無料公開されています。HTMLやCSSだけでなくJavaScriptやPHPも含めたソース補完機能、入力支援機能、文法チェック機能などを備えた、統合ホームページ作成フリーソフトです。この機会に使ってみてはいかがでしょうか。Windows10でも動作し、HTML5で記述することもできます。日本語版のインストール方法と各種機能をご紹介いたします。

JavaScriptが実行された結果として、どのような文字列やHTMLソースが出力されているのかを確認する方法を解説。ブラウザの「ソースを表示」機能では単にJavaScriptのソースコードが見えるだけです。そうではなく、関数が処理された結果としてブラウザに出力されるHTML要素などの値を見たりファイルに保存したりする操作例をご紹介いたします。

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

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

ウェブページ上で2乗や3乗など「n乗」の数値や単位(累乗の指数)を表示したい際には、右肩に小さく文字を載せるHTMLのsup要素を使えば簡単です。または、文字実体参照を使って2乗・3乗を記号として表示する方法もあります。それら両方の書き方をご紹介。sup要素は上付き文字にする要素なので、注釈を示す脚注番号を表示する用途にも活用できます。