スポンサーサイト

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

このブログをLynxで見てみる

今回は,このブログをLynxで見てみます。
Lynxとはテキストベースのウェブブラウザで,最近のモダンブラウザではあってもなくても特に変化がない<link>要素のナビゲーションに対応していたり,そのほかにもこのような特徴が多いブラウザなので,Webページのアクセシビリティを検証するためによく利用されます。
Lynx for Win32 日本語対応版はこのページから入手できます。

lynxMyBlog1.png
ページ最上部には<link>要素で指定したナビゲーションが表示されます。
Lynxを使うとページ移動の操作も限られてくるのでこのナビゲーションの意味が身にしみて理解できます。
<h1>-<h6>要素は左端に詰められるみたいです。
リストは先頭に"*"がつきますね。

lynxMyBlog2.png
Lynxでは画像を表示できないので代わりにalt属性の属性値を表示します。
Lynxは画像へのリンクを選択したときの挙動(ローカルに保存,他のプログラムで開く,など)を設定できます。
<strong>要素は赤い文字列で表示されます。

lynxMyBlog3.png
テーブルは原則レイアウトを組んで表示できませんが,横幅内に収まるときはレイアウトを組めるときもあります。

lynxMyBlog4.png
プラグインのカテゴリ表示。
リストの子要素であるリストは先頭に"+"がつくみたいです。

lynxMyBlog5CommentForm.png
コメント送信用フォームです。本文を入力する<textarea>は縦に3行にしてます(同時にCSSでpixelも指定してますがw)
ちゃんと3行になってますね。
タイトルのフォームをフォーカスしても"No title"が消えないのはJavaScriptなので仕方ないですね。

lynxMyBlog6CommentList.png
コメント一覧はこのような感じに。なかなか分かりやすいんじゃないでしょうか?

lynxMyBlog7Archives.png
そして一番感動したのがここw
すごく見やすいと思いませんか?
このページに関しては僕のセンスがないせいで,スタイルを適用した方が逆に見づらい状態かもしれないです^^;
またやる気が起きたらこの部分のスタイルはいじくってみようかと思います。
HTMLでの意味付けが役立ってるーという実感がもっとも湧いた瞬間でした。


全体の感想としては……

HTMLでの意味付けをがんばった,自分!
Lynxで見てもなかなか分かりやすかったと思うよ(*´∀`)b
適切なHTML構造にすれば,操作性が多少アレだったり,スタイルシートが使えなかったりするウェブブラウザでも,Webページの内容をそれなりに理解することはできると思います。
なんかうさんくさいHTML解説書の冒頭文みたいになってしまったww

ここまでの文中で紹介しなかったLynxのレイアウトとして,

  • <p>要素は前後にからの行を入れる
  • 連続した<br>を1つの改行にまとめる

……などということもします。

コメント (-4)

No title

感想

めんどくさいから使わない

以上

> 名無しさん

ですか^^;

No title

正直,HTMLの勉強用って感じかな?
そういう時に使ったら見た目で見出しとかのミスがわかるからやりやすいかも。

> Darkさん

そうですね。そんな感じですね。
実際にネットを見るのに使ってる人がいたらすごいですよww

トラックバック (-0)

プロフィール

にじいろ
Author: にじいろ

2013.08.19(月)
生きてるよ(´・ω・`)
ついったーきてね @nijittn
カレンダー
<< 2017年08月 >>
- - 1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31 - -
アクセスカウンター
開設日:2009.01.01(木)
合計:
瞬間:
ブロとも申請フォーム
QRコード
QRコード
検索フォーム
フリーエリア

めがねくらぶ

列車フラッシュ撮影自粛同盟

Mozilla Firefox

GIFアニメ工房

消失同盟

XHTML 1.0 Transitional

CSS Level 2.1

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