乱雑モックアップ » html/css

html5で隙間

まこと — Fri, 26 Aug 2011 03:07:32 +0000

sectionとarticleの違いがよく分からないまま
ちょいちょいhtml5でコーディングを始めた
そんなこんなで画像の下に隙間ができる。

firebugを見上がら、なんだっけなーこれって思ってたけど
reset.cssのimgの指定がこうなってた

img{border:0;}

なのでvertical-align:bottom;を追加してみたら隙間が消えた。

img{border:0;vertical-align:bottom;}

昔、vertical-align:bottom;を指定してたと思うのだけれど、
なんで今入ってないんだろう
何か理由があって削除したのかな？

思い出せない

メモ / cssとjsをワンクリックで圧縮結合してくれるzbugsをやってみた

まこと — Sun, 01 May 2011 12:20:38 +0000

ついったーで流れてて気になったのでやってみた。
Merge, Minify, and GZip Compress JS & CSS, online tool

緑色のJoin Now it’s FREEをクリックして
メールアドレスとパスワードを登録し
urlを入力したらSpeed upをクリックして少しまつと完了

こんな感じのcssが

こうゆう風になりました。

iframeに開くページを、location.searchで受け取った値で変更させちゃっても問題ない？

まこと — Mon, 25 Apr 2011 19:52:42 +0000

iframeを持つ1つのhtmlを使い回して
中身だけを変更したいんだけど何かいい方法はないかね？と聞かれて
iframeの中身をバラバラに作るくらいならiframeやめなよと答えたけど
気になったので少し考えて
location.～が使えそうじゃない？と以下のソースを書いた

