html/css

dtとddを横並びさせた時、IE6でddが3pxズレる時はzoom:1;

タイトルが全てだけど

dtとddを横並びさせた時、IE6でddが3pxズレる時はzoom:1;を付けるとズレなくなりました。
[html classname=”html-sh”]<dl>
<dt>乱雑</dt>
<dd>モックアップ</dd>
</dl>
[/html]
[css classname=”css-sh”]dt {
width:3em;
float:left;
}
dd {
margin-left:3em;
_zoom:1;
}[/css]

zoomの前の_はIE6用のハック
/にするとIE7以下に効く。

メモ / iframe 高さ取得変更 クロスドメイン

こちらのページをそのまま参考にしてhttp://ja.w3support.net/index.php?db=so&id=153152
iframeで別ドメインにあるページを開いた時に、自動的にheightを調整する方法を試してみた。
(※ 別ドメインにあるファイルにjsを追加する必要あり)

別ドメインのhtmlに手を加えずに出来たら、確実に嬉ションしちゃうけど難しいみたいすなぁ。

続きを読む

base href

base href

baseタグっちゅーのがあって、head内に記述すると
その指定以降の要素に適用される。
[html]<base href="http://sakurachiro/" />[/html]
みたいに書いておくと下の図のように
http://sakurachiro/を基準とした相対パスになるそうな。
(hrefに絶対パスと相対パスの両方指定出来るような解説をしてるサイトがあったけど絶対パスしか使えないハズ)

[image]base href

ちなみに記述した後の要素に適用されるので
[html]<!– A –>
<link rel="stylesheet" type="text/css" href="layout.css" />
<base href="http://sakurachiro/" />
<!– B –>
<link rel="stylesheet" type="text/css" href="layout.css" />
[/html]
(あれ、リンク貼ってないのにリンクになってる?)

こうゆう順番で書くと
A は普通の相対パス
B はbaseで指定した位置からの相対パスになります(した)。

[image]記述順による違い

自分で使う分にはメリットが思いつかないんだけど
baseタグを外部jsで吐き出すようにしておくと
リンク先のフォルダを簡単に変更出来たりする?

base target

target属性を追加するとそれ以降のリンクが指定した挙動で開くよ。
[html]<base href="http://sakurachiro/" target="_blank" />[/html]
_blankとかすげぇウザいですけど。

フレームを使ったサイトをいじくる時
target=”_top”を指定する手間が省けていいかも。
しかしこれ
ローカルで確認する時はどうするんだろう?
ローカルサーバー必要?

background-attachment:fixed;の基準点を勘違いしていた。

どの要素に指定しても、ブラウザ表示領域の左上が基準みたい

次みたいな書き方をした時に(至って普通の記述ですが)、場合によって背景画像が消える事があって気づいた。
[html]div {
background:#fef url(img/bg.gif) no-repeat right bottom fixed;
}[/html]

続きを読む

コンテンツはセンタリングしつつ、ブロック毎の背景をwidth100%で表示させて横縞にする(横スクロール時に背景が切れる問題解決版)。

これは、こないだのフッター / コンテンツの高さが少なくてもブラウザ下部に表示させるでも試していて、安易にdivを入れ子にしてみたら上手くいったようにみえて
ええ!こんなに簡単に実装できちゃっていいのかい?
なんて思ってたんですけど、実際は早とちりで。

ブラウザ幅をコンテンツ分の固定幅より縮めてスクロールバーが表示させ右にスクロールさせると背景が切れるという問題を見つけました。とほほ。

(*ちなみにこんなソース)
[html classname=”html-sh”]
<body>
<div id="content">
<div class="inner">コンテンツ</div>
</div>
</body>
[/html]
[css classname=”css-sh”]
#content{background:#f33;}
.inner{width:780px;margin:0 auto;}
[/css]

先に解決法を書くけど

コンテンツ部分のwidth(固定幅)と同じサイズのmin-widthをbodyに指定すればいいみたい

続きを読む

コンテンツの高さが少なくてもフッターをブラウザ下部に表示させる

ブラウザの高さに対してコンテンツ量が足りない時、
フッターの下に隙間が空いちゃって、薄っぺらい感じになっちゃうのを回避したい。

[image]理想と現実

つまり、コンテンツの中身が足りない時はフッターをブラウザ(ウィンドウ)下部に固定したい。

DEMO / コンテンツ量が少ないページでも、フッターをブラウザ下部に表示させるテスト。

続きを読む

ある要素内にpaddingが付いてる子要素があったりなかったりする場合に余計なclassを付けないでpaddingを揃える

[下に追記あり / 20100915]
タイトルが意味不明なのはわかってるんだけど、上手くまとめられなかったです。
あと内容はあまり役に立たないと思います。

例えば、aタグをdisplay:block;すると、クリック出来る範囲が広がるのでリンクが押しやすくなってちょっと優しかったり
背景をうまいこと操ってテキストなのにリッチなメニューを作れたりするのでご存知かと思いますが

