BlogでHTML日進月歩

HTML及びCSSの理解を深め、Webサイト作成初級者からの脱却を目指します。

エントリー記事

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

このページの一番上へ

テキストの点滅とスクロール

HTML4.01で廃止されたblink及びmarquee要素を用いると、テキストを点滅させたりスクロールさせたりすることができます。しかし、これらの要素が廃止されたのには相応の理由があります。

  1. 点滅のペースやスクロールの速度に合わせなければ内容を理解できないため、閲覧者が自分のペースで文書を読むことができません。
  2. 点滅やスクロールに気を取られて肝心の情報に集中できなくなります。
  3. 中身にリンクが存在する場合、リンクをクリックしづらくなります。
  4. 利用環境によっては、要素の中身を無視するものがあります。
  5. 見づらいため、嫌う方が少なくありません。

これらの問題は特に、お年寄りや障害者にとって深刻です。公開した情報を誰にも不自由なく閲覧してほしいと考えるのなら、このような装飾は使わない方が懸命です。

スポンサーサイト

このページの一番上へ

代替テキスト(BlogPet)

セロリは
記述例困難p困難私は今日困難imgsrc=困難phone.gif困難alt=困難携帯電話困難/困難を買いました。
って言ってたけど…

著者
BlogPet(ブログペット)の「☆star☆
元の記事
代替テキスト

このページの一番上へ

お部屋探し!(その2)

昨日妹のお部屋探しをしましたが、今日は私のお部屋探しをすることに。昨日「最近は推薦入試での合格者が増加しており、この時期には早くも物件の争奪戦が繰り広げられている」と耳にしたのを受けて、まだ早いような気もしますがどのような物件があるのかだけでも見てみようと思いました。

昨日とは違う店舗に足を運びました。私は2004年春まで都会で一人暮らしの経験があるものの、生まれも育ちも田舎なので都会への憧れが大きくあります。でも大阪市内は予算的に無理があるので、その周辺をあたってみることにしました。

何よりも優先したいのは利便性です。物件の中身はそこそこのレベルなら問題ありません。

  • 駅まで徒歩10分圏内
  • 梅田駅(*1)まで電車で30分圏内
  • 買い物に困らない
  • 2点セパレート(*2)

これを満たす物件を探すのはそう難しくはありませんが、一番の問題は家賃です。これを極力低く抑えたいので、比較的安価な地域を中心に紹介していただくことにしました。店内の資料を見て4件に絞り込み実際に見てまわると、とてもいい物件が見つかりました!

お部屋が私を呼んでいる!(*3)

前日に続いての即決となりました(*4)。しかし、新しい住まいが決まっても安心していられません。諸事情あって次の仕事がまだ決まっておりませんので、一息つけるのは少し先になりそうです。

【注釈】

このページの一番上へ

お部屋探し!

先日妹が第一志望校に合格したので、早速お部屋探しに行きました。お店には、他にも新大学生らしき方が来店されていました。店員さんによると「最近は推薦入試での合格者が増加しており、この時期には早くも物件の争奪戦が繰り広げられている」とのことでした。元々即決するつもりではいましたが、これは一刻を争う展開のようです。

大学周辺は生活に不自由しない環境なので、場所は特に問題になりませんでした。問題は物件の中身でした。

  • オートロック
  • 3点セパレート(*1)
  • ガスキッチン
  • 大きなクローゼット

妹の希望を全て満たす物件を探すのは困難を極めました。「オートロック」や「クローゼット」は比較的多くの物件にありましたが、「3点セパレート」や「ガスキッチン」の物件は1人暮らし向けの物件ではあまり扱われていないようでした(*2)。少数ながらこれらの希望を全て満たす物件もありましたが、月々の家賃が高く予算オーバーしてしまうため断念せざるをえませんでした。

結局「オートロック」「大きなクローゼット」を最優先し、「3点セパレート」「ガスキッチン」については「いずれか一方のみ」がある物件に絞り込みました。3件を見てまわり、最終的に「ガスキッチン」を断念して「3点セパレート」の物件に決定しました。

夕食には、合格を祝ってホテルでディナーを楽しみました。バイキング形式で和洋中の料理を堪能しました!妹は小籠包が特に気に入った様子で、とても満足してもらえて良かったです。ちなみに私はカニ食べまくりでした。その後歩き方が何だかおかしなことになっていたのはきっと気のせいでしょう(笑)(*3)

【注釈】

このページの一番上へ

代替テキスト