親(index.html





乱雑モックアップ｜親ページ





 googleを開く
 yahooを開く

子iframeがあるhtml(after.html





乱雑モックアップ｜子ページ

これで、親ページのリンクの?以下の名前
(after.html?http://yahoo.co.jpならhttp://yahoo.co.jp)のファイルを
子のiframeで開けるのだが
これ、大丈夫なんでしょうか？

?javascript:alert('alert');

でalertがでるけど、alertを任意に使えるって事は何か別の事がされるんだろうか？
パスワードなんかを扱わないページは気にしなくていいのだろうか。
という感じで使えるものかわからんので教えてない。

メモ / YUIフォントを使うときにやっておくと役立つ事

まこと — Sat, 23 Apr 2011 17:29:01 +0000

font-size、
pxで指定するとIEで拡大縮小できなくなる、font-size。

ブラウザやOSやフォントによって大きさも変わるしって事で
bodyに85%くらいを指定するくらいでおしまい、って感じに
結構ぞんざいに扱っていました。

そんな人間なのに、最近意味もなく
「YUI CSS Resetを使ってるし、YUI CSS Fontsも使ってみようかな」と思い立ち
YUI3.3をダウンロードしたはいいけど忙しくて放置してところに
素敵なタイミングで以下の良エントリーがっ。

YUI 3のCSS Fontsを使っている場合のフォントサイズ対応表をCSSのコメントに書いておくと便利ですよね :: 5509
※cssコメントの対応表あり

みんな、pxに対応する%を覚えて使ってんのかなぁ、すげぇなぁ。。。と思ってたけど、コメントいれちゃった方が優しいっすよね。
さっそくパクろう。

YUI 3: CSS Fontsのダウンロードや対応表

YUI 3: CSS Fonts
解凍後以下のフォルダの中にあるよ

YUI Library\yui\build\cssfonts

fonts-context.cssってなんだろ

追記
使い方間違ってたっ！！

任意のfont-sizeをYUI CSS Fontsを読み込んだあとの
bodyに指定してたので次のような事になってた。

font-familyを変更したらサイズが合わない？

body{
 font-family:"メイリオ", Meiryo;
 font-size:93%;
}

としたら12pxにならなかった。

確認用の画象(20110424.png)をつくって、

確認用のソースを用意して






 メイリオで12px
  


 メイリオで12px

textを重ねてチェックしてみたら、15pxになってるぽい。
表示結果

検索すると理由が書いてありました
YUIのfonts.css[to-R]
bodyにfont-sizeを指定するとyuifontsの指定が上書きされちゃうのね
そりゃそうだ。

上記cssを以下のように変更してチェック






 メイリオで12px
  


 メイリオで12px

表示結果

最初にリンク貼った徳田さんとこのサンプルソースもそうゆう風に書いてあるのにね。

safariで微妙に太く表示されるフォントを、他のブラウザに合わせる。

まこと — Sun, 03 Apr 2011 09:16:25 +0000

どうも-webkit-font-smoothing:というプロパティがあるようで
safariはデフォルトでsubpixel-antialiased;があたっているようです(windowsは)。

でもってその値にantialiased;を指定すると
他のブラウザと同じような細さになるようなならないような。

確認用スクリーンショット

確認用ページ

※safariで見ないと意味ないよ。
-webkit-font-smoothingでsafariの文字の太さを他のブラウザと合わせる。

プロパティと値

-webkit-font-smoothing: none;
-webkit-font-smoothing: antialiased;
-webkit-font-smoothing: subpixel-antialiased;

noneを指定したら、それ以降が激しく文字化けしたので
確認用ページから外した。

参考にしたサイト /

Maxvoltar – -webkit-font-smoothing

firefoxでmargin-bottomがmargin-top

まこと — Sun, 20 Mar 2011 00:18:00 +0000

[追記 / 20110323] コメント欄に別の対処法が2件あるよ

理由がわからないんだけど
Firefox(3.6.15のみ確認)でmmargin-bottomがmargin-topになるのです。

h1-text

list
list
list

text

/*すでにresetしてあるとして*/
body {
 padding:20px;
}
h1 {
 background:MistyRose;
}
#primary {
 background:olive;
}
#secondary {
 background:lavender;
 margin-bottom:20px;
}
li {
 float:left;
 background:darkorange;
 margin-right:10px;
}
p {
 background:dimgray;
}
/* clearfix
------------------------- */
ul {
/zoom : 1;
}
ul:after {
 content : '';
 display : block;
 clear : both;
 height:0;
}

スクリーンショット

chrome

こうなって欲しい

IE8

こうなって欲しい

Firefox

なのにこうなる

原因と解決法を考える

結論から先に書くと、上記の構成の場合
ulにdisplay:inline-block;を追加して意図した表示に出来た。

ul{
display:inline-block;
}

あれ、display:tableでも平気か？

Firefox

display追加するとこうなった。

けど理由が全くわからない。

どんな状況で発生するのか試してみると
liにposition:absolute;でも同じ現象が起きたので
浮動体に問題がありそうな感じ

多分Firefoxが間違ってるんだろうけど
firefoxの仕様が正しいのか他のブラウザーの仕様が正しいのか知りたい

ここら辺を理解できたら解決するのだろうか。。。？
Visual formatting model
Box model / 8.3.1 Collapsing margins

ulにborderを付けてもmargin-topみたいな隙間は消える

border使えない時はこれじゃダメだ。

rollover2.jsとoperaと色々復習

まこと — Mon, 28 Feb 2011 21:04:05 +0000

凄く滑らかなロールオーバーを超お手軽に実装できるrollover2.jsというものがあるんですが
クロスフェードするロールオーバー処理をお手軽に実装するJavaScript – KAZUMiX memo
クロスフェードするロールオーバー処理動作サンプル – XHTML サンプル | KAZUMiX memo

これ、imgにvertical-align:bottom;や
vertical-align:top;を指定してある場合、
operaでpositionの基準点がうまくいってないような感じの
とんでもない表示になってて(v10.50以前は確認してないけど)

例 / positionの基準点がうまくいってない感じの表示

今気づいたけど
aタグの中にrollover2.jsのロールオーバー対象になるimgだけが入っていると
おかしくなる。

aタグの中にimgの他に、テキストが入っているとおかしくならない。

蛇足 / imgにvertical-align:bottomしたい(してる)理由

ご存知vertical-alignの初期値はbaselineなので
アルファベットのg,j,p,q,yの下に飛び出る部分(ディセンダって名称らしい_*1)の余白が確保され、テキストと並べた時にimgの下に隙間ができちゃう

この隙間を埋めるには、vertical-align:text-bottomを指定するのが定石みたいなんだけど
operaだとテキストの位置がズレてたので(10.50以降？)、
いつしかbottomで指定するようになって
しばらくしてbottomを指定するようになった理由を失念してました。

今確認してみたらbottomも表示が変だった＞＜；；；なんだこれ。

とりあえず
vertical-align:text-bottomを指定しとけば
operaでクリック出来なくなるくらい表示が崩れる事はないのかな？

ここから先は失敗を含む試行錯誤メモ

operaだけvertical-align:bottomやtopをそれ以外の値で上書きできないか？

vertical-align:bottomが基本だと疑ってなかったので
問題のあるoperaだけディセンダが消える別の指定にすればいいかな？と思った

しかしoperaだけにcssを適用出来るハックってのが無いんですよね
(検索して出てくるのはopera11では対策されているのか、効き目がなかった)

で逆に考えて
「opera以外にハックで指定して、通常の指定がoperaだけに適用される」ようにすれば
operaだけvertical-align:text-bottomなんかを指定できるんじゃないか？と思ったけど
面倒なので却下。

cssua.js / CssUserAgent (cssua.js)で分岐させる

最近はてなで見かけたブラウザを判別してhtmlタグにclassを付けてくれるjs
これを使えば簡単にoperaだけにcssを指定できた。

.ua-opera img{
 vertical-align:text-bottom;
}
img{
 vertical-align:top;
}

参考 / もうCSSハックは必要なし!? ブラウザ毎にCSSを切り替える「cssuseragent」 | Web活メモ帳

cssua.jsの使い方はcssua.jsを読み込むだけ
cssua.jsを読み込んだページを
operaの”要素を調べる”やfirebugでソースをみると
htmlタグにclassがたくさんついてるのが確認できる。

いやでもjs使わないでどうにかならないかな？

この時点でまだopera以外もtext-bottomでいいのでは？と想像も出来てない。

aにdisplay:blockしたらvertical-align:bottom;でも問題なく表示できた。
でも全部のaにそんな指定したら困っちゃうし
rollover2.jsの範囲のaだけdisplay:blockするってのは
画像の名前だけで勝手にrolloverを指定出来るせっかくの超便利機能を制限することになるので避けたい。

display:inline-block;ならどうだろう？

block要素になればいいみたいだから指定してみたらいい感じだった。
が、いままで問題なかったsafariで
aタグテキストの上部に隙間ができてしまった。

むむむ。

そんで、じゃあそもそもvertical-alignをtext-bottomやtopにすると
どんな問題が発生するんだろう？と
検証してみてら色々こんがらがってきて
結局text-bottomで特に問題なさそうという最初に書いた結論に落ち着きそうな感じ。

*1 逆にb,d,f,h,k,lなどエックスハイト(小文字のxなどの高さ)の上ミーンライン？より飛び出した分はアセンダって名称らしい。

li内のaをdisplay:blockした時IE6でmargin-bottomぽいところが広がる

まこと — Fri, 18 Feb 2011 09:06:23 +0000

liの中のaタグにdisplay:blockを指定して
クリック出来る部分を広げた時
IE6で下marginが広がってしまった。

みた感じaタグのmargin-bottomが拡張されている風だけど
marginを0にしても消えない。

どうもこれは、hasLayoutがtrueじゃないから起こるみたいで
普段はaタグにwidthを指定してるから発生してなかった。
(widthに値が入ってればhasLayoutがtrueになる)

今回は_zoom:1を追加して対処。

他にhasLayoutをtrueにするには
hasLayout Property (A, ABBR, ACRONYM, …)

CSS property Value

display
inline-block

height
any value

float
left or right

position absolute

width any value

-ms-writing-mode tb-rl

zoom any value

CSS property	Value
display	`inline-block`
height	any value
float	`left` or `right`
position	`absolute`
width	any value
-ms-writing-mode	`tb-rl`
zoom	any value

IE6 CSS Fixer

まこと — Mon, 06 Dec 2010 13:35:51 +0000

ie6fixer – onderhond.com
普通のcssからIE6用のcssを吐き出してくれるサービス、現在バージョン0.95。

例えば

IE6だと左右のmarginが40pxになってしまう以下の記述

#test{
margin:20px;
float:left;
}

