1. /
  2. /
  3. html/css

html/css

疑似要素が効かないinputタグと、有効になるinputタグ

imgタグやinput[type=”text”]には疑似要素が使えない。

imgタグに使えないのは知っていたのですが
そういえばボタンやinput[type=”text”]には使えないのに、
input[type=checkbox]なんかは疑似要素使って見栄え変えてる人いるなー？と
思ったのでテストしてみました。

結果の画像

input各種に::beforeを指定した結果

結構有効になりますね…。どうゆう基準なんだろう。
rangeなんかは疑似要素が邪魔して右半分まで持っていけなかったり

テストしたHTML

<p>段落</p>
<ul>
<li><input type="text" value="text"></li>
<li><label><input type="radio">radio</label></li>
<li><label><input type="checkbox">checkbox</label></li>
<li><input type="button" value="ボタン"></li>
<li><input type="color"></li>
<li><input type="date"></li>
<li><input type="datetime-local"></li>
<li><input type="month"></li>
<li><input type="email" placeholder="email"></li>
<li><input type="file"></li>
<li><input type="number" placeholder="number"></li>
<li><input type="password" placeholder="password"></li>
<li><input type="range"></li>
<li><input type="image"></li>
</ul>

指定したCSS

input::after,
p::after{
  content:'【before】';
  display:inline-block;
}

こうゆう入力欄て超ユーザービリティ低いんで、やめてもらいたいんですけど。

酷い入力欄

なんで入力する内容の説明をプレースホルダーだけで賄おうって思ったんだって話。
こんなの全然スタイリッシュでもなんでもないですから。くっそ使いづらい。

さらにここは、よくある並びの
[姓 名]
[セイ メイ]
じゃなく
[姓 セイ]
[名 メイ]
が1列になってる点もポイント高いんじゃないかって思います。

display: table-cell;内にtext-overflow: ellipsis;で「…」付けようとしたらwidthが消えちゃった話。

失敗

display: table-cell;で縦中央させてる要素内のテキストに
text-overflow: ellipsis;で「…」付けようとしたらwidthが消えちゃった。

text-overflow: ellipsis;で「…」付ける為の条件

text-overflow – CSS | MDN
[css]
p {
white-space: nowrap;
width: 100%; /* IE6 では width の指定が必要 */
overflow: hidden; /* "overflow" の値は "visible" 以外のものを指定する */

text-overflow: ellipsis; /* IE, WebKit (Safari, Chrome), Firefox 7, Opera 11 */
}
[/css]

使用html

[html]
<div class="tablecell">
<ul>
<li class="left">左</li>
<li class="right"><p>右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右石右右右右右右右右右右右右右右右右右右右右右右右右</p></li>
</ul>
</div>[/html]

使用css

[css]
.tablecell{
display: table;
width: 400px;
margin: auto;
border: 10px solid #000;
}
.left,.right{
box-sizing: border-box;
display: table-cell;
vertical-align: middle;
padding: 1rem;

}
.left{
width: 100px;
text-align: center;
background: #999;

}
.right p{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width:100%;
}
[/css]

こうすると.leftのwidthが消滅するという現象が起きた

IE6で必要って書いてあるwidthを逆に消せばいいのか？と
.right pのwidthを消しても駄目だった。

次にpxで指定してみたら「…」が表示され.leftのwidthも復活した

成功

まとめ

text-overflow: ellipsis;側のwidthはpxで指定する。

httpsでレイアウトが崩れた

昔つくったサイトでレイアウトが崩れると連絡がありました。

話を聞くと、httpsで見るとレイアウトが崩れるとか。
そんな事あるのかな？と確認するとfloat部分がカラム落ちしてました。

httpだとこうなってる
2015-02-16_r1

httpsだとこうなる
2015-02-16_r2

現象としては、横並びさせてる3要素の最後のmarginをjsで0にしてたんだけど、それが効いてない感じ。
jqeury本体は▼のを使ってた


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

もしかして、httpだから？
で調べてみるとプロトコル表記は省略出来るとの事で、次のように変更。


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

参考

全般的なスタイルルール プロトコル 埋め込みリソースからプロトコル表記（http:,https:）を省略する。

httpsだとjQuery/Ajaxは使えないのでしょうか？

emmetで、テキストをWrap with Abbreviationしつつ、valueやhrefなどに同じテキストを挿入する方法