画像を用いると、テキストよりも豊かな表現が可能になります。しかし、ナローバンド環境(*1)や携帯電話環境を中心に画像を読み込まないようにしているユーザーが存在します。また、音声ブラウザのように画像を視覚的に捉えられない環境が存在します。これらの環境を考慮して、画像には代替テキストの指定が必須とされています。

alt属性に記述するのは画像の説明でなく代替テキストです。画像の代わりに置き換えても意味の通じるテキストを記述する必要があります。

記述例
  • <p>私は今日<img src="phone.gif" alt="携帯電話" />を買いました。</p>
  • <p>私は今日携帯電話<img src="phone.gif" alt="" />を買いました。</p>

このように、同じ画像を指定しても記述の仕方により代替テキストの内容は異なります。

画像の中身を説明するにはlongdesc属性を利用します。画像を視覚的に認識できない音声ブラウザはlongdesc属性に記述されたアドレスへのリンクを生成します。

<img src="enquete.png" alt="2004年度アンケート集計結果" longdesc="enquete.html" />

単に装飾の目的で使われている画像の場合、alt=""と記述します。しかし、装飾画像は構造上の意味を持たないことより、スタイルシートを用いて背景画像として読み込ませる方が適切でしょう。

h3{ padding-left: 20px;
background: url(decoration.gif) no-repeat left center;
}

【注釈】

このページの一番上へ

新たな生活

妹の第一志望校の試験結果通知が届きました。先日第二志望校に合格しているとはいえ、やっぱりドキドキするものですね。妹も私も今日一日中落ち着きがありませんでした。

…… ………

結果は合格でした!!!(*1)

さて、休む間もなく忙しくなりそうです。妹の入学手続きや部屋探し。それに、私もこれを機に都会に出て転職する予定。しなければならないことがたくさんあります(*2)

…私のHTMLの知識ってビジネス向けじゃないかも?(涙)

【注釈】

このページの一番上へ

centerタグ,align属性からの脱却

<center>タグやalign属性は、横方向の位置を指定します。しかしこれらの情報は、例えば音声ブラウザにとっては全く意味を為しません。

これらは、スタイルシートで指定することができます(*1)

インライン要素の横方向の位置を指定

インライン要素の横方向の位置は、text-alignプロパティで指定することができます。ブロック要素にtext-alignを適用すると、その内部のインライン要素の横方向の位置を指定することができます。

h2{ text-align:right; }

W3Cの仕様においては、text-alignでブロック要素の横方向の位置を指定することはできないことになっています。しかし、Windows版Internet Explorerはブロック要素の横方向の位置も変更してしまいます。

開始点がバラバラで読みづらくなるため、テキストの中央寄せを嫌うユーザーは少なくありません。デフォルトの左寄せが最も見やすいとされているので、text-alignの指定は必要最低限に留めておく方が無難です。

ブロック要素の横方向の位置を指定

ブロック要素の横方向の位置は、marginプロパティで指定することができます。左右のマージンをautoに指定すると、対象となるブロック要素を中央寄せすることができます。

しかし、Windows版Internet Explorerにはスタイルシートの実装にバグがあり、互換モードでは左右のマージンをautoに指定しても中央寄せされません。代わりにtext-alignプロパティでブロック要素の横方向の位置を指定することが可能となっております。

<body>
<div class="all">
(中央寄せしたいボックスの中身) </div>
</body>

body{ text-align:center; }
#all{ margin:5px auto 10px; text-align:left; }

このように指定すると、W3Cの仕様に準拠したブラウザでもWindows版Internet Explorerの互換モードでもブロック要素を中央寄せすることができます。

【注釈】

このページの一番上へ

FC2ブログテンプレートカスタマイズ <!--index_area-->の利用

当ブログではブログペットを飼っております。コミュニティの形成に一役買っており、ネタとしても面白く気に入っています。

しかし、アクセス解析はAccessAnalyzer.com(アクセスアナライザー)のものを利用していますので、ブログペットを全てのページに設置する必要がありません。

テンプレート中で使える変数一覧を見ていて、いいものを発見しました。<!--index_area--><!--/index_area-->で囲われた部分はトップページのみにしか表示されません(*1)

結果的に、移動する際スクリプトを読み込む必要がなくなり、ページの表示速度が速くなりました(*2)

【注釈】

このページの一番上へ

インフルエンザ予防接種(2回目)(BlogPet)

きのうセロリで、予防ー!

