930192
ホーム \| 日記 \| プロフィール	【フォローする】【ログイン】

Web標準にアプローチ　〔まいまいのお宿。〕

[Web標準] カテゴリの記事

全64件 (64件中 1-50件目)

1 2 >

いわゆるJISの文字コード宣言

「いわゆるJISの文字コード宣言ってどう書くんだっけ？」すごく久しぶりに雑記帳へメモします。ほとんどが UTF-8 でホームページを組んでいるので書き方を忘れてしまいました。いわゆるJISの文字コード。「jis」じゃないんですもんねぇ（^^;）他の書き方も一緒にメモしておきましょ。ISO-2022-JP@charset "iso-2022-jp";Shift_JIS@charset "shift_jis";EUC-JP@charset "euc-jp";UTF-8@charaset "utf-8"＊近況＊携帯向けサイトを作っております。自分用でなくて、お仕事なんだけれども。わからんことだらけですよぉ～。検証もつらいところですねぇ。でも小さな世界は、ちょっと面白くもあるのです。携帯サイトコーディング＆デザインこういうものを参考にがんばります。★携帯サイト作成の参考に・・・携帯サイトを作ろう！　-ちょっと詳しいモバイルサイトの作り方-ke-tai.org ケータイサイト開発のためのコミュニティサイト携帯サイトをつくろう。 | 携帯サイト制作のために役立つ情報満載サイト･････つづく散文誌・３６５（お休み中）*Web標準関連記事* Javascriptによるスタイルシート切替でCSSレイアウトの位置ズレをカバーするCSSでidを指定する時は要素名とセットで記述行間指定「line-height」の使い方@importを使って外部スタイルシートを読み込む CSSで背景画像の位置設定をするときのこと h1要素（タグ）の適正な使い方についてふと気づく

2009/04/25

コメント(0)
CakePHP　レポート　其の壱

「XAMPPでローカル環境を作って試用中です。」WindowsXP環境下にXAMPPを走らせてPHPのフレームワーク「CakePHP」を使ってみることにしました。かれこれ１年位前に、gihyo.jpで連載が始まったのがきっかけで知りました。「Cakeは簡単って言うけど、フレームワークって難しそうだしなー」って思いながら、ずるずるずると１年が経過･･･忘れないように覚書きです。------------------------------------------リファレンス、チュートリアル、フォーラムともに日本語で公開されているのがありがたい。⇒CakePHP プログラマーズリファレンスガイド（チュートリアルは、ページの真ん中より少し下までスクロールしたところにあり）⇒フォーラム - CakePHP Users in Japangihyo.jpの連載は、とっつきやすいのでオススメ。インストールはものすごく簡単。基本コピペ。あとパッパと書き加えて･･･⇒CakePHPで高速Webアプリ開発CakePHPはutf-8で記述されるのでビュー（表示部分）を作成するときは、utf-8で保存することに注意。日本語部分の表示にはエンコーディングも忘れずに！どっかに文字コード設定があるはずだなー。コマンドプロンプトでDBのテーブルの中身を見ながら表示を確認したり、データを放り込んだりするとスムーズに学べる。うーん。出来上がってきた表示を見るとXML宣言を書く派の私には少～し難ありだけどこれは自分で書き加えればOKな範囲。mod_writeも有効にしておきたいところなので「A.5. mod_rewrite について」を参考に変更してみると･･･失敗！アチャー！Apacheのバージョンは、2.2.6なので「AddModule mod_rewrite.c」の記述は必要ないようです。⇒フォーラム：インストールの説明（２年ほど前のトピですが、参考になりますよ～）------------------------------------------最初は、ぽっつぽっつと躓きますね～これはなんでも仕方が無い！ローカル環境に入れたいものはCakeだけじゃなくてMTやEC-CUBEやWordpressなんかもね。hobomixi.com のサーバをサッパリと整理したいもんなー。＊近況＊デジタル一眼欲がちょっとだけ向上しつつあります。キャノンの色が好きかなー。ダカフェ日記の色が好みです。写真集買っちゃおうかなー・・・とかブツブツと思っていますぅダカフェ日記･････つづく散文誌・３６５*Web標準関連記事*Javascriptによるスタイルシート切替でCSSレイアウトの位置ズレをカバーするCSSでidを指定する時は要素名とセットで記述行間指定「line-height」の使い方@importを使って外部スタイルシートを読み込む CSSで背景画像の位置設定をするときのこと h1要素（タグ）の適正な使い方についてふと気づく

2008/08/09

コメント(0)
<h1>要素（タグ）の適正な使い方についてふと気づく

「h1要素ってのは、そのページ内で一回しか使わないもの、使えないものだから･･･」鳥のミンチをこねながら、「記述」について考えた。ふと思った。それが h1要素のこと。ふと思ったら、気になって仕方がない。h1要素って、ほら、SEO的にも重要なウェートを占めるし。頭の中に沸々と湧き上がってきたものを書き留めてみると･･･title要素とh1要素は、当たり前だけど役割が違う。違うけれど、サイトのタイトルとh1要素に書くものってニア～イコールっぽくないかい？でもさ、なんか違う。違うんだよね。例えば「Web標準にアプローチ」ってサイトがあってこのブログのように、一番上に、タイトル画像がデーンってあったりしたらその子は、h1要素で書いちゃったりしないかい？でも記事の中に入ったり、プロフィールのページとか見たりしたらどうだろう？やっぱりサイトタイトル（ブログタイトル）に当たる部分がh1要素？その時は、記事のタイトルだったり、「プロフィール」だったりがh1要素？？？全ページ共通なのがh1要素･･･でいいのかな。なんか違う気がしてきた･･･うーむ。夕食に鳥のミンチをどうにかしたものを食べてからちょっと調べてみた。まー！ヒット！ヒット！大ヒット！ちょくちょく見に行く、ミツエーリンクスさんのWeb標準Blogのかなーり古い記事に「<h1>要素の扱い」を発見！同じこと、思うもんだなぁ～知っとけよ！ってなことかもしれないね。つっこんで追求したことなかった･･･今日まで。詳しくは、「<h1>要素の扱い」を読めば、納得いくと思います。合わせて、日本語化された仕様書にも目を通しておこうね。⇒7.5.5 見出し: H1、H2、H3、H4、H5、H6要素時と場合と採用基準によるもんだけどh1要素は、そのページの見出しとして話題・内容を短く述べたものと思えばいいと読み取りました。結論としては、このサイトを例にするとトップページでは「Web標準にアプローチ」をh1要素としプロフィールとか中のページについては「プロフィール」や記事のタイトルをh1要素とする。ここじゃ無理だけど、記述の仕方、変えなくちゃ＊オマケ＊楽天のブログじゃ使えないけど、AddClipsって便利だよー。ソーシャルブックマークボタンをごっそりセットで簡単に貼り付けられるの！＊近況＊ブレイブ・ストーリー（中）これ、やっと上巻へ突入です。何ヶ月かかってるんやろ（汗）･････つづく散文誌・３６５*Web標準関連記事*Javascriptによるスタイルシート切替でCSSレイアウトの位置ズレをカバーするCSSでidを指定する時は要素名とセットで記述行間指定「line-height」の使い方@importを使って外部スタイルシートを読み込む CSSで背景画像の位置設定をするときのこと

2008/04/17

コメント(13)
リンクテキストを「text-indent:-9999px」でふっ飛ばすときについでにしておくこと