Wrap with Abbreviation時に
option[value=$#]*>{$#}を使うと

こんなhtmlがあった時
[html]北海道
北東北（青森・秋田・岩手）
南東北（宮城・山形・福島）
関東（東京・茨城・栃木・群馬・埼玉・千葉・神奈川・山梨）
信越（長野・新潟）
北陸（富山・石川・福井）
中部（静岡・愛知・岐阜・三重）
関西（京都・滋賀・奈良・和歌山・大阪・兵庫）
中国（岡山・広島・山口・鳥取・島根）
四国（香川・徳島・高知・愛媛）
九州（福岡・佐賀・長崎・熊本・大分・宮崎・鹿児島）
沖縄
[/html]
Wrap with Abbreviation
こう出来る！
[html]<option value="北海道">北海道</option>
<option value="北東北（青森・秋田・岩手）">北東北（青森・秋田・岩手）</option>
<option value="南東北（宮城・山形・福島）">南東北（宮城・山形・福島）</option>
<option value="関東（東京・茨城・栃木・群馬・埼玉・千葉・神奈川・山梨）">関東（東京・茨城・栃木・群馬・埼玉・千葉・神奈川・山梨）</option>
<option value="信越（長野・新潟）">信越（長野・新潟）</option>
<option value="北陸（富山・石川・福井）">北陸（富山・石川・福井）</option>
<option value="中部（静岡・愛知・岐阜・三重）">中部（静岡・愛知・岐阜・三重）</option>
<option value="関西（京都・滋賀・奈良・和歌山・大阪・兵庫）">関西（京都・滋賀・奈良・和歌山・大阪・兵庫）</option>
<option value="中国（岡山・広島・山口・鳥取・島根）">中国（岡山・広島・山口・鳥取・島根）</option>
<option value="四国（香川・徳島・高知・愛媛）">四国（香川・徳島・高知・愛媛）</option>
<option value="九州（福岡・佐賀・長崎・熊本・大分・宮崎・鹿児島）">九州（福岡・佐賀・長崎・熊本・大分・宮崎・鹿児島）</option>
<option value="沖縄">沖縄</option>[/html]

素敵っ！

参考

Controlling output position

横幅が変動する要素をセンタリングする。

センタリング

通常、ブロック要素をセンタリングさせるには

1）横幅を指定
2）左右のmarginをauto

[css]
width:100px
margin:0 auto;
[/css]

するけど
横幅を指定しちゃうから、内容に合わせて横幅が伸縮するような要素をセンタリングさせられません。

けど、widthの代わりにdisplay:tableを使うと
横幅が変動する要素をセンタリングが可能にッ！！！

[css]
display:table;
margin:0 auto;
[/css]

display:table;はIE8も理解してくれます

[html]
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
background: #f33;
}
.contentA{
width: 640px;
margin: 1em auto;
background: #fff;
padding: 1em;
}
.contentB{
background: #fff;
padding: 1em;
display: table;
margin: 1em auto;
}
</style>
</head>
<body>
<div class="contentA">
<p>いろはにほへと ちりぬるをわかよたれそ<br />つねならむうゐのおくやま けふこえてあさきゆめみし ゑひもせすん</p>
<p>The quick brown fox jumps over the lazy dog.</p>
</div>

<div class="contentB">
<p>いろはにほへと ちりぬるをわかよたれそ<br />つねならむうゐのおくやま けふこえてあさきゆめみし ゑひもせすん</p>
<p>The quick brown fox jumps over the lazy dog.</p>
</div>

<div class="contentB">
<p>いろはにほへと ちりぬるをわかよたれそ<br />つねならむうゐのおくやま<br />けふこえてあさきゆめみし ゑひもせすん</p>
<p>The quick brown fox jumps over the lazy dog.</p>
</div>
</body>
</html>
[/html]

CotEditorで.htmlファイル中に書いたCSSのコメントにもカラーリングを適用させる

coteditor

ちょっとしたhtmlを書いたり、修正したりする際（たまに）CotEditorを使ったりしてます
やっぱり立ち上がりが早いっていいです。

ただ、html中に書いたcssのコメントがコメント扱いされず見づれーなぁと思う時さあっで
cssのコメント/* cssコメント */もコメント扱いさせられねぇべかと
環境設定を弄っていたらcssのコメントもコメント扱い出来たから方法をシェアするど＼( ‘jjj’ )／

通常のhtmlカラーリング

続きを読む

tableに指定したpaddingが効かない原因はborder-collapse: collapse;

tableに指定した背景を少し広げようと思って
paddingを指定したけどうんともすんとも言わない

firebugで確認してもpaddingは指定されてるわ、でも実際には反映されてないわってのが確認できた
最小のソースで試してみたらそっちはちゃんとpadding効いた

さっぱり意味がわからず時間も無かったから
その時は背景色と同じ色のborderで誤魔化した（邪道）けど
落ち着いてよく考えてみたら
問題の起きてるファイルに読み込まれてて
最小の記述に読み込まれてないreset.css内の内容がほぼ犯人としか思えない

そこでtable周りのreset指定を見なおして、とてつもなく怪しい奴がいました
[html]table{border-collapse: collapse;}[/html]

って事で次のように書き換えてみると
[html]table{border-collapse: separate;}[/html]

tableに指定したpaddingが反映されました

[image]tableにmargin

[html]
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title></title>

<style>
body{
padding: 3em;
font-family: sans-serif;
}
table{
width:300px;
margin: 0 auto;
background: #f33;
padding: 2em;
border: 1px solid #000;
border-collapse: collapse;
margin-bottom: 20px;
}
th,td{
background: #fff;
border: 1px solid #000;padding: .5em;
}

.separate{
border-collapse: separate;
}
</style>
</head>
<body>
<table>
<tr>
<td>th th</td>
<td>td td</td>
</tr>
<tr>
<td>th th</td>
<td>td td</td>
</tr>
</table>

<table class="separate">
<tr>
<td>th th</td>
<td>td td</td>
</tr>
<tr>
<td>th th</td>
<td>td td</td>
</tr>
</table>
</body>
</html>[/html]

font-familyの指定を見直す

うちは普段コーディングする時、Firefoxを表示確認用のメインブラウザとしてCoda2を使っています。

先日、htmlで何かのテストをしてる時、久しぶりにfont-familyを指定して
safari（mac）で表示確認したら、指定したfontが全く効いてませんでした。

これが長い長いfont-family探しの旅の始まりでした。。。

続きを読む