ある要素内のテキストにaをdisplay:blockしてpaddingで広げる仕様のリンクが入ったり入らなかったりする下のようなhtmlとcssがあった場合,
[html classname=”html-sh”]
<dl>
<dt>dt / リンクなし</dt>
<dd><a href="#">dd / リンクあり</a></dd>
<dt><a href="#">dt / リンクあり</a></dt>
<dd><a href="#">dd / リンクあり</a></dd>
</dl>
[/html]

リンクのないdtにもpaddingをつけてレイアウトを揃えようとして、対策を何もしないと
[css classname=”css-sh”]
dt {
padding:10px;
background:#09c;
}
dt a {
display:block;
padding:10px;
background:#ace;
}
dd a {
display:block;
padding:10px;
background:#f7f7f7;
}
[/css]

dtのpaddingとdt aのpaddingでdt aのレイアウトが揃わない。
[image]現状dtとdt aのpaddingが合計されるので広がる

理想としてはこうしたいのが心情。
[image]dtの中身にリンクがあってもpaddingが変わらないようにしたい

簡単にどうにかする方法がないかなとちょっと考えてみた。

続きを読む

height:0;で画像置換(背景置換)するっス

画像置換用画像

前置き(おもひで)

なんでもかんでもcssでやりたがる時代の終わり頃に、text-indentに負の値を指定してテキストを画面外に飛ばし背景画像のみを表示させる画像置換(Image Replacement)が流行りました
(FirefoxのアドオンWeb Developerでcssを外したりして、文字だけのシンプル(質素)な表示になるコーディングに喜びを感じてた人も居たはず)。

その方法のメリットはうろ覚えだけどjavascriptを使わずにロールオーバーを作れて、音声ブラウザにも読み上げられて、”画像にalt”より”生のテキスト”の方がSEOに有利なんじゃないかとかそんな感じでしたっけ?

デメリットは、印刷設定で”背景を印刷しない”になっている(印刷用cssも用意されてない)場合に置換した部分が印刷されなかったり、画像無効css有効なブラウザブラウザだと画面外に飛ばしたテキストも背景も表示されないなど、これで不具合でるのって特殊な環境だからたいしたデメリットでもないよね?仕方ないよね?みたいな扱いだったような。

その後SEO界隈のtext-indentに負の値てスパムになるんじゃない?みたいな話題が絡んで、altをちゃんと入れておけばわざわざ画像置換しなくてもいいらしいですぜとか、jQuery便利!javascriptを自分でoffにしてる人の事なんてしったこっちゃないよ(最低限の情報が表示されれば問題ない)的な風潮になってcssで画像置換する機会が減ったり減らなかったりの毎日で、今の主流はどんな感じなんでしょうか。

とりあえずtext-indentさせずに画像置換するメモ

appleのサイトで使ってる感じのheight:0;overflow:hidden;paddingでやるやつ。

[html classname=”html-sh”]
<p id="irsample1">乱雑モックアップ</p>
[/html]
[css classname=”css-sh”]
#irsample1{
width:480px;/*画像の横幅;*/
height:0;
padding-top:100px;/*画像の高さ;*/
overflow:hidden;
background:url(画像url) no-repeat;
}
[/css]

背景画像で置換した表示結果

乱雑モックアップ

上記使用font / セプテンバー-教漢(無料お試し版)

(関係ないけどURLはURIの一部だから今までのURLはURIと書くのが正しいような事を聞いた気がするけどbackground:urlなんですよね、これはなぜだろう、うちの勘違いなだけでしょうか?)

続きを読む

段落って難しい。

お恥ずかしい話なんですけど、段落というものがよくわからんです。

わからんといっても、段落には形式段落意味段落の2種類があることや、それぞれの概念も一応知ってるつもり。
しかしそれでもイマイチ段落というものがどうしたら適切になるのかよくわからんのですよ。

意味段落をフィーリングでしか片付けられない。

わからんわからん言っても少なからず文章は書いてきたわけで、じゃあ今までどうやってきたのか?と過去を振り返ってみるとやっぱりフィーリング。
それと嗜好。

例えばその昔、次のような出来事がありました。

「あんたの書く手紙の文章が誰かに似ていると思っていたんだけどわかった、原田宗典っていう最近はエッセイばっかり書いてるけど小説家の文章に似てるんだ、読んだ事ある?」とたずねられた事があって、「読んだこと無いし誰だかしらん、どこが似ているのか?」と答えたら「大雑把に言うと文章に句読点というか読点があまりないところ」とのこと。

当時はなぜか読点(、)が嫌いだったのと、文章によくわからん勢いを持たせたくて区切りのわからない文章を書いていたので、たしかに上で言われたような書き方をしてた。

不思議な事に、そんな書き方をしていても(日本語で?)紙に書く手紙だと普通に読めてとくに読みづらくなりもしないみたい、言い回しが関係してくるのかもしれないし内容がないからなのかもしれないけど。

けどそのノリでメールを書いたり、フォーラムで質問したり回答したり、blogに文章を書くとこれがうまいこといかない(というか、うまいこといってない手応えを感じる)。
自分でも見づらいし。

