第二のデジタル・デバイド出現。パソコンは30～50代限りで、高機能携帯でもう十分。
衝撃だった。パソコン（PC）が使えない団塊世代以上の高年齢層の断層を「デジタル・デバイド」と呼ぶが、第二のデバイドが出現したのだ。20代の若年層である。まさか、と思うなかれ。高額のパソコンを持たない彼らは、インターネット利用を安価な携帯電話で済ませてしまう。PC族と携帯族の「デバイド」――それはネットにも「下流社会」が出現したことを意味する。
今まで当サイトのサイト内検索は、Movable Type 標準の検索機能を使っていましたが、これがなかなか重たいのと、検索精度もイマイチなので変更することに。
で、以前にも紹介したとおり、Google からリリースされた、カスタムサーチエンジン制作機能、「Google Co-op」 を利用して、サイトのデザインに合わせたサイト内検索を実現してみることにしました。
今さら聞けない! HDMIバージョンの違い！
まず、「HDMIって何？」と仰る方むけに、『HDMI』について簡単に説明しましょう。
『HDMI』は、たった一本のケーブルで、映像と音声を高品位なデジタル信号でやり取りできる、最新のインターフェイス（接続）規格です。
複数の映像ケーブルや音声ケーブルを必要とする、従来のアナログ方式に比べ、接続がシンプルで簡単という大きなメリットがあります。 また、やり取りできる映像や音声の品質が高く、伝送中の劣化も皆無な事から、AVファンにも注目されています。
今後、『ブルーレイ』や『HD DVD』といった次世代DVDプレーヤーを、高性能テレビ（モニター）へ接続する場合など、この『HDMI』が主流になりますので、しっかりと理解しておきたいものです。
はてなは、動画共有サイト「YouTube」の人気動画を自動再生するサービス「Rimo（リィモ）」を2月16日より開始する。利用は無料。
Rimoは、YouTubeで公開されている動画の中から、アクセス数などに基づいたはてな独自のアルゴリズムによって「人気がある」と判別した動画を自動再生するサービス。動画は類似したジャンルやカテゴリーごとに分類され、テレビリモコンをモチーフとしたインターフェイスからチャンネルを切り替えて視聴できるほか、再生動画のスキップや音量調整も行なえる。なお、利用にはFlash Playerが必要だ。
また、任天堂のゲーム機「Wii」向けのインターフェイスも用意しており、Wiiの「インターネットチャンネル」経由でアクセスすると、Wii専用のRimoが表示される。今後は、チャンネル追加やコンテンツのピックアップ精度向上などの機能追加を行なっていくという。
特長のありありのsubmitボタン
いたって普通
なかなかシンプル
フッター部分のメニューなどを区切る際のサンプルを適当に。
p要素でやるとこんなヤツです。
Home｜アバウト｜イラスト｜BBS
サンプルに使うhtmlは、ul要素を使った下記をベースに使用してます。（サンプルに寄ってid名とか変わりますが）
<ul id="sampleFooter">
<li><a href="/">Home</a></li>
<li><a href="/">About</a></li>
<li><a href="/">Gallery</a></li><li><a href="/">Blog</a></li>
</ul>
実際の表示です。
* Home
* About
* Gallery
* Blog
htmlはこんな感じに。（｜取って最初のメニューにclassを追加）
<ul id="sampleFooter_02"> <li class="sampleFooterHome"><a href="/">Home</a></li> <li><a href="/">About</a></li> <li><a href="/">Gallery</a></li><li><a href="/">Blog</a></li>
</ul>
cssはこんな感じです。
#main #sampleFooter_02 {
text-align:center;
}
#main #sampleFooter_02 li {
display:inline;
list-style-type:none;
margin-right:6px;
padding-left:10px;
border-left:1px solid #999;
}
#main #sampleFooter_02 li.sampleFooterHome {
border-left:0;
padding-left:0;
}
普通に縦線を書いた感じ
* Home｜
* About｜
* Gallery｜
* Blog
普通にhtmlに｜を記述しているのでソースは当然下記のように。
<ul id="sampleFooter"> <li><a href="/">Home</a>｜</li> <li><a href="/">About</a>｜</li><li><a href="/">Gallery</a>｜</li>
<li><a href="/">Blog</a></li>
</ul>
cssはこんな感じです。
#main #sampleFooter_01 li {
float:left;
list-style-type:none;
}
floatして、リストのマークを消しているだけ。
主観ですけど、リストでこのやり方をするならp要素で普通に区切った方が良い気がする。
borderを使って区切っているように見せる
実際の表示です。
* Home
* About
* Gallery
* Blog
htmlはこんな感じに。（｜取って最初のメニューにclassを追加）
<ul id="sampleFooter_02"> <li class="sampleFooterHome"><a href="/">Home</a></li> <li><a href="/">About</a></li> <li><a href="/">Gallery</a></li><li><a href="/">Blog</a></li>
</ul>
cssはこんな感じです。
#main #sampleFooter_02 {
text-align:center;
}
#main #sampleFooter_02 li {
display:inline;
list-style-type:none;
margin-right:6px;
padding-left:10px;
border-left:1px solid #999;
}
#main #sampleFooter_02 li.sampleFooterHome {
border-left:0;
padding-left:0;
}
さっきfloatでやりましたけど、display:inlineでやってセンタリングするとこんな風になります。
見易さの為にli要素毎に改行してますが、改行すると数pxの隙間が出来るので、paddingとmarginを上手い具合に調整してあわせます。
改行しない場合はソースがちと見難いっすけど、paddingとmarginは同じ値でキレイに揃います。
.sampleFooterHome はHomeの左の縦線を消す為に、classを追加してます。
色がすぐに変えれるっていう利点は有るけれど、borderでやってるいじょう縦線が文字の高さより大きくなってしまうのがいけてない。。。
画像で区切ってみる
実際の表示です。
* Home
* About
* Gallery
* Blog
ソースはborderと同じなので割愛。
CSSは以下のようになる感じです。
#main #sampleFooter_03 li {
float:left;
list-style-type:none;
margin-right:10px;
padding-left:15px;
background:url(../img/list_subcategory.gif) no-repeat left center;
}
#main #sampleFooter_03 li.sampleFooterHome {
background-image:none;
padding-left:0;
}
基本はborderと同じで指定を画像に変えただけです。
画像の1番の利点はやっぱり見栄えですね。
区切りっぽく見える画像なら何でもいいんで、デザインにこだわる場合は背景画像で指定するのが良さげです。
あと、margin-leftとpadding-rightの組み合わせを使わないのは、IEのmargin2倍のバグ対策です。
↓知らない人はここ参照で。
上記のサンプルを隣接セレクタでやる
ントはコレが書きたかっただけなんす。
と、いう事で今までのはこのサンプルを書くための布石みたいなノリです。
実際の見た目は今までと殆ど変わらないです。（IE6はダメですが）
* Home
* About
* Gallery
* Blog
ソースはこんな感じにスマートに。
<ul id="sampleFooter_04"> <li><a href="/">Home</a></li> <li><a href="/">About</a></li> <li><a href="/">Gallery</a></li><li><a href="/">Blog</a></li>
</ul>
CSSは以下のように。
#main #sampleFooter_04 {
text-align:center;
}
#main #sampleFooter_04 li {
display:inline;
list-style-type:none;
margin-right:6px;
padding-left:10px;
}
#main #sampleFooter_04 li+li {
border-left:1px solid #999;
}
隣接セレクタ（+）で指定する事で、余計なclassを追加せずに済みます。
で、コレがめでたくIE7で対応した訳ですよ。
つまり、もう使っても問題が無いテクニックの一つだと思うのです。
HTML
強調されてるところが味噌な行。それ以外はとりあえずの見栄えの設定になっています。
コピーペーストですぐに使用できるように作りましたが、id名、marginやcolorプロパティなどはサイトに合わせて適切に変更してください。
CSS
ul#globalNavi {
margin: 0;
padding: 0;
width: 500px;/* 必ずwidthの設定をしてください */
}
ul#globalNavi::after {
height: 0;
visibility: hidden;
content: ".";
display: block;
clear: both;
}
ul#globalNavi li {
margin: 0;
padding: 0;
float: left;
width: 120px;
line-height: 1;
list-style-type: none;
}
ul#globalNavi li a {
padding: 0.6em 10px; /* ボタンの厚みはここで調整 */
display: block;
position: relative; /* IE6でマウス反応領域がおかしいのをFix */
font-size: 12px;
color: #333;
text-align: center;
text-decoration: none;
background-color: #eee;
}
ul#globalNavi li a:hover {
color: #000;
background-color: #ddd;
}
れを基本に、背景画像を入れたりpaddingを調整すれば色々作れるはず。
li要素がフロートすることによって、包含ブロックであるul要素は高さの算出する子要素がなくなり、ぺっちゃんこになってしまうので、擬似要素によるクリアをコード中にいれています。もし、MAC IEに対応する必要がある場合は、ul#globalNaviには次のコードを追加してください。
ul#globalNavi {
margin: 0;
padding: 0;
width: 500px;
/* for MacIE5.x \*//*/
overflow: hidden;
/* end */
}
WIN IE6では親要素がposition: absoluteしないと何故かA要素のマウス反応範囲が消えてしまうので、absoluteしない場合はA要素にposition: relative;が必要。
新しくパソコンを購入した場合や、メモリを増設した場合にはメモリテストが必須です。メモリのエラーはハードディスクのエラーと違って見分けにくく、ウインドウズの調子が悪いのかな？というように誤解しやすいためです。また、購入直後であれば初期不良ということで無料でメモリが交換可能な場合がほとんどです。そのため、とりあえずメモリテストは必須。
今回のフリーソフト「MemScope」はそういったメモリテストツールの一つ。特徴は、このソフトがもともとフリーではないと言うこと。ハードウェア全体のエラーを調査して診断するソフトウェアを開発している「Micro2000」というマイクロソフト認定パートナー（マイクロソフトは高い技術力のある IT関連企業を認定パートナーとしている）が販売しているソフトウェア「Micro-Scope」に採用しているのと同じ機能なのです。そのため、信頼性はかなり高いと判断していいはず。
実行するにはフロッピーディスクやカラッポのCD-R、あるいはUSBメモリなどの起動可能なメディアが必要。公式サイトの説明ではどれでもいけるようですが、今回はフロッピーディスクで挑戦します。
以前のエントリーでユニバーサルセレクタを用いてデフォルトのCSSをリセットするという記事を書きましたが、どうやら海の向こうではもうそれは時代遅れのようです。
今月号(2007年3月)のWebDesigningにも大藤幹さんが同様のことを書いていらっしゃいますね。ユニバーサルセレクタを用いた手法というのは今後すたれていくのかな・・・
何故*セレクタを使った手法が時代遅れなのか？それが気になるところですが、主な理由として挙げられているのは下記のようなもの。
* レンダリングが遅くなる(重くなる)。大きなページは特に。
* 良いデフォルトのスタイルを無駄にしてしまう。(例えばサブミットボタンなど)
確かに一度全てのスタイルをリセットして、再び上書きをするわけですからやり方的にはあまりスマートではないですね。これらを解決する手段としては、使用するタグごとに個別に指定してあげるというやりかたが良いようです。例えば下記のようなもの
html, body, {
margin: 0;
padding: 0;
}
h1, h2, h3, h4, h5, h6,
p, pre, blockquote,
ul, ol, dl, address {
margin: 1em 0;
padding: 0;
}
Yahoo UI LibraryのYUI Reset CSSを参考にするのも良いかもしれません。YUI Reset CSSでは*セレクタを使ってリセットする代わりに、最初に下記のように書いています。
body,div,
dl,dt,dd,ul,ol,li,
h1,h2,h3,h4,h5,h6,
pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
body {
background-color:#ebebeb;
margin:0 auto;
background-image:url(../img/bg.jpg);
background-repeat:repeat-y;
background-position:top center;}
body #page{background-position:top center;
margin:0 auto;}
cssの中央レイアウト firefox
cssの中央レイアウトの時に
body{text-align:center;}
としますが、
firefoxでは左寄せになり、テキストだけが、中央になります。
ie7では問題ありません。
firefoxでの中央レイアウトはどうしてますか？
ボックスを中央に作りその中に入れる
body {
text-align:center;
}
#page {
width:600px;
text-align:left;
margin:0px auto;
padding:0px;
border:1px solid #666666;
}
Webデザインには、どんなにビギナーだったとしても、プロのWebデザイナーを名乗る人がやってしまうと恥ずかしい“マナー”ともいえる制作上のルールがあります。「知らなかった」、「教わっていない」では通用しません。なぜなら、アナタはプロなのですから。
そんな超基本の“Webデザインのお作法”を50個選定し、サイト設計、テキストデザイン、画像と色彩、レイアウト、その他の5つのテーマ別に解説していきます。この特集を通して、“Webデザインのお作法”をしっかり習得、あるいは復習して、カンペキに身に付けてください。
設定画面より、PDF文書をページ単位で分割できるシェアウェア版へ切り替え可能。
PDF文書同士の結合やパスワードの設定も可能なPDF文書作成ソフト「PDF reDirect」v2.1.6が、2日に公開された。Windows 95/98/Me/2000/XP/Server 2003に対応するフリーソフトで、現在作者のホームページからダウンロードできる。
@charset "utf-8";
/*
Share Style [
----------------------------------------------------------- */
* {
margin:0;
padding:0;
}
body {
background:#FFF url(../img/bg.gif) no-repeat left top;
font-family:Verdana, "ＭＳ Ｐゴシック", sans-serif;
font-size:80%;
}
html {
overflow-y:scroll;
}
h1,h2,h3,h4,h5,h6 {
}
p,li,dt,dl {
line-height:1.6;
}
p {
margin:0 0 1em 0;
}
li {
list-style-type:none;
}
img {
border:0;
}
address {
font-style:normal;
}
.clear {
clear:both;
}
①A HREF="javascript:window.history.back();">一つ前のページに戻る。
②確認画面や複数ページにわたる入力画面などでよく使われる、前の画面の入力フォームに戻る機能を実装するための『戻る』ボタンと、次の画面に移動する際の『次へ』とかのボタンの実装方法についてかかれてます。
例で挙げられているはてなが使ってたらしい実装方法
input name="mode" type="submit" value="もどる">
input name="mode" type="submit" value="申し込み">
確かにこれだとテキストフィールドなどにフォーカスがある際にエンターキーを押されると前のページに戻ります。
実装方法としては好ましくないでしょう。
次に例で挙げられてるものは
input value="もどる" onclick="location.href='./credit'" type="button">
input value="申し込み" type="submit">
というもの
前述の例が前画面に情報をsubmitするのが目的だとしたら、これは純粋に前に移動する機能を実装する為のになってしまいますのでサーバーサイドでの処理が全く変わってきます。
これは先ほどの例と違いエンターを押すと次のページに戻るボタンを押すと前のページに移動します。
ただこの場合javascriptがoffの場合は戻るボタンが動作しません。
（javascript offの場合まで考慮されているのが素敵過ぎます）
次に例に挙げられているのは
input value="もどる" onclick="history.back();" type="button">
input value="上記内容で登録する" type="submit">
これだと戻る機能と戻った後に前に入力していたデータ(input要素のtype属性がpasswordやfile以外の場合)が消えずに残っているのでサーバーサイドでの処理は必要ありません。
ただ、前述の例と同じくjavascript offの場合動作せず特定の環境では入力していたデータが消えてします。
(ただ処理がすごく簡単なんで私はこの方式をいつも使います。)
で、鷹の島さんが暫定的に使ってる『戻る』機能は
a href="hoge.cgi" tabindex="-1">
input name="back" type="button" value="戻る" onclick='location.href="hoge.cgi"'>
input name="send" type="submit" value="送信">
結構素敵な書き方だと思います。
ただこれだとやはり『前のページに移動する』機能の実装なので『前のページにデータを送る』機能にはなりません。
ボタンの位置は視角表現なんでcssでやってソースコード上は機能を優先すれば?
というのはどうでしょう
input name="mode" type="submit" value="申し込み" style="float:right" />
input name="mode" type="submit" value="もどる" style="float:left" />
画面の中央にボックスを配置したいと思ったことはありませんか？ 今回は左右の余白だけでなく、上下の余白も均等にとる方法です。 ミニマムなデザインのページを作るときに役立つでしょう
body{
background-image:url(../../img/back.gif);
margin:0px;
padding:0px;
}
div#main{
background-image:url(../../img/sub-back.jpg);
overflow:auto;
height:400px;
width:600px;
position:absolute;
top:50%;
left:50%;
margin-top:-200px;
margin-left:-300px;
}
body直下にID：mainのボックスを配置して作っていくとサンプルのようになります。
解説
最初にposition:absolute;とtop:50%;とleft:50%;を使ってmainボックスの基点を 画面中央に持ってきます。
その後margin-top:-200px;とmargin-left:-300px;をつかってmainボックスの高さと幅の半分だけ、 上と左にずらしてあげれば、見事画面中央に配置されます。これが今回のからくりです。
heightとwidthも%で指定したいところですが、%で指定するとレイアウトが崩れてしまいます。 pxで指定してください。あとoverflow:auto;を指定して内容が多くなった場合に備えることも重要です。
ある程度ならウィンドウの大きさを変化させても対応できますが、あまりにも小さくすると、見えないところが出てきます。
中央配置のデザインで、ページ移動の際にコンテンツの量によってスクロールバーが出たり出なかったりするFirefoxさん。
あのズレ、気になる人っていますよね？
すぐ分かるように簡単なサンプルを用意しました。
http://css-happylife.com/template/11/
あ、当たり前だけど、Firefoxで見て下さいね。
コレを解消する為に以下のスタイルを適用させればズレがなくなります。
html {
overflow-y:scroll;
}
簡単っすね。
で、コレOperaじゃ解決出来ないのが難点。
overflow:scrollでズレないようには出来るけど、下が出ちゃうのはいけてない。
height:100%とかでもバーが出っぱなしにはなるけど、びみょーに出てはいけないバーまで出てしまう。
んーこの辺まで解決したかった…
テーブル全体にボーダーを表示する
table { border-collapse: collapse; }
td { border: 1px solid #808080; }
各所ですでに話題ですが、自分へのメモ書きもかねてまとめておきます。Illustratorのチュートリアルを40個まとめた記事です。デザインがますます重要になっている昨今、常に技を磨いておきたいですね。
本日は、実用的なCSS（スタイルシート）のお話。CSSコーディングを始める一番最初にbodyタグに設定しておくと、結構便利かな？と思われるポイントをまとめてみました。。
body {
margin: 0;
padding: 0;
line-height:1.4;
color:#333;
font-family:Arial, sans-serif;
font-size:0.9em;
}
HTMLタグの語源、つまりそれぞれのタグは何の略かというのをまとめてみました。
正しい意味を知ることは正しいマークアップ（僕は効率主義なので不適切な箇所は多いですが）への第一歩ですね。あんまいないかもしれませんが、これからタグを覚えようと思っている方にどうぞ！
さて、詳細は以下です。
※buttoon等明らかなものは省いています。
※英語は得意ではないので名詞・動詞・形容詞・複数系などおかしいかもしれません。
参考になりそうなきれいなデザインやツール類があったのでご紹介。これからFavicon（ファビコン）つくるぞー、という人はよろしければどうぞ（それよりもこのブログのFaviconをなんとかしなくては・・・）。
Inspire Yourself: 50 Remarkable Favicons | Smashing Magazine
- favicon.ico の作り方
要するに Windows icon ファイルを作ればいい。
まず、元となる画像を作る。ビットマップでも png でも何でもいい。次に、icon 形式に変換できるツールを使うか、Chami.com の "FavIcon from Pics" のような変換サービスを利用するなどして icon ファイルを得る。
Chami.com FavIcon from Pics
http://www.chami.com/html-kit/services/favicon/
●float:leftで並べる
●アクセシビリティ的に良さげなタイプ
●>を画像にする事で、altに「の中の」を入れ、音声ブラウザなどで『ホームの中のサービスラインナップの中のウェブサイト制作』と読ませる。
●classを追加して>を消すタイプ
●:after要素を利用したタイプ
●右寄せバージョン
●display:inlineで並べたバージョン
●ol要素