著者
BlogPet(ブログペット)の「☆star☆
元の記事
インフルエンザ予防接種(2回目)

このページの一番上へ

インフルエンザ予防接種(2回目)

およそ2週間前に1回目の予防接種を受けましたが、今日は2回目の予防接種を受けました。

注射はほとんど痛くありませんでした。少しは慣れたのかも?私にとっては痛みよりもお風呂に入れないことの方が嫌ですねぇ。

1回目は2000円、2回目には1500円かかりました。思ったより高かったです。保険が適用されていないのかな?

このページの一番上へ

テキストの色と背景色

多くの視覚系ブラウザが白背景色に黒文字色をデフォルトとしていますが、古いブラウザではグレーの背景色が一般的でした。また、ユーザー側でデフォルトの文字色及び背景色を変更することができます。

例えばWebサイトの文字色がグレーであると仮定します。もし同時に背景色をしていなければ、どのような不具合が考えられるでしょうか。古いブラウザでは文字色、背景色共にグレーとなり、閲覧に大きな支障をきたします。黒背景色&白文字色に変更しているユーザーの場合、このWebサイトは黒背景色にグレーのテキストで表示され、読みづらくなる恐れがあります。テキストやリンクの文字色を変更したい場合には、必ず背景色を指定しておきましょう

背景画像を指定している場合でも、背景色を指定しておきましょう。ナローバンド環境や携帯電話環境を中心に、画像を表示しない設定にしているユーザーが居ます。このような環境においては背景画像が表示されませんので、場合によっては閲覧に大きな支障をきたす恐れがあります。

多くの視覚系ブラウザにおいて一般的な白背景色に黒文字色はコントラストが高く、ディスプレイ上では刺激が非常に強いという意見が少なくありません。回避策としてはテキストをグレーにする等が挙げられますが、あまり薄い色を選択するとテキストが読みづらくなってしまいます。充分にコントラストの高い配色にすることが望ましいでしょう(*1)

【注釈】

このページの一番上へ

検索キーワード(2005年11月分)

当ブログに検索サイトからお越しくださった皆様の検索キーワード(2005年11月分)を公開します。同義語は1つにまとめて集計しております。

ドラクエ2関連
ドラクエ2関連検索キーワード
検索キーワード HIT数
ドラゴンクエスト2,ドラクエ2 40
iアプリ,アプリ,iアプリ版 25
携帯 7
はぐれメタル 6
水の羽衣 5
ロンダルキア 3
ハーゴン 3
後編 3
攻略 3
n900is 1
稲妻の剣 1
いかづちの杖 1
テパ 1
合計 99

先月と比較するとHIT数は約3分の2に減少しました。ゲームをクリアされた方が増えてきたようですね。そろそろ下火でしょうか?

暖房器具関連
暖房器具関連検索キーワード
検索キーワード HIT数
カーボンヒーター,ハロゲンヒーター等 437
違い,特徴,性能等 115
ヒーター,遠赤外線ヒーター等 21
セラミックヒーター 16
暖房,暖房器具 9
縦長 5
電気代 4
電気ストーブ 3
換気 3
ヤマダ電機 2
エアコン 1
扇風機 1
部屋全体 1
合計 618

カーボンヒーターとハロゲンヒーターの違いがわからない方がたくさんいらっしゃるようです。私も調べるまでは全然わからなかったのですが、今は違いのわかるオトナになりました(笑)

HTML,CSS関連
HTML関連検索キーワード
検索キーワード HIT数
html 3
address 2
font-style 2
normal 2
斜体 2
表示 2
全て読み込む 2
html4.01 1
css 1
input要素 1
name属性 1
省略可能 1
テーブル内に画像 1
合計 21

先月とほぼ同数です。少しは訪問くださった方の役に立てたのかなぁ?

その他
その他キーワード
検索キーワード HIT数
じゃがまるこ 2
テレビ欄 2
及川光博 2
ブログ 2
日記 2
firefox 1
手帳の中身 1
占い 1
佐野元春 1
ファイナルファンタジー4のキャラクター 1
パソコン 1
一人暮らし 1
シースルー 1
合計 18

じゃがまるこの記事テレビ欄占いの記事等のページが検索にかかったようです。

…どうして「シースルー」?気になって調べてみると、「水の羽衣 シースルー」のキーワードで来訪された方がいらっしゃいました。

そんなものウチにはありませんよ(笑)

このページの一番上へ

連絡先、広告

copyright © 2005-2006 セロリ
Powered by FC2ブログ.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。