徐々にメールは短文になり、質問などは細かく説明するようになって(気力と時間がある時は)文節が長くなって、blogの時はいまだにどうしたらいいのかわからないまま。

でもってWebサイト作成時の話

時代やhtmlの習熟具合によって変化してきた。
なぜなら最初は<p>(paragraph)の存在すら知らなかったので例に漏れず<br>の連続だったような気がするけど、詳しい事は覚えてない。

Web制作とは直接関係ない仕事でWebサイトを編集するようになってから(文章のルールが決められていない場合)は、句点(。)で改行が入ると個人的に見やすいような気がしたので句点ごとに<br>、これが形式段落。
1行分のスペースが開いたら意味段落だと思って<br>の連続で意味段落としてた、多分まだ<p>タグを知らない酷い話。

Web制作の会社に就職して、独学でHTMLを勉強してWeb標準っちゅー流れがある事を知ったり、lintで文法をチェックするようになったり、アメブロによくある改行を多用してるブログに嫌悪感を持つようになったり、観覧者のブラウザサイズは一定じゃないのに何かに合わせて改行をコントロールするのはどうなんだろう?と考えたりしてるうちに<br>を使う事に抵抗を感じるようになって句点(。)ごとに<p>を使うようになる。
しばらくそんな状態でやってきて今も基本は全部<p>だけど、<br>で形式段落、<p>で意味段落か形式段落に落ち着いた感じ。
結局、意味段落はここは意味の繋がりがあるよねってフィーリングのまま。

段落とかパラグラフとか

段落について調べて(検索)していくと、日本語には元々段落というものは存在しなかった的な話があったり面白い(Ted’s Coffeehouse 2: 日本語文章においての段落概念の欠如 (The Lack of the Paragraph Structure in Japanese Writing))

例えば『源氏物語』にはパラグラフ構造がなく、始めから最後までのっぺらぼうに続いており、日本の古典はすべてそうである、といっている。現在印刷されている古典にパラグラフの形が見られるのは、後の編集によるものであろう。

パラグラフって何だろう?

文章の節または段落。みたいな説明をよくみる。
または、トピックであったり、ひとつのテーマだったり、論点だったり主張だったり。

なるほどなぁと思った説明があったので引用させてもらうと。
パラグラフについて書いた外山滋比古。パラダイムのシゲルちゃんじゃないからね。(日本人と西欧人の思考形式の違いかぁ、一応なるほどだけど・・・) – Comments by Dr Marks

確かに「パラグラフとは段落のこと」である。そして、その段落とは文章の区切りであり、字下げ(indentation)や行を空けることによって区切られた文(sentence)のまとまりである。また、それぞれの文のまとまりは、一つ一つの段落の中で意味やアイディアが完結している。したがって、この最後の点が日本語の段落とは様相を異にする。

日本語の段落は、国語学者によって形式段落と意味段落という区別が試みられたように、普通は一つの(外形的・形式的)段落が意味やアイディアを完結することがない。一般的には日本語の段落はすべて形式的な(つまり字下げや行空けがあるだけで)段落に過ぎず、意味やアイディアが完結していない。意味やアイディアが完結するためにはいくつかの形式段落を繋ぎ合わせなければならない。そして、意味としてあるいはアイディアとして一まとまりになった(完結した)段落を無理に意味段落と呼んでいる。

したがって、日本語の見かけ上の段落(形式段落)は短く切れ切れであるが、英語のパラグラフであれば、見かけ上の段落(形式段落)と意味のまとまりの段落(意味段落)が合致するため、日本語の段落よりはるかに長くなる。(英語のパラグラフはすべて意味段落。)どうして日本語の段落が形式的で短いかということについては諸説ある。どうやら、英語の段落のように長い日本語は読みにくくなるらしい。これは確かにそうで、余も日本語のブログの段落は短い形式段落を採用している。

最初の「紙に書いた文章の読みやすさが変わらないようだ」云々は、句読点はないけど見かけ上のまとまりがあったからとか、読んでる人達が段落にこだわりがなかったからとか、短い文章だったからとか、社交辞令だったとかの理由が考えられるのかな?

Webの場合、日本語の段落として扱うより英語のパラグラフとして扱った方が自然ぽい。

パラグラフ・ライティングとトピック・センテンス

そうすると(うちはよく知らないんだけど)英文の定番らしいパラグラフ・ライティングとトピック・センテンスを使えば論理的な文章を自然なマークアップで記述できるようになるのかな?

パラグラフライティングの参考

第3回プロから学ぶ「わかりやすい文章の書き方」
実践!作文研究~メールマガジン・第190号
パラグラフライティングとトピックセンテンス | SEO 検索エンジン最適化 ソーシャルニュース

トピックセンテンスの参考

「トピック・センテンス」とは何か
トピックセンテンス(小論文の書き方)
実践!作文研究~メールマガジン・第194号

問題は

すでにある変更できない(そしてパラグラフ・ライティングとトピック・センテンスを踏まえていない)文章は、どのようにマークアップしたら適切になるのか?
なんだけど、やっぱりフィーリングなの?