これをie6 css fixerで変換させると
(select your master stylesheetのpaste your complete master stylesheetを選択してgive me my ie6 fixesをクリック)

/* add display:inline to floated elements */
#test {display:inline;}

なんてcssを吐き出してくれる。

これを保存してコンディショナルコメントでie6だけ読み込むようにすれば対策完了。

でもって、最初からdisplay:inline;が付けてる場合は、新たにdisplay:inline;を吐き出さないのかな？と試してみたけどdisplay:inline;を吐き出してた。

というか、

#test{
float:left;
}

を変換すると

/* add display:inline to floated elements */
#test {display:inline;}

を吐き出してた。
むむむ？

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

まこと — Tue, 16 Nov 2010 12:07:20 +0000

タイトルが全てだけど

dtとddを横並びさせた時、IE6でddが3pxズレる時はzoom:1;を付けるとズレなくなりました。


乱雑
モックアップ

dt {
 width:3em;
 float:left;
}
dd {
 margin-left:3em;
 _zoom:1;
}

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

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

まこと — Tue, 02 Nov 2010 19:34:43 +0000

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

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

構成

www.foo.com/home.html, which iframes
└＞ www.bar.net/framed.html, which iframes
└＞ www.foo.com/helper.html

記述例

www.foo.com/home.html

www.bar.net/framed.html

www.foo.com/helper.html

追記

結局iframe先のページに書き込むの事に代わりがないのなら
window.postMessage() を使って、クロスドメインの iframe の高さを設定する検証 – 写経日記の方がシンプルで素敵だ。

でもwindow.postMessage()というのを使っているので
以下のように(見よう見まねで)window.attachEventを追加してもIE7以下は広がらなかったです。

構成

www.foo.com/parent.html
└＞ www.bar.net/iframe.html

parent.html

www.bar.net/iframe.html

base href

まこと — Mon, 01 Nov 2010 22:21:23 +0000

base href

baseタグっちゅーのがあって、head内に記述すると
その指定以降の要素に適用される。

みたいに書いておくと下の図のように

http://sakurachiro/を基準とした相対パスになるそうな。

(hrefに絶対パスと相対パスの両方指定出来るような解説をしてるサイトがあったけど絶対パスしか使えないハズ)

ちなみに記述した後の要素に適用されるので

