inputがむき出しだったり、兄弟関係にないとだめって縛りがあるからいろいろやろうとしたら普通に使い勝手悪いですよねーって話。
html/css
こうゆう入力欄て超ユーザービリティ低いんで、やめてもらいたいんですけど。
なんで入力する内容の説明をプレースホルダーだけで賄おうって思ったんだって話。
こんなの全然スタイリッシュでもなんでもないですから。くっそ使いづらい。
さらにここは、よくある並びの
[姓 名]
[セイ メイ]
じゃなく
[姓 セイ]
[名 メイ]
が1列になってる点もポイント高いんじゃないかって思います。
display: table-cell;内にtext-overflow: ellipsis;で「…」付けようとしたらwidthが消えちゃった話。
display: table-cell;で縦中央させてる要素内のテキストに
text-overflow: ellipsis;で「…」付けようとしたらwidthが消えちゃった。
text-overflow: ellipsis;で「…」付ける為の条件
|
1 2 3 4 5 6 7 |
p { white-space: nowrap; width: 100%; /* IE6 では width の指定が必要 */ overflow: hidden; /* "overflow" の値は "visible" 以外のものを指定する */ text-overflow: ellipsis; /* IE, WebKit (Safari, Chrome), Firefox 7, Opera 11 */ } |
使用html
|
1 2 3 4 5 6 |
<div class="tablecell"> <ul> <li class="left">左</li> <li class="right"><p>右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右石右右右右右右右右右右右右右右右右右右右右右右右右</p></li> </ul> </div> |
使用css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
.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%; } |
こうすると.leftのwidthが消滅するという現象が起きた
IE6で必要って書いてあるwidthを逆に消せばいいのか？と
.right pのwidthを消しても駄目だった。
次にpxで指定してみたら「…」が表示され.leftのwidthも復活した
まとめ
text-overflow: ellipsis;側のwidthはpxで指定する。
httpsでレイアウトが崩れた
昔つくったサイトでレイアウトが崩れると連絡がありました。
話を聞くと、httpsで見るとレイアウトが崩れるとか。
そんな事あるのかな？と確認するとfloat部分がカラム落ちしてました。
httpだとこうなってる
httpsだとこうなる
現象としては、横並びさせてる3要素の最後のmarginをjsで0にしてたんだけど、それが効いてない感じ。
jqeury本体は▼のを使ってた
|
1 2 3 |
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> |
もしかして、httpだから？
で調べてみるとプロトコル表記は省略出来るとの事で、次のように変更。
|
1 2 3 |
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> |
参考
emmetで、テキストをWrap with Abbreviationしつつ、valueやhrefなどに同じテキストを挿入する方法
Wrap with Abbreviation時に
option[value=$#]*>{$#}を使うと
こんなhtmlがあった時
|
1 2 3 4 5 6 7 8 9 10 11 12 |
北海道 北東北（青森・秋田・岩手） 南東北（宮城・山形・福島） 関東（東京・茨城・栃木・群馬・埼玉・千葉・神奈川・山梨） 信越（長野・新潟） 北陸（富山・石川・福井） 中部（静岡・愛知・岐阜・三重） 関西（京都・滋賀・奈良・和歌山・大阪・兵庫） 中国（岡山・広島・山口・鳥取・島根） 四国（香川・徳島・高知・愛媛） 九州（福岡・佐賀・長崎・熊本・大分・宮崎・鹿児島） 沖縄 |
Wrap with Abbreviation
こう出来る！
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<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> |
素敵っ！
参考
横幅が変動する要素をセンタリングする。
通常、ブロック要素をセンタリングさせるには
1）横幅を指定
2）左右のmarginをauto
|
1 2 |
width:100px margin:0 auto; |
するけど
横幅を指定しちゃうから、内容に合わせて横幅が伸縮するような要素をセンタリングさせられません。
けど、widthの代わりにdisplay:tableを使うと
横幅が変動する要素をセンタリングが可能にッ！！！
|
1 2 |
display:table; margin:0 auto; |
display:table;はIE8も理解してくれます
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<!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> |
CotEditorで.htmlファイル中に書いたCSSのコメントにもカラーリングを適用させる
ちょっとしたhtmlを書いたり、修正したりする際（たまに）CotEditorを使ったりしてます
やっぱり立ち上がりが早いっていいです。
ただ、html中に書いたcssのコメントがコメント扱いされず見づれーなぁと思う時さあっで
cssのコメント/* cssコメント */もコメント扱いさせられねぇべかと
環境設定を弄っていたらcssのコメントもコメント扱い出来たから方法をシェアするど＼( ‘jjj’ )／
