web

2015.09.02

app storeのダウンロードバッジ（.svg）を貼るのに手こずった話

appstoreのアプリにリンク貼ろうと

App Store マーケティングガイドライン – Apple Developer
からダウンロードバッジをダウンロードしてみたところ中身は.svgでした。

お恥ずかしながら.svgて使った事なかったのですが、現在は普通にimgタグに指定すれば表示される様子。

<img src="Download_on_the_App_Store_JP_135x40.svg" alt="ダウンロード">

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

2015.07.25

[iOS]inputの内側の影を消したい

Q)
上の画像みたいに、borderがあると影が出来る（border:noneだと消える）
任意のborderを指定しつつ影を消したい

-webkit-appearance:none;

1	-webkit-appearance:none;

を指定する。

2015.07.05

gulp-csscomb（CSSのプロパティを並び替えてくれるプラグイン）の整形フォーマットを自分好みに変更する。

どうもども、今日からgulpを使い始めました。
タスクランナーてのは、より早く作業を進める為にブラインドタッチを覚える、の延長線的な感じですね。
新しい技術ってのは身につくまで作業が停滞してしまうのが痛いです、巻き返せるかしら…。

というわけで、手始めにgulp-csscombの整形フォーマットを自分好みに変更する方法の覚書。

2015.06.15

WordPress Importerのインストールが失敗する。

ローカル環境のWordPressに
WordPressテーマユニットテストデータ日本語版を更新したよ！ ‹ nuunoのデータをインポートしようとしたら
WordPress Importerがインストール失敗して読み込めないでいました

どうやら管理画面からひっぱってくるヤツにはバグがあるそうな

wordpress環境移行 – WordPress Importer 最新版をつかってるのにエラーが消えない場合 – Qiitaを参考に
http://downloads.wordpress.org/plugin/wordpress-importer.zipを使ってインポート成功しました。

というメモ。

2015.04.11

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

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

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

text-overflow – CSS | MDN

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

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

p {

white-space: nowrap;

width: 100%; /* IE6 では width の指定が必要 */

overflow: hidden; /* "overflow" の値は "visible" 以外のものを指定する */

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

}

使用html

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

<ul>

<li class="right"><p>右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右石右右右右右右右右右右右右右右右右右右右右右右右右</p></li>

</ul>

</div>

使用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%;
 }

.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で指定する。

2015.02.16

httpsでレイアウトが崩れた

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

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

httpだとこうなってる

httpsだとこうなる

現象としては、横並びさせてる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は使えないのでしょうか？

2014.09.21

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

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

こんなhtmlがあった時

北海道 
北東北（青森・秋田・岩手）
南東北（宮城・山形・福島）
関東（東京・茨城・栃木・群馬・埼玉・千葉・神奈川・山梨）
信越（長野・新潟）
北陸（富山・石川・福井）
中部（静岡・愛知・岐阜・三重）
関西（京都・滋賀・奈良・和歌山・大阪・兵庫）
中国（岡山・広島・山口・鳥取・島根）
四国（香川・徳島・高知・愛媛）
九州（福岡・佐賀・長崎・熊本・大分・宮崎・鹿児島）
沖縄

北海道

北東北（青森・秋田・岩手）

南東北（宮城・山形・福島）

関東（東京・茨城・栃木・群馬・埼玉・千葉・神奈川・山梨）

信越（長野・新潟）

北陸（富山・石川・福井）

中部（静岡・愛知・岐阜・三重）

関西（京都・滋賀・奈良・和歌山・大阪・兵庫）

中国（岡山・広島・山口・鳥取・島根）

四国（香川・徳島・高知・愛媛）

九州（福岡・佐賀・長崎・熊本・大分・宮崎・鹿児島）

沖縄

Wrap with Abbreviation
こう出来る！

<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>

素敵っ！

参考

Controlling output position

123 4 5 6

web

app storeのダウンロードバッジ（.svg）を貼るのに手こずった話

[iOS]inputの内側の影を消したい

gulp-csscomb（CSSのプロパティを並び替えてくれるプラグイン）の整形フォーマットを自分好みに変更する。

WordPress Importerのインストールが失敗する。

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

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

使用html

使用css

まとめ

httpsでレイアウトが崩れた

参考

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

参考

最近の投稿

カテゴリー

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

使用html

使用css

まとめ

参考

参考

最近の投稿

よく見られているページ

カテゴリー