（あれ、リンク貼ってないのにリンクになってる？）

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

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

base target

target属性を追加するとそれ以降のリンクが指定した挙動で開くよ。

_blankとかすげぇウザいですけど。

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

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

まこと — Sat, 23 Oct 2010 10:17:33 +0000

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

次みたいな書き方をした時に(至って普通の記述ですが)、場合によって背景画像が消える事があって気づいた。

div {
 background:#fef url(img/bg.gif) no-repeat right bottom fixed;
}

確認してみる

この背景画像を指定してチェック

例えばoverflow:hidden;のdivに

background-attachment: scroll;

期待通りの表示位置。

background-attachment: fixex;

divの外に出た、右も下もブラウザ(html)のサイズ基準になってる。

bodyに

background-attachment: scroll;

期待した表示と違う。
background-colorはブラウザサイズいっぱいで、background-imageは内容量に合わせて高さが変わる？

以前(YUI 3: CSS Resetを使うと、bodyの背景が画面全体に広がらない現象にいまさら気づいた。)で、htmlにbackground-colorが指定されているとbodyの背景がbodyの内容までしか着色されない事があったけど
htmlにbackgroundが指定されていない時は、背景色に限り拡張されてるの？
面倒くさいから背景画像の方も表示領域を拡張してくださいよ><;

background-attachment: fixex;

ブラウザの左上(html)を基準にright bottomになりまんた。

色々指定して試してみたつもりだけど、最近うっかりや、早とちりや、勘違いが多いのでまだ何か勘違いしてそうで怖いなぁ。

しかし、(個人的に)普段使わない指定の挙動というのは、こんなにも理解したつもりでいるのかと気づいて随分凹む。

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

まこと — Thu, 07 Oct 2010 20:37:41 +0000

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

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

(*ちなみにこんなソース)



コンテンツ

#content{background:#f33;}
.inner{width:780px;margin:0 auto;}

先に解決法を書くけど

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

文章じゃどんな現象か分かりづらいので画像で解説

ページ全体

表示を縮めて意図的に横スクロールバーを発生させた状態

右側にスクロールさせると問題発生、背景が切れてる。

以下でも確認出来ます。
DEMO:コンテンツ量が少ないページでも、フッターをブラウザ下部に表示させるテスト。

解決案

最初に書いたけどこんな感じ

body { min-width:780px; }
#content { background:#f33; }
.inner {
  width:780px;
  margin:0 auto;
}

今回は中身をセンタリングさせる話なのでdivを入れ子にしてるけど、入れ子じゃなくても再現できる。



コンテンツ

対策済み / ページ全体

横スクロールさせてみた結果

対策後のソースは以下のページで確認出来るッス
DEMO:コンテンツブロック毎に異なる背景をブラウザ幅いっぱいまで表示させ、内包物はセンタリングするテスト。

気づいたこと思ったこと

