Q)
上の画像みたいに、borderがあると影が出来る（border:noneだと消える）
任意のborderを指定しつつ影を消したい
A)
1 | -webkit-appearance:none; |
を指定する。
web
どうもども、今日からgulpを使い始めました。
タスクランナーてのは、より早く作業を進める為にブラインドタッチを覚える、の延長線的な感じですね。
新しい技術ってのは身につくまで作業が停滞してしまうのが痛いです、巻き返せるかしら…。
というわけで、手始めにgulp-csscombの整形フォーマットを自分好みに変更する方法の覚書。
ローカル環境のWordPressに
WordPressテーマユニットテストデータ日本語版を更新したよ！ ‹ nuunoのデータをインポートしようとしたら
WordPress Importerがインストール失敗して読み込めないでいました
どうやら管理画面からひっぱってくるヤツにはバグがあるそうな
wordpress環境移行 – WordPress Importer 最新版をつかってるのにエラーが消えない場合 – Qiitaを参考に
http://downloads.wordpress.org/plugin/wordpress-importer.zipを使ってインポート成功しました。
というメモ。
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で見るとレイアウトが崩れるとか。
そんな事あるのかな？と確認すると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は使えないのでしょうか？
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> |