cjk-ideographicてば
css2で実装されて、
2.1で一時削除されたけど
3で復活したもんだと思っていたらIEが対応してなかった。
firefox（やその他のブラウザー）での表示
IE11での表示
web
app storeのダウンロードバッジ（.svg）を貼るのに手こずった話
appstoreのアプリにリンク貼ろうと
App Store マーケティングガイドライン – Apple Developer
からダウンロードバッジをダウンロードしてみたところ中身は.svgでした。
お恥ずかしながら.svgて使った事なかったのですが、現在は普通にimgタグに指定すれば表示される様子。
|
1 |
<img src="Download_on_the_App_Store_JP_135x40.svg" alt="ダウンロード"> |
確かにローカルではこれで大丈夫でした。
で、目的のサーバーにアップロードしてモバイル端末で確認してみると、svgが正方形の枠だけで中身が表示されていない…
.svgの中身を貼り付けたら表示されるけど、cssでのサイズ指定が無視されるようで使いづらい。
どうやらサーバーの設定が原因みたいで、.htaccessに
[text]
AddType image/svg+xml .svg
AddType image/svg+xml .svgz
[/text]
を追加したら無事表示されました。
めでたしめでたし。
ちなみにgoogleplayのダウンロードアイコンはここから作れます。
Google Play Badge Generator | Android Developers
[iOS]inputの内側の影を消したい
Q)
上の画像みたいに、borderがあると影が出来る（border:noneだと消える）
任意のborderを指定しつつ影を消したい
A)
|
1 |
-webkit-appearance:none; |
を指定する。
gulp-csscomb（CSSのプロパティを並び替えてくれるプラグイン）の整形フォーマットを自分好みに変更する。
どうもども、今日からgulpを使い始めました。
タスクランナーてのは、より早く作業を進める為にブラインドタッチを覚える、の延長線的な感じですね。
新しい技術ってのは身につくまで作業が停滞してしまうのが痛いです、巻き返せるかしら…。
というわけで、手始めにgulp-csscombの整形フォーマットを自分好みに変更する方法の覚書。
WordPress Importerのインストールが失敗する。
ローカル環境のWordPressに
WordPressテーマユニットテストデータ日本語版を更新したよ！ ‹ nuunoのデータをインポートしようとしたら
WordPress Importerがインストール失敗して読み込めないでいました
どうやら管理画面からひっぱってくるヤツにはバグがあるそうな
wordpress環境移行 – WordPress Importer 最新版をつかってるのにエラーが消えない場合 – Qiitaを参考に
http://downloads.wordpress.org/plugin/wordpress-importer.zipを使ってインポート成功しました。
というメモ。
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> |