最初min-widthを、bodyの他に背景を指定した要素全部(#top,#header,#contents,#footer)に指定してたけど、よくよく考えたら通常はbodyだけで大丈夫ぽい。
ただし折り返しせず要素を突き破るようなテキストがある時は困ったことになる。

あとIE6はmin-widthが効かないけどそもそも背景が切れないという「ええ！あんなに大きな地震だったのに目が覚めなかったのかい？」みたいな感じで頼もしいのか頼れないのかIEらしい。

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

まこと — Mon, 27 Sep 2010 18:24:19 +0000

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

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

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

試してみたhtml構造

div#wrap>div#top+div#header+div#contents+div#footer

指定したcss

html, body { height:100%; }
#wrap { position:relative; min-height:100%; background:#f33;/*確認用*/}
#contents { padding:1em 0 3em;/*コンテンツとフッターの位置調整*/ }
#footer { position:absolute; bottom:0; left:0; width:100%; height:3em; line-height:3em; }

全体を包むdiv#wrapの最低限確保する高さを100%にして
#footerをbottom:0に絶対配置。

これで問題ないかな？
なにか見落としてる気がしてならない。

出来たら#wrapのheightを100%にしたいんだけど
そうするとスクロールした時に#footerが移動しちゃう。

あと各ブロック毎に横幅いっぱいの背景を指定するのに

div#wrap>div.inner

みたいにした。
ソース見づらい。

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

まこと — Mon, 13 Sep 2010 10:44:27 +0000

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

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

480pxのdiv

ある要素内のテキストにaをdisplay:blockしてpaddingで広げる仕様のリンクが入ったり入らなかったりする下のようなhtmlとcssがあった場合,


  dt / リンクなし
  dd / リンクあり
  dt / リンクあり
  dd / リンクあり

リンクのないdtにもpaddingをつけてレイアウトを揃えようとして、対策を何もしないと

dt {
  padding:10px;
  background:#09c;
}
dt a {
  display:block;
  padding:10px;
  background:#ace;
}
dd a {
  display:block;
  padding:10px;
  background:#f7f7f7;
}

dtのpaddingとdt aのpaddingでdt aのレイアウトが揃わない。

理想としてはこうしたいのが心情。

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

ネガティブマージンを追加すると

まず、一番最初に思いついたのがネガティブマージン。
dt aにmargin:-10px;みたいなのを追加してみると

dt {
  padding:10px;
  background:#09c;
}
dt a {
  display:block;
  padding:10px;
  margin:-10px; /* ←追加 */
  background:#ace;
}
dd a {
  display:block;
  padding:10px;
  background:#f7f7f7;
}

いきなり出来た(blogのcssを上手くリセットできてないのでmarginがちょっとおかしいけど)。


リンクなし: リンクあり

リンクあり: リンクあり

と思ったけど、IE6-7でみたら下記のように全然ダメだった。ちくしょう。

(デタラメに)IE対策してみた

どうせhasLayoutでどうにかなんでしょ？とか適当なノリでzoom:1;を追加したり。

dt a {
margin:-10px;
/position:relative;/*IE6-7*/
/margin-top:-13px;/*IE6-7 なんかmargin-topに3pxの隙間が出てたから3px多めにした */
}
dd a {
/zoom:1;/*IE6-7 これがないとdt a以下のdd aのdisplay:blockが範囲はあるのに反応しなかった */
}

結果

検証ページ-1

上記「IE対策してみた」に不具合があったみたいなので追加+もう一回

よく判らない3pxの隙間を、hack使って無理やり余分なmargin分無かったことにするのっていくら何でも無いよなぁと思っていたら、@ethertankさんからこんなツイートが。
(ソースの不恰好という話とは別な問題で)タブ移動時に表示が崩れる事があるそうな、そんでもってこうゆう風にしたらよくなりますよとわざわざサンプルまで作ってくれました＞＜感謝。
ネガティブマージンによる領域拡張

さっそく参考にさせてもらうと

dt,dd,
dt a,dd a {
/position: relative;
/zoom: 1;
}

親にも指定するのがキモなのかな？余分なmargin指定がなくなってますね。
あとhoverに着色してあるからクリック出来る範囲が広がっているのを分かりやすく確認出来ますわ、うちもこうしておけば良かったのに気がきかなかったなぁ、パクろう。

overflow:hidden

でもってちょっと上で書いたけど前回の無理やりな記述は無いなぁと思っていたので自分なりに別の方法試してみました。

そもそもなんでposition:relative;にしたんだろう？
前々回のネガティブマージンでハミ出した要素がIE6で切れたら。で使ってみたのが頭の隅にあったからかな？
とりあえずこれから離れてみよう。

そうすると次はoverflow:hidden;とかdisplay:inline-block;とかかな、なんとなく。
overflow:hidden;はclearfixの変わりに使えたりするし。

余分なmarginを指定しないように、こんな感じで描いてみた。
検証ページ-2

今度は大丈夫そうだけどどうだろう。

dt {
  padding:10px;
}
dt,dd {
  /zoom:1; /*IE6-7用*/
  /overflow:hidden; /*IE6-7用*/
}
dt a,dd a {
  display:block;
  padding:10px;
}
dt a {
  margin:-10px;
}

ちなみにhasLayoutはzoomでtrueになるみたいだけど
position: relative;でfalseになるそうな。

hasLayoutメモ | CSS | understandard.net

hasLayoutの値をtrueにする指定

プロパティ値

display inline-block

float left もしくは right

height any value

position absolute

width any value

writing-mode tb-rl

zoom any value

hasLayoutの値をfalseにする指定

プロパティ値

display block もしくは inline

float none

height auto

position static もしくは relative

width auto

writing-mode lr-tb

zoom normal

プロパティ	値
display	inline-block
float	left もしくは right
height	any value
position	absolute
width	any value
writing-mode	tb-rl
zoom	any value

プロパティ	値
display	block もしくは inline
float	none
height	auto
position	static もしくは relative
width	auto
writing-mode	lr-tb
zoom	normal

ネガティブマージンでハミ出した要素がIE6で切れたら。

まこと — Fri, 03 Sep 2010 20:45:29 +0000

とりあえず

position:relative;

を一緒に指定してみるのが良いみたい。

IE6での表示
真ん中が見切れている状態で、一番下がposition:relative;を追加して問題を回避した表示。

しかし2010年の今になって初めて出会うなんてなぁ。

ちなみにIE6以外だと同じソースでこんな感じ。

なんで今までこの現象が起きなかったんだろう？と首をかしげつつ
再現出来る最小限のソースを作ろうと問題部分を抜粋していじるけどなかなか再現させられない。。。
結局、ネガティブマージンがある要素とその親要素両方にwidthを指定したらハミ出した部分が消えた。
最小限のソースにしなくちゃと思う気持ちがもつ脆弱性をついた攻撃！！





乱雑モックアップ｜ネガティブマージンを指定した要素がIE6消えたら一緒にposition:relativeを指定してみようテスト。






  
    
      お知らせですよー / ネガティブマージンなし
      
        
          2010年 - お知らせはありませんよー
          2009年 - お知らせはありませんよー
          2008年 - お知らせはありませんよー
        
      
    
    
      お知らせですよー / ネガティブマージンあり
      
        
          2010年 - お知らせはありませんよー
          2009年 - お知らせはありませんよー
          2008年 - お知らせはありませんよー
        
      
    
    
      お知らせですよー / ネガティブマージン position:relative;あり
      
        
          2010年 - お知らせはありませんよー
          2009年 - お知らせはありませんよー
          2008年 - お知らせはありませんよー

試してる間にposition:relative;使っても見切れるのを回避できないネガティブマージンにも出会ったけど、そうなったらおとなしく親要素のpaddingやmarginでレイアウトした方がいいと思った。

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

まこと — Thu, 02 Sep 2010 14:57:21 +0000

前置き(おもひで)

なんでもかんでも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でやるやつ。

乱雑モックアップ

#irsample1{
width:480px;/*画像の横幅;*/
height:0;
padding-top:100px;/*画像の高さ;*/
overflow:hidden;
background:url(画像url) no-repeat;
}

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

