なんで入力する内容の説明をプレースホルダーだけで賄おうって思ったんだって話。
こんなの全然スタイリッシュでもなんでもないですから。くっそ使いづらい。
さらにここは、よくある並びの
[姓 名]
[セイ メイ]
じゃなく
[姓 セイ]
[名 メイ]
が1列になってる点もポイント高いんじゃないかって思います。
カテゴリー: html/css
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:10pxsolid#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> |
参考
全般的なスタイルルール プロトコル 埋め込みリソースからプロトコル表記（http:,https:）を省略する。
httpsだとjQuery/Ajaxは使えないのでしょうか？
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:0auto; |
するけど
横幅を指定しちゃうから、内容に合わせて横幅が伸縮するような要素をセンタリングさせられません。
けど、widthの代わりにdisplay:tableを使うと
横幅が変動する要素をセンタリングが可能にッ！！！
1 2 | display:table; margin:0auto; |
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:1emauto; background:#fff; padding:1em; } .contentB{ background:#fff; padding:1em; display:table; margin:1emauto; } </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のコメントにもカラーリングを適用させる
tableに指定したpaddingが効かない原因はborder-collapse: collapse;
tableに指定した背景を少し広げようと思って
paddingを指定したけどうんともすんとも言わない
firebugで確認してもpaddingは指定されてるわ、でも実際には反映されてないわってのが確認できた
最小のソースで試してみたらそっちはちゃんとpadding効いた
さっぱり意味がわからず時間も無かったから
その時は背景色と同じ色のborderで誤魔化した（邪道）けど
落ち着いてよく考えてみたら
問題の起きてるファイルに読み込まれてて
最小の記述に読み込まれてないreset.css内の内容がほぼ犯人としか思えない
そこでtable周りのreset指定を見なおして、とてつもなく怪しい奴がいました
1 | table{border-collapse:collapse;} |
って事で次のように書き換えてみると
1 | table{border-collapse:separate;} |
tableに指定したpaddingが反映されました
![[image]tableにmargin](https://i2.wp.com/blog.sakurachiro.com/wp-content/uploads/2013/04/2013-04-25_01.png)
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 41 42 43 44 45 46 47 48 49 50 51 52 53 54 | <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title></title> <style> body{ padding:3em; font-family:sans-serif; } table{ width:300px; margin:0auto; background:#f33; padding:2em; border:1pxsolid#000; border-collapse:collapse; margin-bottom:20px; } th,td{ background:#fff; border:1pxsolid#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> |