ホームページ作成
Webサイトのユーザビリティ
Webサイトのユーザビリティを高める方法について解説しました。使いにくいサイト、気がつかないうちに作ってませんか?
記事一覧
-
指定日時にページを自動更新する方法(cron編・CGI編)
指定日・指定時刻にウェブページを自動で更新させたい指定日・指定時刻になったときに、ウェブページを自動で更新させたい指定日・指定時刻になったときに、自動でウェブページの内容を更新させたい、という場合があります。例えば、キャンペーンの案内を午前0時ちょうどから始めたいとか、何らかの結果発表を午前0...続きを読む
-
スクロールしてもサイドバーが消えないよう固定する
最初はスクロールに連動するが、画面から消える前に固定されるメニューページの端にメニューがあるレイアウトページの端にナビゲーションメニューがあるとき、ユーザがページをスクロールすれば、当然メニュー部分もスクロールします。そのままスクロールを続ければ、いずれはメニュー部分が画面外に出てしまい、メニ...続きを読む
-
ボックスに背景画像を使う際の落とし穴
背景に画像を使った例。一見、問題なさそうでも……下記のボックスを見てみて下さい。 赤い背景色のボックスの中で、「桜と賞状」の描かれた背景画像が表示されており、その中に文字が表示されています。 このボックスにはある問題点があります。 div.sample244a { background-co...続きを読む
-
指定の入力欄に自動でカーソルを入れる方法
div.sourcecode { background-color: #eeeeee; padding: 4px 4px 4px 20px; margin: 12px; line-height: 1.4; font-family: monospace; }メッセージ送信フォームやアンケートフ...続きを読む
-
押しやすいチェックボックスやラジオボタンを作るCSS
HTMLで作るチェックボックスやラジオボタンは、そのままでは押しにくいウェブ上のチェックボックス等は、デフォルトではクリック可能な範囲が狭くて押しにくい選択肢を作る「チェックボックス」や、複数の選択肢から1つだけを選択させる「ラジオボタン」は、様々なソフトウェアの設定画面などで活用されています...続きを読む
-
コピーさせたい文字列をコピーしやすくする
div.sourcecode { background-color: #eeeeee; padding: 4px 4px 4px 20px; margin: 12px; line-height: 1.4; font-family: monospace; } div.samplearea { ...続きを読む
-
フォーム上のリセットボタンはデメリット大
div.sourcecode { background-color: #eeeeee; padding: 4px 4px 4px 20px; margin: 12px; line-height: 1.4; font-family: monospace; } div.samplearea { ...続きを読む
-
背景画像を使うなら背景色の指定も忘れずに
div.sourcecode { background-color: #eeeeee; padding: 4px 4px 4px 20px; margin: 12px; line-height: 1.4; font-family: monospace; }背景画像だけの指定だと、文字が読めな...続きを読む
-
問題なく読めるのに「隠し文字」?
div.sourcecode { background-color: #eeeeee; padding: 4px 4px 4px 20px; margin: 12px; line-height: 1.4; font-family: monospace; } div.samplearea { ...続きを読む
-
画像の代替文字、ちゃんと読めてますか?
div.sourcecode { background-color: #eeeeee; padding: 4px 4px 4px 20px; margin: 12px; line-height: 1.4; font-family: monospace;}alt属性で代替文字を指定しただけでは不...続きを読む