乱雑モックアップ

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

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

hoverとactiveを指定してロールオーバーさせる

乱雑モックアップ

#irsample2{
width:480px;/*画像の横幅*/
height:100px;/*画像の高さ*/
}
#irsample2 a{
width:100%;/*ボタンの横幅*/
height:0;
padding-top:100px;/*ボタンの高さ*/
overflow:hidden;
display:block;
background:url(画像url) no-repeat 0 0;
}
#irsample2 a:hover{
background-position:0 -200px;/*bottomは IE6-7で範囲外のフォントのbottomからになるのでズレる*/}
#irsample2 a:active{
background-position:0 -100px;
}

“hoverとactiveを指定してロールオーバーさせる”の表示結果

乱雑モックアップ

横並びメニューにしてみる / display:inline


  乱雑
  モック
  アップ

#irsample3{
width:480px;/*画像の横幅*/
height:60px;/*画像の高さ*/
padding:0;
margin:0;
}

#irsample3 li{
display:inline;/*ie6-7*/
}
#irsample3 a{
float:left;
width:160px;/*ボタンの横幅*/
height:0;
padding-top:60px;/*ボタンの高さ*/
overflow:hidden;
display:block;
background:url(画像url) no-repeat;
}

#irsample3 .ranzatsu a{
background-position:0 0;
}
#irsample3 .mock a{
background-position:-160px 0;
}
#irsample3 .up a{
background-position:-320px 0;
}

#irsample3 .ranzatsu a:hover{
background-position:0 -60px;
}
#irsample3 .mock a:hover{
background-position:-160px -60px;
}
#irsample3 .up a:hover{
background-position:-320px -60px;
}

“横並びメニューにしてみる / display:inline”の表示結果

乱雑
モック
アップ

横並びメニューにしてみる / float:left

/*clearfix追加*/
#irsample4{
/zoom:1
}
#irsample4:after{
content:'';
display:block;
clear:both;
height:0;
}

#irsample4 li{
/*display:inline; 削除してfloatに変更*/
float:left;
}
#irsample4 a{
/*float:left; 必要ないので削除*/
width:160px;
height:0;
padding-top:60px;
overflow:hidden;
display:block;
background:url(http://blog.sakurachiro.com/wp-content/uploads/2010/09/20100901-1.png) no-repeat;

}

“横並びメニューにしてみる / float:left”の表示結果

乱雑
モック
アップ

を横並びさせる場合、display:inline+floatとfloat+clearfixはどっちが定番なんだろう？

追加

縦並びメニューにしてみる

htmlは同じで横並びメニューのcssから以下の部分を削除するだけでいいはず。

#irsample5 li{
display:inline;
}
#irsample5 a{
float:left;
}

全部書くとこんな感じ

#irsample5{
width:160px;
height:180px;
}

#irsample5 a{
width:160px;
height:0;
padding-top:60px;
overflow:hidden;
display:block;
background:url(http://blog.sakurachiro.com/wp-content/uploads/2010/09/20100901-1.png) no-repeat;

}
#irsample5 .ranzatsu a{
background-position:0 0;
}
#irsample5 .mock a{
background-position:-160px 0;
}
#irsample5 .up a{
background-position:-320px 0;
}

#irsample5 .ranzatsu a:hover{
background-position:0 -60px;
}
#irsample5 .mock a:hover{
background-position:-160px -60px;
}
#irsample5 .up a:hover{
background-position:-320px -60px;
}

#irsample5 .ranzatsu a:active{
background-position:0 -120px;
}
#irsample5 .mock a:active{
background-position:-160px -120px;
}
#irsample5 .up a:active{
background-position:-320px -120px;
}

段落って難しい。

まこと — Thu, 05 Aug 2010 01:23:52 +0000

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

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

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

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

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

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

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

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

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

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

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

