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

リンクの上にマウスを乗せたときにリンク文字の装飾を変化させるのによく使われる「hover疑似クラス」は、実はリンク以外に対しても使えます。うまく活用すると、大きな表をとても見やすく（使いやすく）できます。

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

入力フォーム内の項目には、「名前」や「メールアドレス」など他サイトでも頻繁に入力していると思われる項目がたくさんある場合があります。他サイトでの入力履歴を利用して補完できるように作っておくと便利です。

1回クリックされると無効化され、2回以上はクリックできないボタンの作り方を解説。入力フォームで使えば、送信ボタンが複数回クリックされても同じ内容の重複送信を防げます。HTMLのinput要素で作成したボタンに対して、JavaScriptを使ってdisabledプロパティをON/OFFすることで、ボタンの有効/無効状態を簡単に切り替える方法を解説。

CSS3のtransformプロパティを使うと、ワープロソフトなどでは簡単に実現できる「長体」(縦に細長い文字)や「平体」(横に平べったい文字)をウェブ上でも簡単に作れます。長体や平体を実現する方法と注意点等を解説。

ウェブ上のフォームでは、JavaScriptでリアルタイムに入力チェックし、その場でエラー表示のバルーンを出せると便利。jQuery-Validation-Engineを使えば、入力文字列や選択内容が指定条件(複数項目の組み合わせも可)を満たしているかどうかを入力と同時に確認し、ミスがあればエラーメッセージを吹き出しの形で表示可能。送信前に自動で入力チェックされる使いやすいフォームの作り方を解説。

掲載画像の多いページでは、「ページの下の方にある画像」を読み込む処理のために、「今見えている部分」の読み込みが遅れてしまうことがあります。それを防ぐために、1画面目以降の(すぐには見えない位置にある)画像に関しては、閲覧者がスクロールするまで画像を読み込まないようにする方法をご紹介。

HTMLに書いた文字をCSSで装飾する際に、1文字ずつ異なる文字色で表示されるよう指定する方法を解説。HTMLの特定の要素内に書かれた文字列を、JavaScript（jQuery）を使って文字単位に分解して個別の要素でマークアップすれば、CSSのnth-child疑似クラスなどを使うことで1文字ずつ個別のスタイルを適用できます。1文字ずつ異なる色でカラフルに表示したい場合に便利。

ボタンクリックで後続コンテンツを表示する「続きを読む」ボタンの作り方を解説。ページを読み込んだ時点では冒頭以外のコンテンツは折りたたんで(＝非表示にして)おき、「続きを読む」ボタンが押された際にだけ続きを展開(表示)する仕組みを作ってみましょう。グラデーションを使って徐々に後続コンテンツを薄くしたり、アニメーション効果と共に続きを表示したりする方法も紹介しています。

HTML5でのaタグ(a要素)の書き方を解説。aタグとは、HTMLソース内で主にリンクを作る際に使うタグのことです。リンク先を指定するhref属性や別タブで開かせるtarget属性などを含む開始タグ<a>から始まり、最後の終了タグ</a>までの全体を「a要素」と呼びます。様々なリンクを作る、HTMLの基本と言っても良いでしょう。CSSでの装飾も含めて、簡単な書き方をざっとご紹介いたします。