詳解HTML ＆ CSS ＆ JavaScript辞典第3版スタイルシート・デザイン「CSSで画像のリンクボタンを作るとき、ちょっとだけ気を使っておくってことで。」前回に続いて、これもまた大抵のブラウザでは、そんなことにはならないので一応、覚えておくなり、一応、書いておこうかな？程度でいいようなメモです。CSSでレイアウトをするとリンクボタンは backgroundを使って記述してやりますね。で、大抵、テキストリンクの設定と画像ボタンを作るときの設定って「text-decoration」に関しては違うと思うんです。テキストリンクのときは、下線を引くことが多いし画像には必要ないシロモノですね。リンクに関して、「hover」のとき「text-decoration」の設定を「none（無し）」と記述していないと場合によっては、びよーんって下線が延びて出てしまうことがあるんです。IE、Firefox、Opera、Safariはオッケーです。問題なし（私は遭遇していない）。a { color: #00f;}a:hover { color: #f00;}a.menu { display: block; background: url(menu1.gif) no-repeat; text-indent: -9999px; text-decoration: none;}a.menu:hover { background: url(memu2.gif) no-repeat; text-decoration: none;}あんまり役に立たないかもしれないけれど（生きる機会が少ないから）防げるものならシェアが少なくても防ぎたいので今度からは、画像のリンクボタンを作るときは念のために「none」にしておくことにします。２週間も書いていないと、さすがにWebスカウターの数値が落ちるね（笑）そっちは落ちても、アフィリの成果はちょっとだけイイ最近本当に下火だったからな～Google AdSenseもちょっとだけよかったりする♪お気に入りブログに登録してくれた人がいたことも、この期間で嬉しかったことのひとつ。嬉しいメッセージももらったしな～（＾▽＾）･････つづく東京２３区中心・駅近ホテルズ｜散文誌・３６５*Web標準2007年版目次*基準のソースコード文字コードは「Shift-JIS」か「EUC-JP」かJavascriptによるスタイルシート切替でCSSレイアウトの位置ズレをカバーするCSSでidを指定する時は要素名とセットで記述HTMLのDOCTYPE宣言は軽視できない行間指定「line-height」の使い方@importを使って外部スタイルシートを読み込む CSSで背景画像の位置設定をするときのこと

2007/07/23

コメント(4)
CSSで背景画像の位置設定をするときのこと

これならわかるWeb標準サイトの作り方入門の入門スタイルシート・デザイン「背景画像の設定の無難な記述とは？」全部スタイルシートで組むことなんて、まずなかったので色んな壁にぶち当たりました。ブログを書いていなかった期間にしていたお仕事。むぅ～むぅ～と思っていたけれど書いてみると、意外と作業量が軽減されるような気がします。最近またまたブラウザ戦争ですか。いっぱいあるな～普通に作って、最新版のブラウザで、ある程度シェアのあるブラウザなら問題ないことなので今回メモする背景画像の設定の件は頭の片隅に置いておくと役に立つかもしれない程度の事柄です。背景画像の位置を指定するときには、よく「left top」とか「center top」とか記述しますね。それより頻度は低いと思いますが「10px 5px」とか「-1px 10px」とか書くときもあります。でもね、コイツがちょっと曲者で、必ずそうなるわけではないようなんだけれども数値指定すると、背景が飛ぶ！なくなっちゃったんです。もしも、そんなことに遭遇したら、ちょっと手直しが必要です。IE7はどうかな～そこまで酷くはないようだけれど。手直しとしては、「center」「left」「right」「top」「bottom」で設定できるように画像を作り直してやる！広くブラウザをサポートしてあげようと思ったら最初からそうしておくことをお勧めします。身のためといったほうがいいかもしれないな。今度から、ぜ～んぶ、そういう設定にしようっと。なんでもそうだと思うんだけれど、ちょっと色んな設定ができる場合一番シンプル、より古風だったりCSSじゃなくて、HTMLだけで設定できるのと似た値を設定してやるほうが「くそォ！」と思うことが少ないように思います。複雑になるほうが、手直しも大変だもんね！今回のお仕事の教訓でした。■背景画像の設定に関する記述background:#fff url(bg.jpg) repeat-y center top;#fff⇒背景色／url(bg.jpg)⇒背景画像／repeat-y（背景画像の繰り返し）center⇒x軸方向の位置（左右）／top⇒y軸方向の位置（上下）※もしも数値指定をするときは、xとyの順番にご注意！実に約２週間ぶりのブログです。これを知った時に書き留めておきたかったのだけれど書くより寝たかった！（笑）さて、もうひとつ書きますよ。無難な記述の一例を。･････つづく東京２３区中心・駅近ホテルズ｜散文誌・３６５*Web標準2007年版目次*基準のソースコード文字コードは「Shift-JIS」か「EUC-JP」かJavascriptによるスタイルシート切替でCSSレイアウトの位置ズレをカバーするCSSでidを指定する時は要素名とセットで記述HTMLのDOCTYPE宣言は軽視できない行間指定「line-height」の使い方@importを使って外部スタイルシートを読み込む

2007/07/23

コメント(0)
余白（margin／padding）にマイナスの値を使うべきではないのか

これならわかるWeb標準サイトの作り方入門の入門CSSによるWebデザインカスタマイズガイドCSSビジュアルデザイン・メソッド「CSSには、マイナス値は使うべきではない？」久しぶりに、CSS濃度の高いサイト作りをしています。あーれや、こーれやと、ボックスを上下左右していてなーんとなく、marginの値にマイナスを入れたら簡単そうな場面に出くわしました。そこで、ちょっと疑問。マージンって、余白って、マイナスの値OKなんだろうか？困ったり、自信がなかったりした時、開く本がWeb標準の教科書。それによると、マイナスの値はＯＫであると書かれている。で、実際に記述してみて、結果、レイアウトの崩れもなく、成功したんだけれどどーも、気持ち悪くてね。余白にマイナスってどーよ？現実問題ありえないわね～W3C CSS 検証サービスでチェックしてみても問題ないですよ～ＯＫですよぉ～って結果が出たにはでました。ネットで調べてみると、WinIE6などでレイアウトが崩れる～とかできるなら、そうすべきでない！とか、強行手段だ！みたいなことも載っているのね。んならば、マージンで、あーだこーだすることを避けてみるか。どーしよっかな？と思って、思いついたのがfloatを使うやり方ね。ちょっと自分メモ。<div id="header">ヘッダー部分</div><div id="contents"><div id="menu">メニュー部分</div><div id="main">コンテンツ本体部分</div></div><div id="footer">フッター部分</div>こんな感じだったと思う（汗）こういうHTMLで、CSSは以下のように設定するタイプね。あってるよな？#menu { width:200px; float: left; }#main {width:600px; float: left; }#footer { clear: left; }今日は、float に助けられた一日でした。リスト要素を使っていて、メニューを作るのに画像を使ったらWinIEでヘンテコ不可解マージンが登場してね。その時も、float:left で流し込んだら余白が消えて、オオ！素晴らしい余白の設定値をゼロにしたり、高さを与えたり、色々弄くったけれど、floatで解決！本日の教訓。力技CSSレイアウトはやっぱりよくないんだ！場数を踏まないとねぇ～なかなかですが（笑）･････つづく東京２３区中心・駅近ホテルズ｜散文誌・３６５*Web標準2007年版目次*基準のソースコード文字コードは「Shift-JIS」か「EUC-JP」かJavascriptによるスタイルシート切替でCSSレイアウトの位置ズレをカバーするCSSでidを指定する時は要素名とセットで記述HTMLのDOCTYPE宣言は軽視できない行間指定「line-height」の使い方@importを使って外部スタイルシートを読み込む

2007/06/24

コメント(0)
ハイブリッドなホームページづくり

「やっぱりハイブリッドなホームページづくりが現実的かな。」　　　　　　▲名古屋中央郵便局から見た名古屋駅前　　　名駅前をブラついてきました♪ハイブリッドなホームページづくりをすることが最近とっても多いです。トコロ変われば、作り方が変わり関わる人が変われば、これまた作り方は変わるんよなぁ～Dreamweaverとezhtmlでホームページを作っているんだけどねDreamweaverで作ると、勝手にborder属性がついてくるんだよね～いちいち取り除きながら作るのは、めんどっちぃから最後に属性丸ごと削除して仕上げるようにしています。Dreamweaverには、そういうことができる機能があるんです。便利ね～。検索＆置換をうまく使ってあげるとWeb標準にアプローチしたハイブリッドな組み方のお手伝いをしてくれるんですよ。極力属性を省いて、CSSレイアウトに移行しやすいように慣れておくことも大切だしCSSの上手な書き方も訓練しておかないとね。無駄にコードを書いちゃうことって、あると思うし後から見ると、気づくことも、沢山あるから。Web標準にアプローチ的な立場で、ハイブリッドな組み方をしていくのはなかなか心地がよいです♪懐かしくも杏里を聞きながらブログを書いていますよん。CAT'S EYE が流れていま～す♪３６５サイトの方は、書き始めて以来、毎日更新中です。Webスカウターの値が少しアップしましたよ。只今「16」。･････つづく東京２３区中心・駅近ホテルズ｜散文誌・３６５*Web標準2007年版目次*基準のソースコード文字コードは「Shift-JIS」か「EUC-JP」かJavascriptによるスタイルシート切替でCSSレイアウトの位置ズレをカバーするCSSでidを指定する時は要素名とセットで記述HTMLのDOCTYPE宣言は軽視できない行間指定「line-height」の使い方@importを使って外部スタイルシートを読み込む

2007/06/02

コメント(2)
@importを使って外部スタイルシートを読み込む

Web標準の教科書詳解HTML ＆ XHTML ＆ CSS辞典第3版詳解HTML ＆ CSS ＆ JavaScript辞典第3版「外部スタイルシート参照の記述、どうしようか？」ゴールデンウィークも終盤ですが、いかがお過ごしでしょうか？私は、前半のウチにアチコチお出かけしてきました。「散文誌・３６５」の４/２９、５/２、５/３にちょこっとだけ、その様子を書いてます。ユリ、ルピナス、藤、ポピー、野の花など、お花三昧してきました。さーて、そろそろ、お仕事モードに戻さなくてはとソースコードをガシガシと書き始めております。私、一枚のスタイルシートに書いちゃうことが多いんだけれど共通スタイルと、その他スタイルくらいには分けてもいいかなぁ～と思って@importの記述についてちょいとお調べしていました。使ってないと記憶は曖昧になっていくもので。■@importルールによる外部スタイルシートの参照@import url("default.css");@import url('default.css');@import url(default.css);@import "default.css";@import 'default.css';これ参考になります⇒Hide CSS from browsers :: @import4、5の記述はWinとMacのIE4では実装されていないんですね。もう、遠い過去のブラウザだけれど、適用されないならば、いっそ、そのほうが良い。ということで、url関数を使わない記述で行きたいですね。でも、一般的にどうなんだろう。【参考アドレス】CSS概説｜インポートhttp://www.nextindex.net/web/CSS/add.htmlアットルール（@規則）CSS辞典http://www.seo-equation.com/html/css/at_ruleLucky bag::blog: @import を使ってブラウザに CSS を読み込ませない方法http://www.lucky-bag.com/archives/2005/07/import_css.html ･････つづく東京２３区中心・駅近ホテルズ｜散文誌・３６５*Web標準2007年版目次*基準のソースコード文字コードは「Shift-JIS」か「EUC-JP」かJavascriptによるスタイルシート切替でCSSレイアウトの位置ズレをカバーするCSSでidを指定する時は要素名とセットで記述HTMLのDOCTYPE宣言は軽視できない行間指定「line-height」の使い方

2007/05/05

コメント(2)
Web標準にアプローチするよりも基本的なこと

Webデザイン・ルールメイキングDreamweaverプロフェッショナル・スタイルCSSによるWebデザインカスタマイズガイドスタイルシートスキルアップ・デザインブック（2）Web標準の教科書スタイルシート・デザイン「Web標準よりも基本的なことって何でしょう？」春真っ盛り！来週はゴールデンウィーク突入の週ですね。私もイチオウお休みにしようと思っています。私事、色々、しなくちゃならないこともあるしね～前回の記事「スタイルシートのフォントサイズ固定に思う。」でも旧来のやり方と、イマドキのやり方について云々・・・思うところを徒然なるままに書きました。近頃思うのです。Web標準に対する疑問というか迷いみたいなものを。Web標準の考え方は大切だと思います。けれども、それを知らないが上のデメリットと知ってて固執し過ぎるというか凝り過ぎてしまうデメリットってな具合に、デメリットとデメリットがぶつかり合う「でら！デメリット！」があると思うんですよね～。理想的な構造と、現実的なやり方がうまく消化されないと･･･トホホとか（汗）逆に、知らないからやらないで結果オーライ的なメリットや知っているから施せるというメリットもありますよね。画像はみんなIMGタグで記述する？それともスタイルに放り込む？？？などがいい例ではないかしら。印刷するときのことを考えると、安易に背景に持ち込むのはよろしくないのねと･･･（汗）自分に「 background抑制例」を発令したい気持ちでいっぱいなんです。私がウェブを触り始めた頃、先輩によく言われたことを思い出しました。前回の記事もそのひとつなのですが（フォントサイズ固定のお話）背景の指定は、色指定にしろ、画像指定にしろ、宜しくないと。なぜならば、印刷できないことがあるから。IEなんて「背景印刷しない」が標準設定だし、すぐに見つけられるところにないから。だから、スタイルシートがあまり現実的でなかった頃でもテーブルに罫線を引きたいときには、できるだけ border を使いましょうと指導を受けました。（あの、味気ないボーダーですけれども･･･笑）テーブルの背景に黒を指定してセルには白を指定して･･･というようなやり方は避けましょうね。どうしてもって言うときだけは･･･そんな風に教えを受けたものです。でも、総ファイルサイズを軽くするために見出しの背景に帯状に背景を敷くするときには見出しはなるべくテキストにして、背景を指定したりしていました。これ、やめようかなと。ボーダーならば、印刷できます。背景を設定するような見出しならば、画像にしたほうが良いように思うんですよね。SEO的には弱いけれど。見出しの頭に装飾を施したり、下や上にボーダーでメリハリをつける分には問題なく印刷される。「印刷」「印刷」ってこだわるのは、「見た目と違うやん！」ということを時として多く指摘を受け･･･背景を背景として指定していいものと（すべきものと）そうではないものをキチンと意識しないといけないなぁと思ったんです。背景はやっぱり背景で、それが生きてこそ背景なんだ！なんだかですね、旧来のウェブ初期の頃のホームページの作り方が基盤にあってイマドキのやり方でやったほうがメリットが大きいんだ！ということだけチェンジしていったほうが現場的なんでしょうかねぇ･･･そうなんじゃないか？って感じるんですよ。あるべき物体はそこにあるのが当然だ！一番いいのは、シンプルなやり方だ！イマドキ（笑）を導入するなら、とってもメリットがあるときだけだ！私としては、常に「Web標準にアプローチ」なポジションがいいのかなと思っています。恩恵がいっぱい受けられるところからチェンジみたいな。ああ、もっと大きく捕らえなくてはならないんだろうな。HTMLの構造とスタイルシート。ハイブリッドレイアウトな思考は、案外大切なのかもしれないね。記念すべき「Web標準」カテゴリ１００件目！･････つづく東京２３区中心・駅近ホテルズ*Web標準2007年版目次*基準のソースコード文字コードは「Shift-JIS」か「EUC-JP」かJavascriptによるスタイルシート切替でCSSレイアウトの位置ズレをカバーするCSSでidを指定する時は要素名とセットで記述HTMLのDOCTYPE宣言は軽視できない行間指定「line-height」の使い方

2007/04/20

コメント(2)
スタイルシートのフォントサイズ固定に思う。

詳解HTML ＆ XHTML ＆ CSS辞典第3版詳解HTML ＆ CSS ＆ JavaScript辞典第3版「フォントサイズの指定は固定派ですか？」一概には言えないと思う。この問いかけには。スタイルシートが、当たり前のように使われるようになってなんだか、幅固定のサイトが増えたように思います。実際そうなんだろうけれどね。私は、横幅パーセント指定で育ったものですからなんというか、「固定」という環境がとってもキツク感じるのです。それは、フォントのサイズについても影響されており･･･リキッドレイアウト･･･この言葉を知ったのは私がWebに携わってから、相当後のことになります。それに寄り添うように、フォントサイズ固定のページも増えていったように感じます。どうでしょうか？実際のところ。それが、私の悩みどころです。固定がそんなにいいのか？できるなら固定にしたくない。IEってブラウザは、文字サイズが固定に設定されているとブラウザ側で文字サイズを最大にしようが最小にしようがサイズ変更されない。IE7では解消されているのかな～これが、どうしても消化できないのですよ。どーしてさ、っと言いたくもなります。言いたくなるけれど、言っても仕方がありませんね（笑）メニューとか、どうしても固定でないと崩れるものであれば文字サイズ固定もありでしょう。けれども、本文とか、固定じゃなくちゃそんなに嫌か？という箇所については文字サイズ固定は、やめてあげたいのです。文字サイズの小さなサイト見かけますよね。スタイリッシュでカッコイイとは思います。思いますけれども、小さいです（汗）だから、見かけるのよね。最近。きっと。あの、「大」「中」「小」って文字サイズを変更するボタンがページの端っこのほうにあるタイプのサイトがね。フォントサイズについてユニバーサルセレクタ（アスタリスクで一括で記述するもの）で「 font-size: 12px; 」とかってやることが多いと思います。この指定に、ちょっと疑問を持ったのでした。標準の設定って意外と難しいね。ああ、旧来のやり方と、イマドキのやり方。もっと、イイトコ取りはできないものだろうか･･･と締めくくる。乱文失礼【参考サイト＆ページ】サイトリニューアル（後編）リキッドデザインのメリット･････つづく東京２３区中心・駅近ホテルズ*Web標準2007年版目次*基準のソースコード文字コードは「Shift-JIS」か「EUC-JP」かJavascriptによるスタイルシート切替でCSSレイアウトの位置ズレをカバーするCSSでidを指定する時は要素名とセットで記述HTMLのDOCTYPE宣言は軽視できない行間指定「line-height」の使い方

2007/04/12

コメント(2)
XOOPSをWeb標準にアプローチ（１）

CSSによるWebデザインカスタマイズガイドXOOPS＋Smarty（スマーティ）カスタマイズガイドWeb標準の教科書スタイルシート・デザイン「HTML-lintくんで、９５点のよくできましたをいただきました」今日のカテゴリは「Web標準」にしようか、「XOOPS」にしようか迷っちゃった。複数カテゴリ選択できたらいいのにねっ！ちょっと前にお仕事でXOOPSをいじっていた私。それを肥やしに新しいサイトを作っています。折角するなら、ちゃんとしようとWeb標準を意識して作っています。XOOPSのデフォルトテーマは、ハイブリッド型のテーブルレイアウト。まぁ、それはメリットもあるということで、そのまま採用しています。テーブルレイアウトを敵視することもないと思うのでね。でも、width属性やstyle属性が記述されたりしているのでまずはその辺りを取り去るところから始めました。モジュールによっては、align属性が記述されているものもあるしその他にもチェックをするとチョコチョコ出てきますね。デフォルトテーマは「XHTML 1.0 Transitional」で記述されています。XHTMLってことは、より厳格に記述しないとエラーになっちゃいますね。あと、どーしても気になってしまうのが改行や左のインデントに統一感がないこと。インデントや半角スペースで字下げするのは構わないと思うんだけれどバラバラなのがとっても気になります。やっぱり、ソースコードだって作品だと思うしその辺にも誇りって物を持ちたいんですよねぇ。ソースコードを覗いた時に「うわっ！汚っ！」って思ったことはありませんか？あれ、ちょっとカッコ悪いですもの（笑）直接Web標準に関わることではないけれど気持ちからWeb標準にアプローチしていこうということで今日の日記にしたためましてございます。ちょっとずつ改善していこうと思ったときにクリーンなソースコードじゃないと、やる気も失せるというものです。ひとつ悩んでいるのがですねぇ。Javascriptを読み込んでくるところ。どーして入れ子になっているのかなぁ～と。そして、どーしてあんな書き出しかたをしているのかなぁ～と。特に、下の赤字部分がワケわかんないんですよねぇ。どうして<{$xoops_js}>の中身が<script>からじゃなくて「//-->」からなんでしょ。これは今後の課題ですね。----------------------------------------------------------------------------<script type="text/javascript"></script><script type="text/javascript" src="http://www.example.com/include/xoops.js"></script><script type="text/javascript"></script><script type="text/JavaScript" src="http://www.example.com/themes/default/common.js"></script>----------------------------------------------------------------------------ふぅ～。毎年３月の中ごろに一度、ドカンと寒くなりますね。お山の方が白かったです。[追記]トラックバックマナーに関してお叱りを受けてしまって穴があったら入りたい･･･http://blog.tads-net.com/column/xoops.htmlこの記事（↑）で、XOOPSに手を出した頃の感想が私と似ていた部分があったのでチョンとトラックバックをね。Web標準の視点から見るとXOOPSのデフォルトテーマには課題が残るところですか･･･＾＾；トラックバックって関連記事ならいいんだ･･･というものでもないんですね。記事引用のお知らせみたいな感じかな。･････つづく東京２３区中心・駅近ホテルズ*Web標準2007年版目次*基準のソースコード文字コードは「Shift-JIS」か「EUC-JP」かJavascriptによるスタイルシート切替でCSSレイアウトの位置ズレをカバーするCSSでidを指定する時は要素名とセットで記述HTMLのDOCTYPE宣言は軽視できない行間指定「line-height」の使い方

2007/03/12

コメント(5)
Web標準の基礎と実践へアプローチ

Web標準の教科書スタイルシート・デザイン随分前に ITPro で連載が始まった益子さんの連載「Web標準の基礎と実践」。一時（いっとき）期間が空いていたので、久しぶりに読みかえたりして続きを読みました。⇒第15回 XHTMLの設計～2つのアプローチ～⇒第16回 XHTMLの設計～状況に合った要素選び（1）～⇒第17回 XHTMLの設計～状況に合った要素選び（2）～XHTML厳格だぜぃ。実践へのアプローチ部分として読むならば、第１５回から読んでみるのが良いと思いますよ。枠から攻めるアプローチ。細部から攻めるアプローチ。また、ヘッダーの組み方、ナビゲーションの組み方へのアプローチ。Web標準へのアプローチが例を通して解説されています。私自身は、「枠」から攻める派ですね。枠派です！XHTMLをやっていこうと思うと、テーブルレイアウトは「敵」ですか？NGですか？そんなことを先入観的に思っていたんだけれどXOOPSだって骨格はテーブルで組まれているよねぇ（デフォルト）テーブルレイアウト（ハイブリッドレイアウト）だと、大きく崩れないのはメリットと言えると思います。ガッタン！と崩れることを防げる場面も多々ありますよね。現段階では共存がいいのかな･･･フルCSSという道をとった場合、モダンブラウザ以外はふっ飛ばす！というのでも良いと思うんです。Javascriptでふっ飛ばすも良し、可能であればPHPでふっ飛ばすも良し。もうすぐIE７ユーザも多くなるときがくるだろうし。春でしたよね？強制的にアップデートされるのって。ああ、こういう読み物を読むと、Web標準に対する自分の姿勢を改めて考える機会ができて宜しい。緩んでいく気持ちを後ろからバシッっと気合投入されている感じ。今、XOOPSがマイ旬なので、いっちょその子をWeb標準にアプローチしてみることにしよう♪そういや、益子さん、新しい書籍を出版されましたね。⇒スタイルシート・デザイン･････つづく東京２３区中心・駅近ホテルズ*Web標準2007年版目次*基準のソースコード文字コードは「Shift-JIS」か「EUC-JP」かJavascriptによるスタイルシート切替でCSSレイアウトの位置ズレをカバーするCSSでidを指定する時は要素名とセットで記述HTMLのDOCTYPE宣言は軽視できない行間指定「line-height」の使い方

2007/03/05

コメント(0)
行間指定「line-height」の使い方

Web標準の教科書スタイルシートスキルアップ・デザインブック（1）スタイルシートスキルアップ・デザインブック（2）スタイルシート・デザインちゃんとCSSするためのスタイルガイド入門CSSによるWebデザインカスタマイズガイドカスタマイジング・ズープスこんなにゆっくり、じっくりと、ひとつの話題に触れる時間ができたのは何日ぶり？今日は、All About の line-height に関する記事から派生して色んなブログをサーフィンしてまいりましたです。行間(行の高さ)を調節するなら単位はナシでhttp://allabout.co.jp/internet/hpcreate/closeup/CU20070222A/?NLV=NL000258-202「line-height」って行間指定をするスタイルなのはご存知ってことで。これの仕様ってキッチリ知らなかった。常に単位アリで記述しておりました。だって、他のスタイルに単位なしって指定したっけかなぁと･･･（汗）うろ覚えの時には、改めて「Web標準の教科書」のお世話になることにする。line-height のプロパティ「値」normal　＜実数＞＜長さ＞＜パーセンテージ＞＜inherit＞「Web標準の教科書」p187参照ふむふむ。この「実数」ってヤツが単位なしに相当するものなのね。で、実数で指定すると、なかなかどうして意図した様（さま）に表示されちゃうってことのようで。私の「ふむふむ」を解釈してみたいよ！って方はLucky bag::blog さんの以下のエントリーがとってもわかりやすいと思います。直感的にわかる！って感じ♪line-height の値には単位なしが良いとされる理由http://www.lucky-bag.com/archives/2006/04/unitless-line-heights.html　　そして、彼の参考記事となっているのが、もしかして、あのエリック・メイヤーさんですか？お！　　そして、そのエリック・メイヤーさんのサイトって、WordPressって代物で作られておりますな･･･　　･･･っと、職業病的に構造を見たがるアタシ（笑）時々、ガッチャンコ！上の行と下の行が重なって見えちゃっているページってのはこの子が作用していたのね。納得。意図して使う時は別として、フッツーに「行間を広げたいんだよ」って場合には単位なしで指定しておくことが良いというかオススメってことね。line-height について、もうちょっと突っ込んで触れてみたいよ！っと思ったら下記のエントリーがいい感じ。All About の記事にツッコミ入れてらっしゃるわ。「仕様」ひとつとっても、それを伝えるのに色んな伝え方、見方があって面白いなって思ったエントリーです。line-height に単位ありの指定は駄目？http://hyper-text.org/archives/2007/02/line_height_values.shtml余談だけれど、「line-height」でYahoo!検索すると今回取り上げた上のふたつのブログさまが１ページ目にいらっしゃる。「スゲー！」と言ってしまった日曜日のお昼時でした（笑）【オマケブックマーク】[ OCEAN-NET ] line-height の怪http://hello.oceannet.jp/modules/blog/index.php?page=article&storyid=70OCEAN-NET さんって「カスタマイジング・ズープス」の著者さんのサイトですねぇ。ここでもline-heightについての記事が上がっていました。ブログには、なかなか面白い記事が、短めの文章でエントリーされてますね。･････つづく東京２３区中心・駅近ホテルズ*Web標準2007年版目次*基準のソースコード文字コードは「Shift-JIS」か「EUC-JP」かJavascriptによるスタイルシート切替でCSSレイアウトの位置ズレをカバーするCSSでidを指定する時は要素名とセットで記述HTMLのDOCTYPE宣言は軽視できない

2007/03/04

コメント(4)
CSS Nite in Nagoya 2007.3

Web標準の教科書できるクリエイターFlashMX独習ナビ３月１０日に開催される CSS Nite in Nagoya の締め切りが迫っていますね。訪問者さんの中でこのあたりから出席される方はいらっしゃいますか？参加費も５０００円で落ち着き前回参加しているので、さらに割引が効くんだけれどうーん、今回は見送りです。触発されに行くには良きイベントだとは思うのですが３月･･･花粉症。途中退場可なのは嬉しいんだけれどお金を注ぐからには１２０％満足したい人なのでそこら辺も引っかかって、見送りとすることにします。（個人的には、もうひとつ理由があったりして･･･えへへ）参加人数、沢山集まっているようです。事後のブログレポートとか、検索して様子を伺うことにしましょう<(_ _)>前回、私が参加した、CSS Nite in Nagoya のレポートは楽天ブログにも記録してありますよ。前回の様子を読んでみたい方は、こちらのレポートをご覧くださいませ。この季節の外出は勘弁してくれぇ～（笑）今日も花粉ちゃんは元気です。今日は、もうひとつ日記を書いています。こちらもご覧くだされぇ～･････つづく東京２３区中心・駅近ホテルズ*Web標準2007年版目次*基準のソースコード文字コードは「Shift-JIS」か「EUC-JP」かJavascriptによるスタイルシート切替でCSSレイアウトの位置ズレをカバーするCSSでidを指定する時は要素名とセットで記述HTMLのDOCTYPE宣言は軽視できない

2007/02/28

コメント(2)
userAgent一覧

JavaScriptポケットリファレンス改訂第4版「Javascriptによるスタイルシート切替でCSSレイアウトの位置ズレをカバーする」に補足。ユーザエイジェントの一覧が載っているページをメモ。　⇒userAgent一覧/ユーザーエージェント一覧ここのサイトって色々載っているね。以前にも見たことあるや＾＾有用なサイトは、よく出会うものですね。スタイルシートスキルアップ・デザインブック（2）のProfect6で紹介されているドロップダウンメニューをMacIEで見たら・・・うーん（汗）その変を振り分けるのに「Javascriptによるスタイルシート切替でCSSレイアウトの位置ズレをカバーする」をやったわけですよ。不具合がおきたら順次追記って感じかな～以上、メモでした。･････つづく東京２３区中心・駅近ホテルズ*Web標準2007年版目次*基準のソースコード文字コードは「Shift-JIS」か「EUC-JP」かJavascriptによるスタイルシート切替でCSSレイアウトの位置ズレをカバーするCSSでidを指定する時は要素名とセットで記述HTMLのDOCTYPE宣言は軽視できない

2007/02/06

コメント(2)
xoops的ハイブリッドレイアウト

Web標準の教科書カスタマイジング・ズープスXOOPS Cube使いこなしガイドブックスタイルシートポケットリファレンススタイルシートスキルアップ・デザインブック（2） xoops触っています。何だかんだいって、そーゆーもん触っています。使ってみるとなかなかいい子ですよ。Web標準寄りな考え方は好みましくはありますし賛成もします。けれど、ハイブリッドレイアウトも捨てたもんじゃないな～とxoopsの作りを見ていて思いました。div（スタイルコンテナ）を使ってtableなんぞ、一切なしのレイアウトもそれはそれで良いんだけれどいいトコ取りしてもいいんじゃないかな？っていうのが最近の気持ち。xoopsの作りってヘッダー部分、コンテンツ部分、フッター部分が３つのテーブルで作られていてさらに、コンテンツ部分が３つのセルで区切られている作り。これをdivやらtableやらで、さらに作りこんでいる仕組みになっていました。　なるほどです。やたらとdivがあるよりもソースがスッキリしていて綺麗なんですよ。構造もわかりやすかったりして。これなら大きなレイアウトの崩れは防げますよね。ちょっと古い記事ではありますが参考になるページをクリップします。ハイブリッドレイアウト、なかなかいいんじゃないでしょうか。現状としては。⇒T-STUDIO ハイブリッドレイアウト⇒毎日考ブログ　Web標準に進路を取れ第5回「テーブルレイアウトは罪なのか」⇒ミツエーリンクス　ハイブリッド実装今になっても、良い記事は良いですね。参考になります。さて、さらにxoopsの旅は続く・・・。･････つづく東京２３区中心・駅近ホテルズ*Web標準2007年版目次*基準のソースコード文字コードは「Shift-JIS」か「EUC-JP」かJavascriptによるスタイルシート切替でCSSレイアウトの位置ズレをカバーするCSSでidを指定する時は要素名とセットで記述HTMLのDOCTYPE宣言は軽視できない

2007/02/03

コメント(0)
Web標準にアプローチ2007年版目次

CSS入門講座：2巻（前後編）セットCSS入門講座：前編CSS入門講座：後編Web標準の教科書 Web標準にアプローチの目次を作りました。　　⇒Web標準にアプローチ2007年版目次2006年に書いた記事の中でも有用である！と思った記事は2007年に書いた記事と一緒に目次に載せていますよ。【Web標準（+CSS）編】の括りの一番上の塊は2007年の記事です。ブログ記事の一番下にも毎回載せていますよ♪その他にも、ホームページ作成時に役に立つこと＆ツールやもうちょっとはみ出した記事もリストアップしてあります。私にも役に立つように（笑）普段から、よく過去の記事を参照しているんですよ。Flash や MediaPlayer のダウンロードロゴのアドレスなんてしょっちゅう忘れちゃうし、サーバ構築のときのことも見事に忘れるし（笑）みなさまにもお役に立てば幸いですわ･････つづく東京２３区中心・駅近ホテルズ*Web標準2007年版目次*基準のソースコード文字コードは「Shift-JIS」か「EUC-JP」かJavascriptによるスタイルシート切替でCSSレイアウトの位置ズレをカバーするCSSでidを指定する時は要素名とセットで記述HTMLのDOCTYPE宣言は軽視できない

2007/01/28

コメント(0)
Webデザインの本

Web標準の教科書Webデザインの本 Web年鑑（2007）が日経から出版されていますね。数年前、アスキーから出版されていたWeb design（2004）が価格もお手ごろでお気に入りだったんだけど日経さんから出版されたWeb年鑑（2007）、ちょっと高いなって感じます。色んなサイトの色んな技術や工夫を考察するのにはお手軽でいいんですけどね。「Web年鑑」は出版されるようになって、今年で４回目なんだそうですよ。「Web年鑑2007」の目次だけでも欲しいなっと思ったら日経さんの書籍案内でご覧くださいね。目次に上がっているサイト様を巡ってみるだけでもかなり有益なものとなると思います。えーっと。いくつか見た感想…崩れているサイトさまが。フラッシュをインストールしていないと先にすら進めないとか。私のポリシーに反します。むふぅ。先日書いたHTMLのDOCTYPE宣言なんかをチェックしてみたら。あらら、ららら、らら。書きましょうよぉ。クノールスープの学校のページとかモッズヘアのサロンページがアタシの好みですね♪かなり対照的なデザインだけど、あったかみのあるものとビシッとくるもの。好きなんですよ。他の人が作ったサイトのイイトコロ、改善できるところを考えながら見てくと自分の肥やしになるねっ！…そして、まだまだリカバリ中な私。…ただいま、SP2にアップデート中ですよん。･････つづく東京２３区中心・駅近ホテルズ*Web標準2007年版目次*基準のソースコード文字コードは「Shift-JIS」か「EUC-JP」かJavascriptによるスタイルシート切替でCSSレイアウトの位置ズレをカバーするCSSでidを指定する時は要素名とセットで記述HTMLのDOCTYPE宣言は軽視できない

2007/01/22

コメント(0)
HTMLのDOCTYPE宣言は軽視できない

Web標準の教科書ウェブ屋さんなのに、まだIE７を手に入れていない。ちょっといただけないですよね。一度、スタンドアローン版を手に入れたんですけどどーも、うまく動かなくて、捨てちゃいました！All About の記事にちょーどよいタイミングでIE7のことが載ってきたのでこれを気にリトライしてみますか。DOCTYPE宣言がないとIE7でも表示は古いまま- ［ホームページ作成］All AboutDOCTYPEって何？って思った人はHTMLのソースを見てみると、すぐにわかるかも。ここでね。IE7にも互換モードがあるらしいねぇ。■DOCTYPE宣言ってこういうもの<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">Web標準もそうなんだけど、ウェブコンテンツ丸ごとウェブ標準っていうのかな？ウェブコンテンツ標準を考えるようになって･･･で、PHPをよく使うようになったので、ちょっとこんなもんに入ってみました。　⇒PHPのコミュニティ＆ポータルサイト「PHPプロ！」いいよぉ。ここぉ。メーリングリストも、PHP講座も超お役立ちですよ！さて、精進します。･････つづく東京２３区中心・駅近ホテルズ*Web標準2007年版目次*基準のソースコード文字コードは「Shift-JIS」か「EUC-JP」かJavascriptによるスタイルシート切替でCSSレイアウトの位置ズレをカバーするCSSでidを指定する時は要素名とセットで記述

2007/01/21

コメント(2)
CSSでidを指定する時は要素名とセットで記述

Web標準の教科書CSS Zen Garden bookスタイルシートスキルアップ・デザインブック（2）ドロップダウンメニューを作ってみようと試験中です。表示・非表示を切り替える方法自由に指定した場所（座標）に文字や画像を表示させる方法簡単なドロップダウンメニューを作るAll About のこのあたりの記事を読むと少し見えてくると思いますよ。私は久しぶりに、スタイルシートスキルアップ・デザインブック（2）を触っています。この書籍の Project6 は、ちょうど、ドロップダウンメニューについての演習なんですよ。　　⇒ちょっと余談･･･　　　　「スタイルシート・スキルアップ・デザインブック２」レビュー其の壱　　　　ずーっと前に書いた、初期段階のレビューです。　　　　MYCOM編集者さんから、コメントをいただいたこともあったな～ちゃんと作るのは難しいと聞いていたので、ちょっとドキドキです。本題から随分それてしまったのですが今回のお仕事中に再認識したことについてメモしておきたかったんですよ（汗）スタイルシートでホームページを作る時に、度々登場するid要素。この子をスタイルシート側で記述する時ってどうしていますか？なんとなーく、どこかで仕入れた知識で、 div#idName のように要素名付で記述しなくっちゃぁと思っていたんですね。あまり気にも留めずにそうしていたので「divで枠作るときにはdiv#idNameね」ってな具合に使ってきました。私のことだから、ややっこしいから、そーしよぉ！ってところでしょうね（笑）しかーし、WinIEでは、ちょっとした誤動作をしてくれちゃうということがわかったんです。詳しいことはわかんないんですけどね。（未検証）idを指定する時、つまり、シャープ使う時は、要素名とセットで記述するとOKなんだ！■CSSでidを指定する時は、要素名とセットで記述する　　記述例　：　div#idName**プチ出来事**●もの凄～く久しぶりに、楽天ラッキーくじが当たりました。　当たんないんだよね～。最近 infoseek に浮気しているからかな？（汗）●XREAで、サーバを借りる時のアカウント名には、ハイフンを入れると撃沈するかもです。　データベースを使おうとして、シクシク････････つづく東京２３区中心・駅近ホテルズ*Web標準2007年版目次*基準のソースコード文字コードは「Shift-JIS」か「EUC-JP」かJavascriptによるスタイルシート切替でCSSレイアウトの位置ズレをカバーする

2007/01/14

コメント(0)
Javascriptによるスタイルシート切替でCSSレイアウトの位置ズレをカバーする

Web標準の教科書CSS Zen Garden bookJavaScriptポケットリファレンス改訂第4版「基準のソースコード」で書いた押さえておきたいポイントを少し。「lang="ja"」は、日本語で書かれていますよぉってこと。「」については「文字コードは「Shift-JIS」か「EUC-JP」か」を読んでくださいまし。「<meta name="ROBOTS" content="ALL">」はロボットさん、いらっしゃってね～ってこと。他のメタタグさんは、有名どころだと思うのでここでは触れないことにしますね。で、今回はの下の２行について。ちょうどお仕事で使ったので、日報ってコトでね（笑）<script language="JavaScript" type="text/JavaScript" src="inc/browser.js"></script><noscript><link rel="stylesheet" type="text/css" href="inc/default.css"></noscript>今日の出来事を例にしますね。枠組みだけテーブルレイアウトをしていたのですけれどまぁ、その他はCSSで制御をするっつぅ、ハイブリットレイアウトをしていたときのことです。大体のところは、どのブラウザもOKなように組めていったのですがMacIE5で、左右の余白の差異にやられOperaで上下の余白の差異にやられちゃったんです。まぁ、縦方向の差異は、この際、目を瞑れないこともなかったんだけどいっそのことだから、ちゃんとしてみようと「browser.js」にシコシコと書いていたのね。MacIE5の時は･･･と、Operaさんの時は･･･っと、ってな感じで。今回は、<noscript>の記述をする必要はなかったので、パース！Javascriptが動かなかったら、このスタイルシートをデフォルトにするわぁ！ってのがあったらそういうものを記述してあげてください。では、ワタクシがしたことを、下に残します。■スタイルシート切替スクリプト（browser.js）if((navigator.userAgent.indexOf("MSIE 5") >= 0) && (navigator.userAgent.indexOf("Mac") >= 0)){ document.write("<link rel='stylesheet' type='text/css' href='inc/macie5.css'>");}else if(navigator.userAgent.indexOf("Opera") >= 0){ document.write("<link rel='stylesheet' type='text/css' href='inc/opera.css'>");}「macie5.css」「opera.css」にそれぞれ用のCSSを書いてあげて、微調整完了！「common.css」の後に記述するのがポイントですぞ＾＾（基準のソースコード参照のこと）「userAgent」を全て調べるのは難しいかもしれないけど検索したらある程度わかるし、下のようなスクリプトでその都度調べて対処することもできますよん。-------------------------------------------------------------お使いのブラウザは「<script language="JavaScript" type="text/JavaScript"></script>」です。-------------------------------------------------------------Javascriptを無効にされていたら効かないわけだけどあんまりされていないことだしそういう方は、ゴメン！ちとだけレイアウトズレがあるのなり（汗）だって、アタシ、CSSハックさんが好きになれないんだもん（笑）本日より記事の一番下に2007年版の目次を載せていきます。2006年に書いた分も含めて、有用なものをリストしますので、記事への近道に使ってくださいませ。･････つづく東京２３区中心・駅近ホテルズ*Web標準2007年版目次*基準のソースコード文字コードは「Shift-JIS」か「EUC-JP」か

2007/01/12

コメント(6)
基準のソースコード

Web標準の教科書CSS Zen Garden book 2007年はこのソースコードを基準にページ組みをしていこうと思います。loosed にするか strict にするかは、迷うところではありますねぇ。strict 寄りな loosed でも OK と言えばそうですが意識しながら慣れていくことを今年の目標に据えます。目次も2007年度版をこしらえて（作って）まいります。徐々に、徐々にね。で･･･ページ作成七カ条なるものを策定（笑）HTML 4.01 strict で記述文字コードはEUC-JP（PHPを意識して）CSS、Javascript はすべて外部ファイルCSSハックを使わないでJavaScriptで切り替える（個人的に好まないだけですが･･･笑）PHPで作成希望（Copyrightの西暦部分の更新を放ったらかしに♪）CSSレイアウトでGO！ソースコードは美しく！（インデントなし左揃え、塊ごとに改行とか、カッコいいソースコードに♪）<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="ja"><head><meta http-equiv="Content-Type" content="text/html; charset=EUC-JP"><title>ページタイトル</title><meta name="ROBOTS" content="ALL"><meta name="description" content=""><meta name="keywords" content=""><meta http-equiv="content-style-type" content="text/css"><meta http-equiv="content-script-type" content="text/javascript"><link rel="stylesheet" type="text/css" href="inc/common.css"><script language="JavaScript" type="text/JavaScript" src="inc/browser.js"></script><noscript><link rel="stylesheet" type="text/css" href="inc/default.css"></noscript><script language="JavaScript" type="text/JavaScript" src="inc/common.js"></script></head><body id="SiteTop"><div id="container"><div id="header"></div><div id="content"></div><div id="footer"><address>Copyright (C) 2006-<?php print date(Y); ?> Example Corporation. All Rights Reserved.</address></div></div></body></html>上のソースコードを見てもらうとわかるように外部ファイルはすべて「inc」という階層（フォルダ）に放り込んでいます。読み込ませるものはこうするのが私個人のやりかたです。もっといいネーミングはないものか･･･と思うんだけどねぇ･･･浮かばないんだな（笑）それと、このソースコードは、PHPを想定して書いてあります。下のほうの Copyright のところに <?php print date(Y); ?> ってあるでしょう。だーかーらー、このソースをコピッて使おうと思うとお馴染みの拡張子「html」から「php」に変更しなくてはならないのでっす！そんなーという場合には、 <?php print date(Y); ?> を取っちゃってくださいな。んで、2007 とかに書き換えてもらえば OK なりぃ♪PHPが走るサーバをお使いでない方は、そうしちゃってくださいね。※このソースコードのポイントは、また後日。今日の最後に･･･RSSを自サイトに読み込んでみちゃったテストページをチラッと。ここのブログと他にいくつかのRSSを読み込んでいます。　http://webstandard.hobomixi.com/rss/これを土台にシコシコガシガシ何か作ってみようと思います。ああ急がしや楽しや♪RSS まわりについても、またレポートしますよぉ。んじゃ！（＾▽＾）/ ･････つづくWeb標準にアプローチ（サイト版） || 東京２３区中心・駅近ホテルズ

2007/01/05

コメント(2)
font-family の指定の仕方でフォームコントロールが化ける！

スタイルシート＆ Web制作知識とルール総まとめWeb標準の教科書CSS Zen Garden bookスタイルシートスキルアップ・デザインブック（1）スタイルシートスキルアップ・デザインブック（2）ブラウザによって標準フォントが違うのは、当ったり前ですね。でも、日本語圏の場合、明朝系のフォントで表示されるととっても読み辛いと思いませんか？そこで、CSSでゴシック系の文字を指定するために「 font-family: "Arial", "Helvetica", sans-serif 」としていました。これが、もとで、悩むことになるとも知らずに（汗）私を悩ませた font-family は、フォームを作っているときに現象として現れました。MacのIEでやられちゃった表示は、こんな感じです（↓）メ・・・メニューが・・・ズタズタですねぇ（汗）んもぉ、困ったもんですよ。これが、何が原因で現れている現象なのかわからなくて数時間悩んじゃったじゃないですか！「 font-family: "Arial", "Helvetica", sans-serif 」これの何がいけないかわかりますか？ちなみに、Mac の Netscape は OK です。Windows も IE、Opera、Firefox あたりでさらりと見たところ OK です。"Arial" も "Helvetica" もなかったら、"sans-serif" 系のフォントを拾ってきてよね！拾わないんです･･･それが･･･（ー"ー）「 font-family: "ＭＳＰゴシック", "Osaka" sans-serif; 」これじゃないと駄目なんですよ。ニッポンジンならニッポンゴ使ってよ！ってことらしいですねぇ。ふぅ～。大体のところをカバーした、こんな（↓）風でもOKでした。あ！英文系のフォントを先に持ってきたらNGでしたのでご用心！「 font-family: "ＭＳＰゴシック", "Osaka" , "Arial", "Helvetica" sans-serif; 」フォントファミリーさんにはやられちゃいましたよ！私は、スタイルシートを使うときにユニバーサルセレクタ（*{margin:0;}という感じでアスターを使って指定する方法）で初期設定をしちゃうのでそいつが災いしているのかと思ったのです。違った！違った！検証してみて、わかったとです！まぁ、あれです。フォームコントロール以外でこの現象は出ていないようなので大事無い！といえば大事無いかも。困ったことに出会ったら、この記事を思い出そうと、メモペッタンです！＾＾「はてな」にもこの現象がエントリーされていますね。　⇒MacIEでの文字化け対策 ■font-familyを指定するときの記述（ゴシック系フォント版）フォームコントロールで困ったことにならないように、日本語系フォントを指定してあげる！　font-family: "ＭＳＰゴシック", "Osaka" sans-serif;または･･･　font-family: "ＭＳＰゴシック", "Osaka" , "Arial", "Helvetica" sans-serif;※font-familyについては、下のアドレスが参考になりますよん♪http://www.htmq.com/style/font-family.shtml１０日ぶりの書き込みとなりました。プログラムや新しいサイト作成のお仕事があったり相談事や調べもの、そのほか色々で大変忙しくしています。少しゆとりができてきたのでそろそろ年賀状のデザインを作り上げてしまわないといけませんね。最近の私は、花札にはまっているので花札の決まり手「猪鹿蝶」をメインにもってこようと思っています。もしかしたら、元旦の楽天BLOGに載せちゃうかも？＾＾･････つづくWeb標準にアプローチ（サイト版） || 東京２３区中心・駅近ホテルズ

2006/12/09

コメント(4)
Web標準とSEOで

Web標準の教科書CSS Zen Garden bookスタイルシートスキルアップ・デザインブック（1）スタイルシートスキルアップ・デザインブック（2）あら。意外！意外だったので、記念に記事にしておきま～す＾＾「Web標準」と「SEO」で楽天ブログの記事がこのような状態なんですね。　⇒ Web標準とSEOとAdSenseの相互関係もっと、ヒットしそうな記事がありそうなものなのに、面白いもんです。折角なので、ちょっとだけ注目すべきところを。えっと、検索結果を見てもらうと分かるようにドメイン名や、階層名、ファイル名もキーワードとして拾っていることがわかりますね＾＾以上！プチ情報でした～･････つづくWeb標準にアプローチ（サイト版） || 東京２３区中心・駅近ホテルズ

2006/11/09

コメント(2)
WordPress を触ってみる

WordPressでつくる！最強のブログサイト次世代ブログWordPressで一歩先をいくWordPress標準ガイドブック機会があって、WordPress なるツールを触ってみてます。もう、ブログはいいや･･･なんて思っていたので、なかなか手に付かなかったんだけど触ってみると、可能性が秘められていて面白い。WordPressって、要はMTみたいなもんね。MTすら使ったことないから、使い勝手の比較はできないけど。とりあえず、無料ですか。WordPressさんは。　⇒WordPress Japanポンポンパンッって感じでインストールもメチャメチャ簡単だったので次のステップに進むのが楽しみです。楽しみだけど、仕事が･･･本業が･･･忙しい･･･まるで、おもちゃを貰ったようにルンルン♪なんだけれど仕事があっちゃぁ～遊べないわねぇ。WordPressは、XHTML 1.0 Strict で組まれています。PHP+MｙSQLで組まれています。私は、ロリポップで動かしていますよん。　⇒WordPress実験サイト只今、実験サイトは、何にもありません。最低限でどうやって表示するのかを試してみたまでです（笑）記事すら、表示させていません（汗）こんだけ表示するなら、あれですね。普通に作ったのと変わらないけど、ここから先がツールの良さが活きてくる！ちなみに、この形まで来るのに１時間かかっていません。WordPressのサイトにアクセスしてから、ここまでに１時間未満。テンプレートを変更するまでだったら、３０分ちょいですね。この早さは、魅力ですよぉ。実験サイトなので、何でもすると思います。グチャグチャのゴチャゴチャになる可能性もあります。何せ、おもちゃにしていますので。うまく使ったら、いいお仕事になるよな～このツール。Web標準準拠っぽいのも、メリットのひとつ。使ってみぃや！ってなお誘いが軽くあって、触ってみて･･･うん。やるぞ！でも、もう少し、秘密にしておこう。乗り気な態度は見せていないのでね。　ふふふ♪ ･････つづくWeb標準にアプローチ（サイト版） || 東京２３区中心・駅近ホテルズ

2006/11/07

コメント(2)
IE7日本語版･･･ドキドキ

Web標準の教科書CSS Zen Garden bookスタイルシートスキルアップ・デザインブック（2）出ちゃったね～。IE7の日本語版。いつぞやのWindowsUpdateで自動アップデートされるらしいけれどどんな具合に浸透していくのかな？Webのお仕事をしているので、IE6がマシン上からなくなっちゃうのは大変、マズイのですねぇ～幸いWin98SEが走っているパソコンにIE6がいるのでIE7にアップデートされちゃったら、そっちで動作確認が必要ですねぇ～バージョン違いで入れておくのがカンタンだったらいいのに。MacのSafariもそろそろ何とかしないとヤバイかなぁ～私のMacOSでは、Safariが載っからないのでね＾＾；当分、Web標準云々について、あえてお勉強する時間は持てなさそう。仕事絡みで学ばないといけない or 覚えちゃってもらえると助かるんだけどモードなモノに時間を割かなければ。それで、楽しくお仕事できるならば、言うことないしね。私のような職業は、学んでも学んでも、覚えても覚えても、満足だぁ！ということはないですからね。でも、まぁ、何ですか。ブラウザの実装差異なんて、無くなってしまえばいいのに。無理か（笑）ハイブリッドレイアウト？が無難なのかも。⇒Windows XP Service Pack 2 用 Internet Explorer 7 日本語版･････つづくWeb標準にアプローチ（サイト版） || 東京２３区中心・駅近ホテルズ

2006/11/03

コメント(0)
ウェブページの手直しがしやすいWeb標準の恩恵

Web標準の教科書CSS Zen Garden bookスタイルシートスキルアップ・デザインブック（1）スタイルシートスキルアップ・デザインブック（2）ちょっとはこなれてきたWeb標準準拠のページ作成。お仕事でも、それなりに形にできるようになってきたんだけどやっぱ、ブラウザ別の対処とか、どーのこーのと･･･最近、取り掛かっていたサイトがあってねひと通り作ったのはいいんだけどどうも、CSSの記述に無駄がある、かぶってる、もっとスマートになるはず･･･と思いきれいさっぱりポイして、新しく書き直しました。ああ、すっきり綺麗になりました☆それで、色々と作り方についてポイントって言うか、コツみたいなものの手ごたえを掴むことが出来たのです！正しくマークアップされた（X）HTMLのページを組む。body要素にページ用のidを設定する（<body id="aVer">など個々につける）。共通デザインだけのスタイルシートを作る。まず作る！個々のページに合わせたスタイルシート設定をする。別ファイルに作る。こうしておくと、かなりやり直しや補修がかけやすいの。今回私がやり直したのは、工程の３番目。共通デザインのスタイルシートを別個にしたことでどこを直せばいいかが、すぐにわかって（かなりわかりやすくて）助かるのですよ。そして、私的にかなり要になったのがbody要素のid属性（工程の２番目）。これがあると、ここのページ内のid属性やclass属性がかなり減る！　#aVer .h1 { color: blue; }　#bVer .h1 { color: red; }同じh1属性の指定でも、こうやって設定できるからソースコードを汚さなくても良いんだよね。正しいマークアップが出来ると、本当にいろんな恩恵を受ける。Web標準、素晴らしいです！XHTMLで組まないとしても、かなりの恩恵が受けられますね。ブラウザ別やバージョン別に作りこみたかったら昨日紹介したJavascriptで振り分けることも出来るし。体感してみませんか？Web標準＾＾宿題やってみたいって方は、CSS Nite に良い記事が、上がっていますよ。私も取り組んでみます！　　⇒【宿題編】CSS Nite LP, Disk 1、矢野さんのセッションは宿題付き　　⇒【解答編】矢野りんさんのセッションの宿題（解答例）･････つづくWeb標準にアプローチ（サイト版） || 東京２３区中心・駅近ホテルズ

2006/10/19

コメント(0)
Netscape の float 指定は信じられない･･･

Web標準の教科書CSS Zen Garden bookスタイルシートスキルアップ・デザインブック（1）スタイルシートスキルアップ・デザインブック（2）CSS Zen Garden bookHTML ＆ CSSJavaScriptポケットリファレンス改訂第4版お仕事がふたつバッティングしていて、日記を３日もお休みしてます。あらら～。お仕事あっての生活ですから、まぁまぁ･･･ということで＾＾ちょいとぶりの新規サイト構築。作成中は、IE6 と Firefox1.5 で表示確認しながら進めています。やったぜぇ～！　っと思って、他のブラウザで確認したら･･･Netscape にやられました･･･めちゃくちゃまともに float 指定で配置しただけなのに、なじぇ？少し調べてみると、Netscapeには、float 指定に関するバグちゃんがあるそうです。私の場合は、背景を指定した div に入れ子状態で、右と左に振ったレイアウト。よくあるヤツですよ。<div id="head">　　<div id="sitename"></div>　　<div id="navi"></div></div>こんな構造ね。で、sitename と navi を左右に振ったら、あっという間に背景が抜けた･･･そりゃーないよぉ～嘆いていても仕方がないので、Netscape とそれ以外で読み込むスタイルシートを振り分けました。それが下のスクリプト例ね。Netscape に採用したやりかたは、 float の代役として、margin をゴソゴソと。マイナスのマージンを仕事で使ったのは初めてだったのよぉ～背景の位置指定に使うと、これまたネスケはイカンし・・・バグちゃんのおかげで、Javascript のお勉強が少しだけ出来たからいいけどさぁ～結局ね、Javascript で、ブラウザを判別してNetscape と、それ以外に振り分けてスタイルシートを読み込むことにしたの。このやりかたは、おかしくなったら適用するブラウザ別にスタイルシートを読み込むことが出来るのでなかなか良い方法だと思います。抜けは、おいおい対処しましょうってことで＾＾；ちなみに、Javascript が無効になっているとうまく働かないのでいちおう、noscript なるものを設定してみました☆■ブラウザの判定--------------------------------------------- HTML（head部分に記述）---------------------------------------------<script type="text/JavaScript" xsrc="css/browser.js"></script><noscript> <link rel='stylesheet' type='text/css' xhref='css/head-cmn.css'></noscript>--------------------------------------------- Javascript---------------------------------------------if(navigator.userAgent.indexOf("Netscape/") >= 0){ document.write("<link rel='stylesheet' type='text/css' xhref='css/head-nc.css'>");}else { document.write("<link rel='stylesheet' type='text/css' xhref='css/head-cmn.css'>");}※navigator.userAgent を直接書いてみると　使っているブラウザを表示することが出来ますよ＾＾【参考アドレス】http://homepage2.nifty.com/yoshi-m/makehp/javascript/lesson/21.htm日中は暖かいけど、朝晩は寒くなりましたね。ウチは、毛布を出しました。みなさま、お風邪など召されませんように ^^ ･････つづくWeb標準にアプローチ（サイト版） || 東京２３区中心・駅近ホテルズ

2006/10/18

コメント(0)
標準準拠モードか過去互換モードかを見分けるツール

私、最近、Web Developer Toolbar [日本語版] というのをインストールしました。これは、Firefoxに追加インストールできるものです。Web標準化していくうえでは、かなり有力なツールなんですよ！まずは、これ！見ているページが標準準拠モードか過去互換モードかが一発で分かる！Web標準ワークフローDreamweaver 8 Web標準デザイン詳解ガイドWeb標準の教科書上の図の「この部分」ってとこに、ご注目！青いチェックマークになっていたら「標準準拠モード」でグレーのチェックマークになっていたら「過去互換モード」だよ。ちなみに「Yahoo!」「Google」「楽天市場」のトップページは「過去互換モード」。「Apple」「DELL」「Web標準にアプローチ（サイト版）」は「標準準拠モード」だよ。これだけじゃなくて、そのお隣には、Javascriptのエラー状況チェックもついているね。他にも、見ての通り、色んな機能が付いているんだよ。ずずっと、左端から順にアイコンが並んでいるでしょう？これも Web Developer Toolbar のツールたちなんだよ。Cookie や Javascript 、CSS の ON/OFF もできるしテーブルの使われている箇所やブロックレベル要素（divなどで囲われているところ）もひと目で分かるように出来るしウィンドウサイズまで変えられるんだよ！CSSやHTMLのチェック、リンク切れまで検証してくれるしとても豊富な機能搭載なのです。日本語で、表示してくれるのが、CSSのチェックだけなんだけど･･･（汗）こんなワケもあって、Webのお仕事をしている人たちの間ではFirefoxが好まれるのでしょうね＾＾Web Developer Toolbar [日本語版]Web Developer Extension（アタシは、ここで落としました）FirefoxSpread Firefox Japan - フォクすけ＊ブログ（Firefoxキャラブログ）ちょっと、肩を故障しています。父上に「仕事をするな」と言われましたが、んなことできるわけありません（笑）今、CGIのデバッグのお仕事をしています。一日しないと忘れます。内容をね。･････つづくWeb標準にアプローチ（サイト版） || 東京２３区中心・駅近ホテルズ

2006/10/13

コメント(4)
フォームコントロールにdisabled属性を指定すると･･･

Web標準の教科書HTMLタグ＋スタイルシート辞典ちび詳解HTML ＆ CSS ＆ JavaScript辞典改訂版HTML ＆ XHTML（第5版）例題50＋演習問題50でしっかり学ぶHTML標準テキスト先日の不具合の原因が分かりました。 $ENV{'CONTENT_LENGTH'}が取得できないやら、ゼロになるやらの件ね。　⇒IEとFirefoxのHTTPヘッダーの違いにやられる･･･まぁ、なんて言うか、してやられました！私、フォームコントロールに、disabled属性を指定したことがなくてその意味をちゃんと理解していなかったの。disabled属性は、フォームコントロールを不可にしてさらに、フォームデータを送信しないのが、本来の仕様なんですね。しかしながら、WinIE6などは、そのまま送信･･･　え！？仕様と違う動きをしていたの。Firefoxは仕様どおりの動きをするわけで･･･原因としてはそこにありました。やっていたことは送信ボタンを押したら下記のスクリプトのような状態になるようにしていたんです。（実際は、Javascriptでしています。参照アドレス*1に記載）<form name="form1" id="form1" method="post" action=""><input type="text" name="textfield" disabled="disabled" /><input type="text" name="textfield2" disabled="disabled" /><input type="text" name="textfield3" disabled="disabled" /><input type="submit" name="Submit" value="送信" disabled="disabled" /></form>あー！こんな状態じゃ、 $ENV{'CONTENT_LENGTH'}が取得できないわけですよ。ああ、解決してよかった♪■disabled属性の説明INPUT要素が選択不能とされている。従って、ユーザの入力を受け付けることもなく、またこの値がフォームデータと共に提出されることもない。⇒[参照] http://www.asahi-net.or.jp/~SD5A-UCD/rec-html401j/interact/forms.html#adef-disabled*1 参照アドレス [二重送信防止]http://www.futomi.com/lecture/javacss/double_block.html ･････つづくWeb標準にアプローチ（サイト版） || 東京２３区中心・駅近ホテルズ

2006/10/10

コメント(0)
続・フォームの入力欄に気を遣うためのJavascript

Web標準の教科書CSS Zen Garden bookスタイルシートスキルアップ・デザインブック（1）スタイルシートスキルアップ・デザインブック（2）Dreamweaver 8 Web標準デザイン詳解ガイド以前に「フォームの入力欄に気を遣うためのJavascript」って記事をエントリーしました。あの例は、ちょっとお粗末的な部分があるので、少し付け加えたいと思います。入力欄に初期値として、「入力してください」などのメッセージがいれてあるのを、クリックすると消し去るという機能を追加したね。で、お粗末な部分というのは、入力して、途中でやめてもう一回入力しにかかったときに、途中まで入力した内容が消えちゃうってなモンだ！あれれ・・・＾＾；そこのところをもうちょっと配慮してあげよう！ということでさらにブラッシュアップしたものを追記したいと思います。■フォームの入力欄に気を遣うためのJavascriptシングルラインの場合の例<input name="comment" type="text" value="入力してください" onfocus="change(this.form)" onclick="change(this.form)">マルチラインの場合の例<textarea name="comment" cols="25" rows="5" onfocus="change(this.form)" onclick="change(this.form)">入力してください</textarea>Javascriptに記述すること（シングルもマルチも同じ）function change(form) {　if(form.comment.value == '入力してください') {　　　　　form.comment.value = '';　}}※Javascriptの緑の文字とマルチライン、シングルラインの緑の文字は対応させてご参照ください。onFocusに加えて、onClickも入れてあげようね。んで、最初から入力欄に入っているメッセージを「入力してください」にしてあってフォーカスがあたったときや、クリックしたときに、メッセージが最初の状態のままだったらメッセージを消して、それ以外のときは、何もしないってのがJavascriptで書いてあります。input要素やtextarea要素に「this.form」って書いてあるのは英語を和訳したそのままの意味なので、そのまま変更なく、書いておいてくださいね。こんな感じで、ちょっぴりユーザビリティをアップさせてみました＾＾サイト版Web標準にアプローチの足跡帳もこれと同じように更新してみたよ。動きを確認してみたい方は、どうぞ、足を運んでみてください。最近、ちょろっと書き込みがあって、嬉しかったりします♪ページランクもいただいちゃって、小躍りしています。次、ランク更新されるときには、せめて３になるように、記事の追加などなど、頑張らなくちゃ！ここのブログもね、なんだか、googlebotさんが、よくおいでになるの。連続アクセスだよ～どこぞのスパムさんかと思っちゃった＾＾；調査されちゃったのかしら～･････つづくWeb標準にアプローチ（サイト版） || 東京２３区中心・駅近ホテルズ

2006/10/08

コメント(0)
色指定について思うこと

Web標準の教科書WEBレイアウト・セオリー・ブックスタイルシートスキルアップ・デザインブック（1）スタイルシートスキルアップ・デザインブック（2）スタイルシートスキルアップ・デザインブック（2）をしていて思ったことを少し。CSSで色指定をするときの表記方法って、いくつか種類があるよね。「#888888」「#888」「rgb(50%,50%,50%)」「rgb(128,128,128)」「gray」。こんな感じで、沢山あります。私は、最初と最後のタイプを良く使うんだけど、一般的にもそうかなって思うの。で、スタイルシートスキルアップ・デザインブック（2）では「rgb(50%,50%,50%)」のタイプの指定も良く出てきて、「もしかして、よく使うの？」って思ったりしたワケ。この書籍は、海外の翻訳版なので、外国ではrgbでの指定も多いのかな？そんな風にも考えられるんだけど。でも、疑問なんだ！Dreamweaver も Fireworks もスポイトを使って吸い取った色とかパーセントで取得できないしPhotoshopのカラーパレットでは、パーセント指定は出来ないでしょう。２５６色指定だもんね～カラーピッカーでは、色んなタイプに変換されて表示されているし、子弟も出来るけど。（描画色をHTMLコードとしてコピーってヤツは、ちょっと便利だね）Illustrator もカラーパレットでは、２５６色指定。カラーピッカーでは、RGBのところは、同じく２５６色指定だもんね～一体、どうやって容易に、パーセントで色を吸い取ったり作ったりするんだろう？？？そういうツールがあるんかな？こんな疑問が、沸々と沸いてきたのですよ。余談ですが、インフォアクシアの「カラー・コントラスト・アナライザー」は、なかなか良い。動きが軽いのが、何より嬉しいところですね～色合わせをしたりするときに、とってもいいですよ。拡大されんの！言葉で説明するのは難しいね～＾＾；色を吸い取るツールは、数あれど、これはなかなか画期的でないかい？■色指定について⇒色指定は正しく指定しましょう - Web標準普及プロジェクト⇒スタイルシート［CSS］/スタイルシートの基本/色の指定 - TAG indexなんとなく、雑学本を読みたくて、漁り読みをしています。飲みに行ったりして、「ワリカン」で支払ったりしますよね。あの「ワリカン」って略語だった！とか･･･面白いです♪ ･････つづくWeb標準にアプローチ（サイト版） || 東京２３区中心・駅近ホテルズ

2006/10/06

コメント(2)
CSS：プロパティの一括指定を覚えてファイルサイズを節約

Web標準の教科書WEBレイアウト・セオリー・ブックスタイルシートスキルアップ・デザインブック（1）スタイルシートスキルアップ・デザインブック（2）スタイルシートで、ファイルサイズを節約しましょう。CSSに少し慣れてきたら、プロパティの一括指定を覚えるといいですね。記述するのも速くなるし、ファイルサイズも抑えられるし。ただ、一括指定の順番に気をつけたり、省略できないプロパティがあったりするのでその辺は、徐々に覚えていって使えるようになったらと思います。私が最近覚えて使えるようになったのは、背景関連のプロパティ一括指定。paddin や margin、border 関連は、もっと最初の頃に覚えちゃいましたよ♪随分、楽ちんになったものです。今は、font 関連のプロパティの順番と必須のプロパティを覚えています。使っていると、覚えていくものですよ！他にもあるけど、とりあえず、この辺りからスタートですね。近頃の重宝物は、border-widthです♪■プロパティの一括指定backgroundborderborder-widthfontmarginpaddingちらりちらりと、お仕事案件が入ってきております。ビビリながら、FLASHとか勉強しています。膨大なファイル数のCGIを解読しなくてはならない可能性も大です（笑）でも、ちょっとワクワク＆ドキドキしてます。私、プログラミングは嫌いなはずだよ。けど、なんとなくやってしまう、変な性分なんですね～出来たときが嬉しいからかな＾＾あ！今日のランチは、うどんすきにしました。昨晩の残り物にお出汁とつゆをプラスして、卵も落としました。濃いめにして、ぐつりぐつり。･･･んまいっ･････つづくWeb標準にアプローチ（サイト版） || 東京２３区中心・駅近ホテルズ京風うどんすき　権太呂鍋【722】

2006/10/04

コメント(2)
ページ背景の指定はきちんとする！

本日夕刻、スタイルシートスキルアップ・デザインブック（２）を実践中！Project3まで進んでいます。ここで、印刷プレビューをしてみて気づいたことがあります。それは、ページの背景。応用問題に入る前に、解説を参考に、あれこれ自分で試してみました。h2要素に背景色を設定してみたりね。ここのProjectでは、ページの背景色を指定していません。これをしていないと、Firefoxで印刷プレビューをしたときに、ヘンテコになるんです。<body><h2>あああ</h2><table>　　：　　略</table></body>こんなソースコードに対して、設定したCSSはh2 { background: gray; }簡略化してこんな感じ。このまま、Firefoxで印刷プレビューをするとあたかもページ背景にgrayを指定したように全面灰色になっちゃうの。で、ページ背景を設定したら、直っちゃうということなんですよ。body { background: white; }h2 { background: gray; }簡単に書くとこんな感じ。HTMLだけでページを作るときもそうなんだけど、ページ背景ってちゃんと指定してあげないと時々悪さをする。悪さって言うか、あれれ？って思うだけなんだけどね。昔、body要素にbgcolor属性を指定していなくて、ネットスケープでヘンテコになったことがあります。原因は似たようなモンでしょう。そうそう、Project2のレビューは書いていないんだけどfloatに関して、非常にお勉強になりました。Project3では、ボーダーの設定について、新たな発見がありましたよ。次は応用問題だぁ～頑張らなくちゃ！そーいや、Flashもスキルアップしないといけない（汗）スタイルシートスキルアップ・デザインブック（2）著者：エリック・A．メイヤ／吉川典秀出版社：毎日コミュニケーションズサイズ：単行本／279p発行年月：2006年01月本体価格3,000円(税込 3,150 円)送料別【コメント】初級レベルを脱出した人向けの書籍です。説明書きの調子が、面白いんですよ！「ちょん切られる」とか、その他ちょぼちょぼ（笑）親しみやすさも売りのひとつのようです。私は、このシリーズの(1)を購入していませんが、十分に楽しめます♪ちなみに、CSSを触り始めたのは今年の5月中旬頃だったと思います。少しできるようになったけど、実践的なことを学びたいなという方には良書となることでしょう☆お天気の良い日が続きますね。でも、月曜日から、崩れる模様･･･週末に思いっきり羽を伸ばしてくださいね！･････つづくWeb標準にアプローチ（サイト版） || 東京２３区中心・駅近ホテルズ

2006/09/30

コメント(0)
ウェブページをきちんとした構造でマークアップするメリット

Web標準の教科書WEBレイアウト・セオリー・ブックスタイルシートスキルアップ・デザインブック（1）スタイルシートスキルアップ・デザインブック（2）今更ながらに実感したことなんです。テーブル（表）をCSSでデザインしていたときのことなんだけどね。テーブルって<table><tr><td></td></tr></table>で構成できるでしょ。最小構成ってこんな感じだよね。他にも、<th><thead><tbody><tfoot>があるんだけどこれらを適切に使ってあげると、CSSを指定する上でとってもメリットがある。もちろん、class属性なんかを使って指定してあげることも出来るけどそれを使うよりは、タイプセレクタを使ってあげるほうがスマートだよね。あ！タイプセレクタってのは、要素名のみをセレクタにすること。tableとかtheadとかね。class属性を使いまくると、管理が複雑になるしできるだけソースコードをクリーンにしたいってこともある。例えば、テーブルの一行目、見出し部分だけにCSSを適用したいとする。背景色を付けたり、見出しを太く大きくしたいときがあると思うの。theadやthを使わずに構成したとしようね。このとき、どうしても、class属性を指定してあげないと見出し部分だけにCSSを適用できないよね？（他にスマートな方法があるのかな～）<table><tr class="midashi"><td>・・・略・・・</td></tr><tr><td>・・・略・・・</td></tr><tr><td>・・・略・・・</td></tr></table>こんな感じね。けど、theadを使って、マークアップしてあったら、class属性なんてイラナイ。<table><thead><tr><td>・・・略・・・</td></tr></thead><tr><td>・・・略・・・</td></tr> <tr><td>・・・略・・・</td></tr> </table>直接、theadに対してCSSを適用してあげればいいから。「thは使うけど、theadやtbodyやtfootなんて使わないよ。」「めんどっちーなー・・・」なんて思っていたけど、ちゃんと書いておくとメリットがある。テーブルのヘッダーやフッタを使わない（装飾しない）ってのならなんら問題ないかもしれないけど最初からそうしておくことで、あとから装飾したいときとか、他の人がするときとかメリットが沢山あるんだなって実感したのでした。･････つづくWeb標準にアプローチ（サイト版） || 東京２３区中心・駅近ホテルズ

2006/09/29

コメント(0)
フォームの入力欄に気を遣うためのJavascript

JavaScriptポケットリファレンス改訂第3版Web標準の教科書時々見かける、気の利いた機能を追加してみましょう。お仕事のついでに見つけたものなんですけどね。時々見かけるでしょう？こういうの。▲入力欄をクリックすると下の図のように消える。　▼それぞれの入力欄をクリックすると、表示されていたテキストが消える。　▲（左）検索フォームなどで見かけるタイプ／（右）コメント入力欄などで見かけるタイプクリックしたら、valueに「空」を入れているのは、なんとなく想像のつくところ。でも、どーやってすんだろう？なんて思っていたんですね。まさか、ここまで短いスクリプトを仕込んでやるだけでよいとは思ってもいなくて。■フォームの入力欄に気を遣うためのJavascriptシングルラインの場合の例<input name="name" type="text" value="入力してください" onFocus="javascript:this.value=''">マルチラインの場合の例<textarea name="comment" cols="25" rows="5" onFocus="javascript:this.value=''">メッセージをお願いします</textarea>消えて欲しいなら、もともと、入れておかなければいい！って思うかもしれませんね。でも、Web標準の視点からすると、マルチラインのテキストエリアには、入れておくことが推奨されています。こんなちょっとのコードを書くだけで改善できるのなら、してみてもいいなって思いませんか？私は、早速しちゃいました♪ ･････つづくWeb標準にアプローチ（サイト版） || 東京２３区中心・駅近ホテルズ

2006/09/28

コメント(8)
CSS Nite in Nagoya 長谷川さんのネタを少し咀嚼してみました

スタイルシートスタイルブックWeb designer 2．0進歩し続けるWebデザイナーの考え方Web標準の教科書WEBレイアウト・セオリー・ブックスタイルシートスキルアップ・デザインブック（1）スタイルシートスキルアップ・デザインブック（2）ちょっとしたことですが、色々いじってみたコトをメモします。よかったら、試してみてくださいね。イベントに参加していなくても、ヒントは見つかるんじゃないでしょうか？※核になる部分だけのソースコードです。※赤字部分が追加 or 変更した部分です。※もとのレポート（CSS Nite in Nagoya の私のレポ）は、こちらをご参照ください。１．テーブルで行の交互に背景色を付ける偶数行目だけに背景色を付ける⇒奇数行目も背景色に色をつける※(X)HTMLのソースコードは、適当に簡略化して、適当なテキストを入れてあります。------------ CSS------------.evenrow{ background: #efefef;}.oddrow{ background: #ddefef;}------------ Javascript------------function rowcolor(){ var rows = document.getElementsByTagName("tr"); for(var i=0; i<rows.length; i++){ if (i%2==1){ rows[i].className = "evenrow"; }else { rows[i].className = "oddrow"; } }}------------ (X)HTML------------<table><tr><th>No.</th><th>Name</th></tr><tr><td>001</td><td>Akio.Suzuki</td></tr><tr><td>002</td><td>Taro.Kimura</td></tr><tr><td>003</td><td>Maki.Sakura</td></tr><tr><td>004</td><td>Aiko.Murata</td></tr><tr><td>005</td><td>Jiro.Tanaka</td></tr></table>２．四方角丸を表現する（↑）こんな感じにしたいと思います。参加者さんへのメッセージ^^firstChild、lastChildのところです。※かなり簡略化しています。やってることはほとんど同じ。ちょっとだけ咀嚼。------------ CSS------------※画像は適当に作りました。（top.gif：上の角丸／btm.gif：下の角丸）body { background: #cccccc;}#content { width: 400px; background: white;}#content .intro { background: url("./img/top.gif") no-repeat top center;}#content .more { background: url("./img/btm.gif") no-repeat bottom center;}p { padding: 5px 10px;}------------ Javascript------------function findchild3(){ var content = document.getElementById("content"); var p = content.getElementsByTagName("p"); p[0].className = "intro"; p[p.length-1].className = "more";}------------ (X)HTML------------「id="content">」で改行すると一つ目の<p>のCSSが有効にならないので何とか解決したくてトライしたのが上のJavascript。<div id="content"><p>段落１</p><p>段落２</p><p>段落３</p><p>⇒つづきはこちら</p></div>３．リンク先のドキュメントに応じてアイコンを表示するスクリプト的な咀嚼はなしです。アイコンに注目してみました。これに使われていたアイコンたちは、SILK ICONSですね。どっかで見た～と思っていたら。結構、緩いライセンスで自由に使える1000種類のアイコンたちです。Creative Commons license（http://www.creativecommons.jp/）の2.5に帰属しています。バックリンクとメールをすればOKかな。詳しくは調べてみてください。⇒famfamfam.com: Silk Iconshttp://www.famfamfam.com/lab/icons/silk/----------------------------長谷川恭久さんの著書　●スタイルシートスタイルブック　●Web designer 2．0進歩し続けるWebデザイナーの考え方･････つづくWeb標準にアプローチ（サイト版） || 東京２３区中心・駅近ホテルズ

2006/09/25

コメント(0)
CSS Nite in Nagoya より帰還　（レポートアップ）

2006年9月23日。待ちに待った CSS Nite in Nagoya に参加してきました。台風14号は日本からそれて行ってくれたおかげで名古屋の空は快晴！お昼ご飯を食べすぎて苦しい思いをしながら、会場へ向かいました（笑）午後３時～７時半くらいまでという、なかなかなの長時間。信じられないくらい肩が凝りました（汗）もうちょっとゆったり座りたいな～というのが会場コンディション？の感想。室内は綺麗で、スクリーンもくっきり見えて、そのあたりは満足でした。帰宅後は、疲れて果ててバタンキュ～。10時間以上爆睡！充実感も疲労度もマックスだったようですよ。今も、頭がギュ～って感じで、まだ眠れますね（笑）いくらでも眠れそうだけど、忘れないうちに色々とレポに残します。プレゼンターは、以下のお三方。益子貴寛さん（著書「Web標準の教科書」は私の愛読書です）http://www.cybergarden.net/長谷川恭久さん（テンポ抜群のプレゼン進行）http://www.yasuhisa.com/could/鷹野雅弘さん（会場のウケが活動力？･･･笑）※まぐまぐから発行されている　「DreamweaverでWeb標準(XHTMLとCSSでサイト構築)」を読んでいると　より理解が深まります【益子さんのプレゼン　～サイバーガーデンが考える次世代のWebライティング～】事前に配布資料があって、予習ができました☆お三方ともそうですが、プレゼン慣れしているな～というのが正直な感想。楽しいけれど、印象、プレゼン進行ともにクールですね。少しキーワードが難しくて、ハテナをぶっ飛ばしながら聞いてました。この辺りが、ご本人もあげていた「ミドルレンジをどのあたりに想定するか」なのでしょう。表現の仕方について、かなり凝縮されて説明されていたので頭がギュ～！となってしまいました。コンテンツの配置、フォームの設計、表現の仕方。「私、やっちゃってるよ！」と、ココロのなかで呟きながら今後は「*（アスタリスク）をフォームの必須項目のマークにしないぞ！」と決断したのでした。⇒フォローアップ：益子貴寛さんの資料（PDF＆MP3）【長谷川恭久さん　～CSS3をJavaScriptで先取り実装！～】お願いですから、あまりツボにはまらせないでください。クリエイターさんってのは、愉快な方が多いですが、長谷川さんはツボですね。テンポが抜群で、飽きさせない。お三方の中で、一番プレゼン時間が短く感じました。JavaScriptって可能性が広がって楽しいですね～「なんちゃって」でしか使ったことがなかったのでもっと有効的な使い方ができる！とワクワクして聞いていました。10行以下のコードで表現の可能性が広がるなら、使ってみたいと思いませんか？ネタとしては、以下の３つ。テーブルで行の交互に背景色を付ける四方角丸を表現するリンク先のドキュメントに応じてアイコンを表示するより、クリーンな（X）HTMLコードに、より役割を分担した構造にするために･･･著書「スタイルシートスタイルブック」もそういった視点から、書かれているのかな～「１」のネタは、鷹野さんのメルマガでも違った切り口？で紹介されていました。長谷川さんのプレゼン中にもあった JavaScript のライブラリ「prototype.js」を使ったものです。http://blog.mag2.com/m/log/0000169311/107712347.html少し長いですね。学んできたことを組み合わせたら、もうちょっと短いコードがかけそうな気がしています。document.getElementsByTagNamedocument.getElementByIda[i].getAttribute("href")これと、JavaScript とか、他のプログラム言語を知ってるだけで随分と表現の可能性が広がりますね！私、学生の頃、プログラミングは大っ嫌いな科目でした。就職してから、まともに覚えたのですが、「やってて良かった～☆」と思うのはこんなとき。短いコードなら、割と楽に追えるし、少々長くてもなんとかね。ちょっと嫌いなくらいがちょうどいいのかも。好奇心が勝てばね。⇒フォローアップ：長谷川恭久さんの資料（PDF&MP3）【鷹野雅弘さん　～Web標準時代のDreamweaverテンプレート活用～】テンプレートを軽んじちゃぁいけないのでしょうね～と思いつつ、どうも億劫になったり（笑）有効的に使うのはアイデア勝負ですね。鷹野さんのパワーブック？の中身を覗き見しつつのプレゼンでした。そこにテンプレートのヒントがあったりして。基本のレイアウト別のテンプレートを登録しておくってはどうよ？色んなマルチカラムのレイアウトパターンがあるよね～いくつか、ソースコードとして保存しているけど、そういうのを登録するのも活用方法だなと。テンプレートを活用して、よりクリーンなソースコードで組み上げていくときのポイントとかコツとか。そいうったものを吸収してきました。プロパティインスペクタは使わない（やや語弊がありますが <(_ _)> ）･･･私はほとんど使わない･･･HTMLエディタを使うことが多いてのもあるけど。DW使うときは隠してしまえ！（笑）とか思ってる私。便利なのは、画像の縦横サイズが自動で入るトコなんだけど。そこをクリアすれば本当にイラナイ。テンプレートでbodyを変更する方法これ、メルマガで読みました＾＾「今、このカテゴリにいますよ」を表現する方法とか。http://blog.mag2.com/m/log/0000169311/106746861.htmlbodyのid属性を変更すると、ページごとのCSS設定が楽になる！「CSSシグネチャ」というそうですよ。⇒bodyのid属性の変更をDreamweaverMXで試してみました♪【下図（A）】テンプレートで属性を編集可能にする方法組み合わせ技の「@@PageTitle@@」は目からウロコですね。参加者には分かるハズ！⇒目からウロコ技をDreamweaverMXで試してみました♪【下図（B）】テンプレートでオプション領域を設定する方法長いページには「トップへ戻る」をつけて短いページには付けないといったタイプのテンプレートの設定方法。これも、メルマガで予習済み♪しかーし！実践してみたのは、イベント後（汗）⇒DreamweaverMXで試してみました♪【下図（C）】テンプレートでリピート領域を設定する方法同じ形（レイアウト）のもの（テーブルとかリストとか）をポンポン追加したり順番を変えたりするのに超重宝！新着情報とか、カタログの一覧ページとかを例に、その重宝振りを伝授してみえました＾＾⇒DreamweaverMXで試してみました♪【下図（D）】（A）bodyのid属性を変更（B）@@PageTitle@@（C）トップへ戻る（D）リピート領域CSS Nite が鷹野さんのメルマガのライブ版的なところがあるのでメルマガ（バックナンバーでも十分☆）を読んでおくと、もっともっと分かりやすいと思います。予習と復習って感じですね。DWって使えるところは、本当に使える。テンプレート用のコメントタグは、ちょっとお邪魔だけど･･･Studio8 欲しい･･･でも、高いので手持ちのバージョン（MX）で実践できるところを使っていこう！と決意して帰宅して今日。全部MXで、できるんですね（汗）バージョンアップする必要なーし！えへ。私が、DWをはじめて触ったのは、就職してからでした。「使って覚えろ！」ってのは、まぁよいのですが便利な使い方とか、ベースになる部分は、教育すべきではないか？と思います。適当に使い始めると、勿体無いところがいっぱいあって・・・これも良し悪しかもしれないけれど知らなくて要領悪くなっちゃうのは企業的にマイナスでしょう？なんにしても、好奇心とモチベーションが問題か（汗）「そんな余裕ない！」ってのが本音っすかね（笑）⇒フォローアップ：鷹野雅弘さんの資料（PDF&MP3）【ためになるCSS Nite in Nagoya スポンサー（など）情報】クリエイティブコモンズhttp://www.creativecommons.jp/こういうライセンスがあるんですね。「All Rights Reserved.」だけじゃない！a-bloghttp://www.a-blog.jp/トライアル版があるそうです。30日間がトライアル期間。・・・ってことは、払わなかったらキャンセルってことかな？人材派遣・転職支援のデジタルスケープhttp://www.dsp.co.jp/Webディレクターさんを渇望してらっしゃいます。名古屋まで行くと、この手の職は困らない？VOXhttp://www.vox.com/新しいSNSのカタチ･･･ですね。withDhttp://wd.dsp.co.jp/WEB・ゲームなど各分野のデザイナー・クリエイター・ITエンジニアの方のための仕事探し応援サイトWCANhttp://www.wcan.jp/ムービーとPDFが載っかっていました。以上で～す！それから･･･鷹野さんをはじめ、プレゼンターの益子さん、長谷川さん、スタッフの皆さんお疲れ様でした。次回があれば、また、参加したいイベントです！CSS Nite 公式ブログhttp://cssnite.jp/レジュメやら資料やら、当日の音声やら、アップしてくれるので有難やぁ～<(_ _)> ･････つづくWeb標準にアプローチ（サイト版） || 東京２３区中心・駅近ホテルズ

2006/09/24

コメント(4)
class属性に複数のクラス名を設定する（区切り文字は空白文字）

スタイルシートスキルアップ・デザインブック（1）スタイルシートスキルアップ・デザインブック（2）詳細HTML基本活用辞典学びました。　　class="aaa bbb"なんじゃ～それ！？！？！？クラス属性の値に空白文字が含まれているものに遭遇しました。これは、複数のクラス名を割り当てるときの書き方ということが分かりました。W3C勧告の日本語訳から説明を抜粋します。このことって調べてもあまりヒットしてこないのよね。7.5.2 要素識別子: id属性とclass属性　　　：　　中略　　　：　　　class = cdata-list [CS] この属性は、ある要素に1つのクラス名を割り当てるか、または複数のクラス名を設定する。幾つの要素に対してでも、同じクラス名あるいはクラス名群が割り当てできる。複数のクラス名については、空白文字によって区切らねばならない。http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/struct/global.html週末はお出かけなので、台風の進行方向を気にしていたのだけどどうやらそれていくようです。たぶん。海のほうへぐにっと･････つづくWeb標準にアプローチ（サイト版） || 東京２３区中心・駅近ホテルズ

2006/09/21

コメント(0)
「スタイルシート・スキルアップ・デザインブック２」レビュー其の壱

実践中！実践中！「スタイルシートスキルアップ・デザインブック（2）」の実践中！Project1終了です。この書籍はProject10まであるんですよ。まず、難点をあげておきますと･･･サポートサイトからダウンロードしてきたファイルのどのHTMLファイルを見たら書籍の該当箇所のプロセスまで進んでいるのかがわからないところですね。これは、ちょっとわかれば、ブラウザに表示することで判別可能な部分もあるけれど。今ここですよ！って目印を付けてくれるともっと使いやすいと思いました。あと、いきなり文書化宣言が変わっているのにビビリました！最初のファイルは HTML4.0 Transitional。いつの間にやら HTML4.01 Transitional。これが違うだけで、スタイルシートの適用のされ方が違って、どーこー！？って迷子になっちゃいます。（ch0102.htmlとch0103.htmlで変わっています。）良い点は、やっぱり楽しいし、手に取るように（やや戸惑いつつも･･･笑）わかる！レベルアップしているの感覚があるところこの感覚はやってみなくちゃ、わからないものですね。Project1で、私が得たスキルは、絶対配置の有効的な使い方です。うん。これよく分かってなかったのですが、理解が深まった感じですよ。float愛好家とまでは言わないけれどfloatしか使えていなかったので、とっても嬉しい実習でしたProjectの最後についている応用問題も（１）は楽勝にできるようになりました。（２）は梃子摺りました･･･理解できないものがひとつ。むむむ･･･div#infoのmargin-topの値の求め方が分からない･･･もしも、この書籍を実習して見える方がいらっしゃったら教えてくださると嬉しいです♪ま、すんなり分かっちゃうのも面白くないので、後日、振り返ってみることにします。スタイルシートスキルアップ・デザインブック（2）著者：エリック・A．メイヤ／吉川典秀出版社：毎日コミュニケーションズサイズ：単行本／279p発行年月：2006年01月本体価格3,000円(税込 3,150 円)送料別【コメント】初級レベルを脱出した人向けの書籍です。説明書きの調子が、面白いんですよ！「ちょん切られる」とか、その他ちょぼちょぼ（笑）親しみやすさも売りのひとつのようです。私は、このシリーズの(1)を購入していませんが、十分に楽しめます♪ちなみに、CSSを触り始めたのは今年の5月中旬頃だったと思います。少しできるようになったけど、実践的なことを学びたいなという方には良書となることでしょう☆夕日の綺麗な夕方でした。空見てますか？･････つづくWeb標準にアプローチ（サイト版） || 東京２３区中心・駅近ホテルズ

2006/09/21

コメント(2)
Web標準時代の角丸ボックス

Web標準の教科書スタイルシートスキルアップ・デザインブック（2）鷹野さんのメルマガを引き続き実行中です。とってもよいバックナンバーがあったのでご紹介しますね。鷹野さんとは、「DreamweaverでWeb標準(XHTMLとCSSでサイト構築)」を発行してみえる方で、CSS Nite の主催者株式会社スイッチの代表です。■Web標準時代の角丸ボックスhttp://blog.mag2.com/m/log/0000169311/107100182.htmlこの辺りの日のバックナンバーから遡って読んでみるととてもメリットがあると思います。角丸ボックスやそれを応用した角丸タブの作り方が詳しく解説されています。使ってみたくなっちゃいますね～テーブルを使わないでも、これだけスマートにできちゃいます。嬉しいWeb標準へのアプローチ方法ですね。台風は去りました。次の台風が発生していますね。晴れの間に洗車してきます＾＾･････つづくWeb標準にアプローチ（サイト版） || 東京２３区中心・駅近ホテルズ

2006/09/18

コメント(0)
CSSレイアウトヘルプ

Web標準の教科書速習Webテクニックスタイルシート上級レイアウト IE7beta3 のWeb標準実装具合が気になる中、IE6のバグ回避法についての必見ページをメモ。■CSSレイアウトの定石　WinIE6バグ回避法http://mb.blog7.fc2.com/blog-entry-83.html「フォントサイズとスタイルシートについて思う」で「%」と「ems」は使わないでおこうと思う、と書いたのだけどこのページを読むと、IE7が定着するまでは「%」がベストっぽいと考えるようになった。「%」での指定と「キーワード」での指定をうまく使うか･･･実装差異には泣かされるね～掛け合わせになっちゃうのは、計算上面倒くさいんだけどな（汗）難しい専門用語は多用されてないので、言っていることもわかりやすいと思うよ。margin、paddin、width、border の決まりごともこのあたりから覚えていったらOKじゃないかな？って思います。私、とっても助かりました～♪時々覗くと、バグ関連、いいコト書いてあるかも。な～るほど！ってヤツがね！･････つづくWeb標準にアプローチ（サイト版） || 東京２３区中心・駅近ホテルズ

2006/09/17

コメント(0)
フォントサイズとスタイルシートについて思う

Web標準の教科書WEBレイアウト・セオリー・ブックスタイルシートスキルアップ・デザインブック（1）スタイルシートスキルアップ・デザインブック（2）すっげーよ！CSS Nite in Nagoya の参加申込者数が200人を超えたってよ！最初144人が定員だったから、とっくに打ち切られていると思ったのにまだ、受け付けるってよ！迷っている方がこの記事読んでくれていたら、駆け込みですよ！プレゼントもいっぱいあるどー☆　⇒http://cssnite.jp/nagoya/info_nagoya.htmlさて、本題（笑）スタイルシートでフォントのサイズ指定をする機会って割と多いと思うんだけどここでちょっとメモ。よく使うのが「%」だよね。「px」も多いな～。私はなるべく「%」なんだけど･･･これがちょっとね～ems や % は、掛け合わせの問題がある！90%に指定された内側で、さらに90%と指定すると･･･（涙）･･･ややこしいっつーの！という訳で、ems と % は使うのを避けたほうがいいって感じです。ユーザビリティの視点から見ると、px もよろしくないですね～IE6だと、文字の大きさが変えられないからね。xx-small、x-small、small、medium、large、x-large、xx-largeこれらを使っていこう！と思うのですが表示サイズがブラウザによってマチマチなんざんすよね～ばーかー！画像とテキストのバランスが難しい。デザイン的な視点と、レイアウトバランス、それにユーザビリティ。そうそう。納得できるフレーズを見かけたのでメモです。　　クローラこそ、アクセシビリティが必要もっともだと思いませんか？＾＾･････つづく Web標準にアプローチ（サイト版） || 東京２３区中心・駅近ホテルズ

2006/09/15

コメント(0)
IT Pro コラム： Web標準の基礎と実践

Web標準の教科書スタイルシートスキルアップ・デザインブック（1）スタイルシートスキルアップ・デザインブック（2）以前に読んだ記事も含めて、改めて７回分全部読みました。IT Pro コラム： Web標準の基礎と実践http://itpro.nikkeibp.co.jp/webdesign/※真ん中くらいまでスクロールすると見えてくるよ！「Web標準の教科書」の著者、益子氏が書いているコラムなので大体のところは落とさずに頭に蓄えられていました。普通にできるようになっていました。マークアップ的にはね。でも、やっぱり抜け落ちるのが人の脳だわ（笑）第5回の「11.属性は略記できない」ってところが完全に抜けていたのよね～これは、改めて頭に入れておかないと！今のところ、XHTMLで記述しているものでcheckedを使ってないのでセーフだったけどね（汗）■Web標準のお約束：属性は略記できない！正：　<input type="radio" checked="checked" />誤：　<input type="radio" checked />※XHTMLで記述しない場合は「<input type="radio" checked="checked">」です。今日ね、一年ぶり？にデュランタの花が咲きました。多分、「宝塚」って種類だと思います。もっと花っぷりが良くなったら写真をアップしま～す＾＾･････つづく Web標準にアプローチ（サイト版） || 東京２３区中心・駅近ホテルズ

2006/09/12

コメント(0)
Web標準関連リンク

Web標準の教科書スタイルシートスキルアップ・デザインブック（1）スタイルシートスキルアップ・デザインブック（2） Web標準に関する素敵なリンク集のメモです。やっと、CSS実装徹底検証! そこが知りたいIE7 をちゃんと読んでます。IE７かぁ～それ用にあてるマシンがないわ･･･と思って今日も配信されてきたメルマガを読んでいるとスタンドアローーーーーーーーーーーーーーーンがある！配布サイトは英語版だけど、なんとかなるぜよ！（笑）⇒Internet Explorer 7 Beta 3 in standalone modehttp://tredosoft.com/IE7_standalone（ページの下部にダウンロードリンク有り）早速起動してみた！タブブラウザーだった！XML宣言の実装差異が解消されていた！ん？「メニュー」とか「編集」とかいうボタンっつーか、あれはどこいった？オプションとかから引っ張り出すのだろうか？まぁいっか＾＾　これで表示状況をテストできるね♪■Alternative Design Project by Momomohttp://adp.daa.jp/WebデザインテクニックやWebのことについて、色々と書かれている。メモブログのように付けているブログのようだが、内容は内容は濃くって、しかも読みやすい。■DreamweaverでWeb標準(XHTMLとCSSでサイト構築) http://www.mag2.com/m/0000169311.html 鷹野雅弘さんが発行しているメルマガのバックナンバーをひと通り実行してみたい。バックナンバーは有難いことに全部公開されている！最近、ちょっと･･･Dreamweaverは･･･と思っていたけど使い方だけじゃなくて、Web標準にフォーカスしてある内容なので、一読しておきたい♪ ■CSS実装徹底検証! そこが知りたいIE7 http://journal.mycom.co.jp/special/2006/ie7beta2/ 随分前にプリントアウトしたけどさっと目を通しただけでちゃんと読んでなかった記事。 IE7は、どうやらまだまだWeb標準には歩み寄りの度合いが･･･（汗）全２４記事あるので結構大変ね～ ■Web標準の基礎と実践 http://itpro.nikkeibp.co.jp/article/COLUMN/20060613/240726/?ST=webdesign Web標準の教科書の著者、益子貴寛さんが書いているIT Pro のコラム。このコラムは、まだ、終了していなくて、第７回まで掲載されいるところ。以降の記事も楽しみ♪ 今日は湿度が高くって、なんだか蚊も多い気がします。湿気が多いと蚊は元気になるのでしょうか？･････つづく Web標準にアプローチ（サイト版） || 東京２３区中心・駅近ホテルズ

2006/09/09

コメント(2)
Web標準とIE7 -XML宣言改善-

Web標準の教科書外は虫の音がして、窓からは涼しい風が入ってきています。日が落ちて暗くなったら、すっかり秋の気配ですね。お仕事を待っている間と、駅近ホテルズの更新の気分転換にIE7のWeb標準っぷりについて、ちょっと読んでいました。XML宣言の阿呆っぷりが改善されるようですね。んまぁ、これっくらいはとっとと直していただきたいものです。宣言したら、下位互換モードで表示されるってどないやねん！次のWeb標準にアプローチ（サイト版）の更新のネタはIE7についてにしようと思っています。改善された点、保留にされた点、多々あるようだけれどどこまで反映されるんでしょうね～Windows Vistaの発売が来年１月とか言われていてそれに乗っかるIEがIE7+とかいうそうですよ。なーんか、ロゴも発表されたようですね～どこに載っていたっけ？⇒ここ参照（IE公式ブログの記事）「そのまんまやんっ！」ってすっごく、突っ込みいれたいんですけど～（笑）･････つづく

2006/08/31

コメント(2)
CSS Nite in Nagoya 参加申し込み

以前から待ち望んでいた CSS Nite。http://nagoya.cssnite.jp/日時：2006年9月23日（土曜日）　時間：15時～19時（予定）（上のアドレスに詳細が載っています。）名古屋で開催されることになって、日程も決まって、あとは参加費用がどこまで下がるか。銀座での開講は、きっとスポンサーが沢山ついているからなのでしょう。無料。名古屋開催は、参加費用がスポンサーの出現によりかわります。一番下がって２０００円。協賛会社が、ぼちぼち出てきてくださっているので、参加することにしました♪スクール形式ってのが気になるところなのですが＾＾；Web標準の教科書の著者さんである益子氏と拝読しているメルマガの発行者さんである鷹野氏もいらっしゃるとあって楽しみにしています♪事前登録が必要ですので、Web標準、CSSに興味のある方は参加申し込みをされてはいかがでしょうか？･････つづく

2006/08/26

コメント(2)
スタイルシートの余白関連事項について

セオリー・オブ・スタイルシートWeb標準の教科書HTMLタグ＋スタイルシート辞典ちびHTML＋スタイルシートWebデザインブックHTML ＆スタイルシートプロ顔負けのホームページ作成術無料ブログで始めるスタイルシート入門「XHTMLマークアップ＆スタイルシート」リフォームデザインガイドブック今更ながら、スタイルシートのmarginとpaddingに翻弄されています。margin：指定した範囲の外側に余白を作るpadding：指定した範囲の内側に余白を作るこの二つはOKね。でも、IEとその他のブラウザでは表示に差異があるのは、有名な話なんだけど･･･このことも頭に入れつつ、今更ながら知ったスタイルシートの余白関連のことについてメモメモ。私が書いた、HTMLとCSSのコードは以下のとおり。--------- CSS---------body { margin: 0px; padding: 0px; background-color: #cc0000;/* ワインレッド */ text-align: center;}#body { margin: 20px auto; padding: 20px; width: 240px; background-color: white; text-align: left; border: 1px solid;}---------- HTML----------<body><div>ここがヘッダー</div><div id="body">メイン</div></body>まぁ、なんて簡単でお粗末なコードでしょう（笑）ヘッダー部分が何も指定されていない！ダメ！なんて突っ込みはしないでください<(_ _)>こうやって書いた場合、背景が240pxのワインレッドで、白い部分が240pxになると思っていたの。そして、240pxの内側に四方20pxの余白ができるんだ！って認識だったのね。それがそれが･･･実行結果は下の図のようでした。▲上：Firefox1.5　▲下：Internet Explorer 6.0えぇっっっっっっっっ!?(* □ )~~~~~~~~ ﾟﾟちょっと待ってくださいよ～どっちも外側に余白作っているじゃん！ちなみにMacIEもそうだったし、WinOperaもそうでした。うん。まぁいいけれどもさ、表示に差異がないというのなら、まぁいいけれどもさ。私の知識の中では、paddingは内側だ！という部分が強調されていたので背景の白い部分は240pxで、その内側に四方20pxの余白ができると思っていたのね。一般に言われている、IEの表示状況。実際のところは、240pxに左右20pxの余白がプラスされて、合計280pxに拡張される。これが現実。きっとIE７は、そうなっているんだろうなぁ～今回の余白ネタ、今までヘンテコにならなかったのが不思議なくらいビックリですよ。今日、計算しながら、レイアウトをしていたら、どうしても隙間ができちゃっておっかしーなーと思っていたら、表示の差異はないわ、知識は間違っているわ＾＾；改めて思い知らされたCSSネタでした。チャンチャン♪ ･････つづく　

2006/08/19

コメント(0)
CSSレイアウトにするとテーブルレイアウトより４０％文字数カット

おしえて！！ DREAMWEAVER 8ユニバーサルHTML／XHTMLセオリー・オブ・スタイルシートWeb標準の教科書サイト版Web標準にアプローチに新しい記事を追加しました。いよいよCSSレイアウトの基本レイアウト用テンプレートを追加しにかかります。開設してから、一ヶ月くらい更新できなかったので文の調子とか、思考回路とか、どうなっていたかな～と思い出しながら読み返しても見ました。少しタグの知識があったら、読み進められる内容だと思いますので広場以外にもサイトを作ってみたいな♪って考えているならばその手助けができるのではないかと思いますよん＾＾テーブルレイアウトと、CSSレイアウトを比較するとタグの部分というのかな？ページの構造の部分では４０％くらい文字数がカットできるのね。記事を書くために、ララン♪とサンプルを作ってみたら、そうなったの。１ページを軽く作ることは、Yahoo！にも好かれちゃうらしいし他のサーチエンジンロボットさんにも読んでもらいやすいページになるね。読み上げソフトにも有効かな。そーれーとー！Web標準準拠のウェブページにしてあるとロボットに拾われるスピードも速くなった気がするよ。私のブログ繋がりのお友達にも、そう実感するって言っていた人がいました。先日公開した「東京23区中心・駅近ホテルズ」がね５日目にしてGoogleさんに登場！一応、サイト登録は申請して５日後なんだけど適当に作ったサイトは、２週間弱かかっていたと思うんだよね～ついでなので、Yahoo!のロボットさんにも申請してみよう。　⇒Yahoo!検索エンジン用ロボットの巡回先への推薦これ、よくアドレスを忘れちゃうんだよね。どーもお気に入り登録をしたがらない、私の右手（笑）今日、たった今、申請してみたので、何日後に拾ってもらえるか楽しみだわ。２～４週間が目安なので、それより早かったら、Web標準化はかなり嬉しい試みね。サイト版Web標準にアプローチも同時に申請してみたの。どっちが早いでしょうね～ブログ版とサイト版と名前がほっとんど同じだから、ヤバイかなぁ～そうそう、お盆って銀行は営業中？らしいね～知らなくて、確認していない入金モノが。ぎゃー！確認遅れてる！･････つづく

2006/08/15

コメント(12)
遂に来た！CSS Nite in Osaka/Nagoya

Web標準の教科書CSS（スタイルシート）＋HTML（エイチティエムエル） recycle booスタイルシートスタイルブックいやぁ！！！待っていたんですよ！この時を！とうとう、名古屋でCSS Niteが開催されるそうですよ！詳細は CSS Nite のブログで近日発表されるとのことです。ナディアパークっぽいことを本日付の記事で告知されていました。しかーし！これが多分夜なんだろうな～という予想･･･毎月銀座のアップルストアで開催されている時刻は夜の７時ですもの～夜の街は、ちょっと怖くて･･･誰か一緒に行ってくれる人、人、人･･･終電なら間に合うだろうけど、心細いですよ。ホテル取るか、どうするか。お隣の県にわざわざ宿泊するのもちょいとね～　　　　　　↑↑↑ポチッと押してくれると嬉しいの♪講師の先生はだれなんだろうな。お題は何なんだろうな。色々楽しみではありますが、問題もありあり＾＾；名古屋は土曜日っぽいから、お昼とかにしてくれないかしら？学生時代は１０時の電車とかにも乗っていたな～父上に駅までお迎えに来てもらったのを思い出しました。懐かしい･･･今は、自分で運転できるから、お迎えの必要はないけどね。･････つづく

2006/08/10

コメント(6)

全64件 (64件中 1-50件目)

1 2 >

ジャンル別一覧

出産・子育て
ファッション
美容・コスメ
健康・ダイエット
生活・インテリア
料理・食べ物
ドリンク・お酒

ペット
趣味・ゲーム
映画・ＴＶ
音楽
読書・コミック
旅行・海外情報
園芸

スポーツ
アウトドア・釣り
車・バイク
パソコン・家電
そのほか
すべてのジャンル

人気のクチコミテーマ

パソコンサポーターがすすめるパソコ…

◎メーカー再生品ノートパソコンレ…

(2024-04-28 10:42:56)
花、風景の写真を撮るカメラとレンズ

NICON 1 J1のレンズの故障。

(2024-04-08 21:21:48)
家電よもやま

REON POCKET5　買ってみた

(2024-04-26 21:31:32)

Web標準にアプローチ 〔まいまいのお宿。〕

[Web標準] カテゴリの記事

いわゆるJISの文字コード宣言

CakePHP レポート 其の壱

<h1>要素（タグ）の適正な使い方についてふと気づく

リンクテキストを「text-indent:-9999px」でふっ飛ばすときについでにしておくこと

CSSで背景画像の位置設定をするときのこと

余白（margin／padding）にマイナスの値を使うべきではないのか

ハイブリッドなホームページづくり

@importを使って外部スタイルシートを読み込む

Web標準にアプローチするよりも基本的なこと

スタイルシートのフォントサイズ固定に思う。

XOOPSをWeb標準にアプローチ（１）

Web標準の基礎と実践へアプローチ

行間指定「line-height」の使い方

CSS Nite in Nagoya 2007.3

userAgent一覧

xoops的ハイブリッドレイアウト

Web標準にアプローチ2007年版目次

Webデザインの本

HTMLのDOCTYPE宣言は軽視できない

CSSでidを指定する時は要素名とセットで記述

Javascriptによるスタイルシート切替でCSSレイアウトの位置ズレをカバーする

基準のソースコード

font-family の指定の仕方で フォームコントロールが化ける！

Web標準とSEOで

WordPress を触ってみる

IE7日本語版･･･ドキドキ

ウェブページの手直しがしやすいWeb標準の恩恵

Netscape の float 指定は信じられない･･･

標準準拠モードか過去互換モードかを見分けるツール

フォームコントロールにdisabled属性を指定すると･･･

続・ フォームの入力欄に気を遣うためのJavascript

色指定について思うこと

CSS：プロパティの一括指定を覚えてファイルサイズを節約

ページ背景の指定はきちんとする！

ウェブページをきちんとした構造でマークアップするメリット

フォームの入力欄に気を遣うためのJavascript

CSS Nite in Nagoya 長谷川さんのネタを少し咀嚼してみました

CSS Nite in Nagoya より帰還 （レポートアップ）

class属性に複数のクラス名を設定する（区切り文字は空白文字）

「スタイルシート・スキルアップ・デザインブック２」レビュー其の壱

Web標準時代の角丸ボックス

CSSレイアウトヘルプ

フォントサイズとスタイルシートについて思う

IT Pro コラム ： Web標準の基礎と実践

Web標準関連リンク

Web標準とIE7 -XML宣言改善-

CSS Nite in Nagoya 参加申し込み

スタイルシートの余白関連事項について

CSSレイアウトにするとテーブルレイアウトより４０％文字数カット

遂に来た！CSS Nite in Osaka/Nagoya

Web標準にアプローチ　〔まいまいのお宿。〕

CakePHP　レポート　其の壱

font-family の指定の仕方でフォームコントロールが化ける！

続・フォームの入力欄に気を遣うためのJavascript

CSS Nite in Nagoya より帰還　（レポートアップ）

IT Pro コラム： Web標準の基礎と実践