時代やhtmlの習熟具合によって変化してきた。
なぜなら最初は

(paragraph)の存在すら知らなかったので例に漏れず
の連続だったような気がするけど、詳しい事は覚えてない。

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

タグを知らない酷い話。

Web制作の会社に就職して、独学でHTMLを勉強してWeb標準っちゅー流れがある事を知ったり、lintで文法をチェックするようになったり、アメブロによくある改行を多用してるブログに嫌悪感を持つようになったり、観覧者のブラウザサイズは一定じゃないのに何かに合わせて改行をコントロールするのはどうなんだろう？と考えたりしてるうちに
を使う事に抵抗を感じるようになって句点(。)ごとに

を使うようになる。
しばらくそんな状態でやってきて今も基本は全部

だけど、
で形式段落、

で意味段落か形式段落に落ち着いた感じ。
結局、意味段落はここは意味の繋がりがあるよねってフィーリングのまま。

段落とかパラグラフとか

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

問題は

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

簡単に Another HTML-lint gatewayで html のチェックが出来るブックマークレット。

まこと — Tue, 15 Jun 2010 15:48:44 +0000

[追記]現在は使えなくなっちゃいました＞＜；；；

うおおおおおおおおおおおおおおおお突然ですがこれは『気合いの雄叫び』ですッ！

昔は Web developer ( Firefoxのアドオン ) から簡単に、現在見ているページをAnother HTML-lint gatewayでチェック出来ていたのですが、ある日気がつけば以下の文言が表示されるようになって慌てた人も多いのではないでしょうか？

自分がそうだったからって、他の人もそうなんじゃないですかとか決めつけちゃって失礼ですよね、ごめんなさい。
とりあえず、ひとしきり騒いだ後、“外部からのGETリクエスト停止” になった事を知り肩を落としそして少し泣きました。

それ以来 ( 2009年4月30日以降) html の検証をするには、Another HTML-lint gatewayにアクセスして
チェックしたいHTMLのURLを指定するか、HTMLを下のテキスト領域に直接記述して、[チェック] ボタンを押して使う事になりました。

当時はもう文法チェックする頻度も下がってはいたけど、Web developerからチェックする事に慣れきっちゃっていたので
いざ普通に使おうとしたらウオオオオオウダラァーーーッとまでは行かないまでも、面倒くさい事面倒くさい事。

あれから一年余、なんと現在も有効なAnother HTML-lintのブックマークレットがありましたッ！。
Another HTML-lintのブックマークレット | 沖縄のWebデザイナーChopstickBrunch
また、簡単にlintにかけられるなんて日が来るなんて、感無量。

人は慣れる。

しばらく ChopstickBrunch 様のブックマークレットを使っていましたが、
これだとチェックしたいページ自体が lint の結果に置き換わってしまう為、若干不便に感じるようになってきました ( ゆとり世代じゃないけどゆとってるなぁ… )。

でもって検証結果を別のタブで開けるようにならないかな？と、勝手に手を加えたのが以下です。

Another HTML-lint gateway のチェック結果をタブで開くブックマークレット

( target=”_blank” なだけだから、タブで開くとは限らないけど )

javascript:var%20f%20=%20document.createElement('form');f.setAttribute('target','_blank');var%20o=new%20Object;o[0]=document.createElement('input');o[0].setAttribute('type','text');o[0].setAttribute('name','Stat');o[0].setAttribute('value','on');o[1]=document.createElement('input');o[1].setAttribute('type','text');o[1].setAttribute('name','Method');o[1].setAttribute('value','URL');o[2]=document.createElement('input');o[2].setAttribute('type','text');o[2].setAttribute('name','URL');o[2].setAttribute('value',location.href);o[3]=document.createElement('input');o[3].setAttribute('type','text');o[3].setAttribute('name','ViewSource');o[3].setAttribute('value','on');for(var%20i%20in%20o){f.appendChild(o[i]);}document.body.appendChild(f);f.action%20=%20'http://openlab.ring.gr.jp/k16/htmllint/htmllint.cgi';f.method%20=%20'POST';f.submit();

このリンクをブックマークしてもおkです→ Another HTML-lint タブで開く

ブックマークレットの使い方

うちもほとんど使った事がないんですけど簡単です。
FirefoxやChromeだと上のリンク(Another HTML-lint タブで開く)をブックマークツールバーまでドラッグ&ドロップ
IE8だと(6や7も?) リンクを右クリックして、お気に入りに追加、なんかalertが開くけどok。

lintチェックしたいページでお気に入りに入っているリンクをクリックすれば実行。

別窓や別タブで結果が開くのウザイよって場合は
Another HTML-lintのブックマークレット | 沖縄のWebデザイナーChopstickBrunch様のページを参考にしてみてください。

自動改行(word-break・word-wrap・white-space プロパティ)をコントロールして、テキストがボックスから飛び出さないようにしたい。

まこと — Mon, 31 May 2010 15:50:33 +0000

ん～、違いがようわからん。

上記3プロパティの動作確認用ページ (ポップアップで開く)
Firefoxはどれを指定しても、連続した半角英数が長いとtableが伸びちゃうなぁ。

以下、自分の解釈メモ ( なので正しいかどうか怪しいです )。

word-break

禁則処理の設定?
break-allにすると日本語の文章中どこでも折り返して、アルファベットもどこでも折り返す。
選べる値

normal
keep-all
loose
break-strict
break-all

word-wrap

英単語の折り返し、break-wordで英単語中でも折り返す。
日本語は関係ない?
選べる値

normal
break-word

white-space

半角スペース、タブ、改行の処理
pre-wrapだと、基本動作はpre(半角スペース、タブ、改行はそのまま生かされる)でボックスの幅で改行する。
選べる値

normal
pre
nowrap
pre-wrap
pre-line

ブロックレベル要素を勝手に拡張したり、ハミ出したりしないかチェック

*色の意味

自動で折り返す指定
二つ同時に指定すると折り返す
勝手に拡張したりハミ出したり


	word-break : break-all ;	word-wrap : break-word ;	white-space : pre-wrap ;
firefox 3.6.3	×アドレス ×日本語 ×アルファベット	×アドレス ×日本語 ×アルファベット	×アルファベット
chrome 5.0.375	×アドレス ×日本語 ×アルファベット	ok	×アルファベット
safari 4.0.5	×アドレス ×日本語 ×アルファベット	ok	×アルファベット
opera 10.53	×日本語 ×アルファベット	ok	×アルファベット
IE6	×日本語 ×アルファベット	ok	×日本語 ×アルファベット
IE7	×日本語 ×アルファベット	ok	×日本語 ×アルファベット
IE8	×日本語 ×アルファベット	ok	×アルファベット


	word-break : break-all ;	word-wrap : break-word ;	white-space : pre-wrap ;
firefox 3.6.3	×アルファベット	ok	preになる ×アルファベット
chrome 5.0.375	ok	ok	preになる ×アルファベット
safari 4.0.5	ok	ok	preになる ×アルファベット
opera 10.53	×アルファベット	ok	preになる ×アルファベット
IE6	ok	ok	アルファベット分伸びるけど他はwidthの位置で折り返してる
IE7	ok	ok	×アルファベット
IE8	ok	ok	preになる ×アルファベット

乱雑モックアップ » html/css

html5で隙間

メモ / cssとjsをワンクリックで圧縮結合してくれるzbugsをやってみた

iframeに開くページを、location.searchで受け取った値で変更させちゃっても問題ない？

メモ / YUIフォントを使うときにやっておくと役立つ事

YUI 3: CSS Fontsのダウンロードや対応表

font-familyを変更したらサイズが合わない？

safariで微妙に太く表示されるフォントを、他のブラウザに合わせる。

確認用スクリーンショット

確認用ページ

プロパティと値

参考にしたサイト /

firefoxでmargin-bottomがmargin-top

h1-text

スクリーンショット

chrome

IE8

Firefox

原因と解決法を考える

Firefox

けど理由が全くわからない。

rollover2.jsとoperaと色々復習

蛇足 / imgにvertical-align:bottomしたい(してる)理由

operaだけvertical-align:bottomやtopをそれ以外の値で上書きできないか？

cssua.js / CssUserAgent (cssua.js)で分岐させる

いやでもjs使わないでどうにかならないかな？

display:inline-block;ならどうだろう？

li内のaをdisplay:blockした時IE6でmargin-bottomぽいところが広がる

IE6 CSS Fixer

例えば

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

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

構成

記述例

追記

構成

base href

base href

base target

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

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

確認してみる

例えばoverflow:hidden;のdivに

bodyに

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

先に解決法を書くけど

文章じゃどんな現象か分かりづらいので画像で解説

解決案

気づいたこと思ったこと

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

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

ネガティブマージンを追加すると

(デタラメに)IE対策してみた

結果

上記「IE対策してみた」に不具合があったみたいなので追加+もう一回

さっそく参考にさせてもらうと

overflow:hidden

ネガティブマージンでハミ出した要素がIE6で切れたら。

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

前置き(おもひで)

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

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

hoverとactiveを指定してロールオーバーさせる

横並びメニューにしてみる / display:inline

横並びメニューにしてみる / float:left

縦並びメニューにしてみる

段落って難しい。

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

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

段落とかパラグラフとか

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

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

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

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

問題は

簡単に Another HTML-lint gatewayで html のチェックが出来るブックマークレット。

うおおおおおおおおおおおおおおおお 突然ですがこれは『気合いの雄叫び』ですッ！

人は慣れる。

Another HTML-lint gateway のチェック結果をタブで開くブックマークレット

ブックマークレットの使い方

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

うおおおおおおおおおおおおおおおお突然ですがこれは『気合いの雄叫び』ですッ！