mania-ku

何か作りたいプログラマ未満。

【スマホ】selectのテキストは左右中央にできるのか?

できるのかな?とtext-align: center;を試しましたが、動かず。

ぐぐったらtext-align: -webkit-center;で左右中央にできるというのでやってみたけれど、iOS7・iOS8で効きませんでした。

bugfix

試行錯誤したら動きました!
※iPhoneと同じCSSだとAndroidで動かない(labelクリックしてもselectが開かない?)みたいです。

//HTML
<label>
    <select>
        <option>選択1だよ〜</option>
        <option>選択2だよ〜</option>
        <option>選択3だよ〜</option>
    </select>
</label>


//CSS
select { //Android
    text-align: center;
}

@media screen and (max-device-width: 480px) { //iPhone
    label {
        display: -webkit-box;
        display: box;
        box-pack:center;
        -webkit-box-pack:center;
        background-color: #fff;
        border: 1px solid #CCC;
        border-radius: 6px;
        cursor: pointer;
    }

    select {
        border: none;
    }
}

【jQuery】「Uncaught Error: Syntax error, unrecognized expression: [name=]」というエラーが出たら

$('input[name='text']');

のような内側外側の引用符が同じことが原因です。
jQueryの仕様が変わって、エラーが出るようになったみたいです。

修正の方法は【jQuery】引用符とエスケープを覚える | mania-kuをどうぞ。

【Mac10.6.8】プレビューで複数のpsdをjpgに変換する

Webサイトを作るとき、デザインをjpgでクライアントに送るなんてこともあるかと思います。
サクッと終わらせるにはどうすればいいでしょうか?

Mac10.6.8でプレビューを使う場合

  1. 1.フォルダごとプレビューのアイコンの上にドラッグ&ドロップ
  2. 2.Command + Aで全選択
  3. 3.サイドバーのファイルのアイコンの上で右クリック→コピーをフォルダに保存
  4. 4.フォーマットをjpgにして品質を指定し、保存したいところを選択し、選択を押す

フォーマットはどんなものがあるの?

  • ・GIF
  • ・ICNS
  • ・JPEG
  • ・JPEG-2000
  • ・Microsoft BMP
  • ・Microsoft アイコン
  • ・OpenEXR
  • ・PDF
  • ・Photoshop
  • ・PNG
  • ・TGA
  • ・TIFF

これだけあれば一括変換でいろいろ楽ができそうですね!

【Firefox】letter-spacingがnormalか0じゃないとリガチャが表示されない

Ligature Symbolsが好きでプライベートでよく使いますが、letter-spacingがnormalか0以外だとFirefoxではリガチャが表示されません。

参照:bug 5647 – [Cairo] letter-spacing が 0 でない場合、リガチャを使うべきでない

【Chrome】オートコンプリートのとき、背景を黄色にしないようにする方法3つ

Chromeでオートコンプリートのときに、標準では背景が黄色になります。
これをしない方法3つです。

CSSでの解決策

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px [背景にしたい色] inset;
}

HTMLでの解決策

<form autocomplete="off">
</form>
<input autocomplete="off">

jQueryでの解決策

if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
    $('input').attr('autocomplete', 'off');
}

【Safari】印刷できないGoogleMap

Safariで埋め込みのGoogleMapの印刷ができないものがありました。

GoogleMapを開いて右下の設定アイコンからの埋め込み:×

iframeで埋め込むタイプのもの。表示されず空白になります。

マイマップ:○

x見た目をカスタマイズしたりできるもの。
埋め込み方がわからなかったので、共有コードのeditをviewにしてiframeにつっこんでみたらできました。

//コード修正
https://mapsengine.google.com/map/edit?mid=zp9YOynKFddo.kkFqfEH-XKeU
↓
https://mapsengine.google.com/map/view?mid=zp9YOynKFddo.kkFqfEH-XKeU

Google Maps JavaScript API V3:○

jsを書くのが必要なもの。これはiframeじゃないみたいですね。

【IE7】aの中のspanがクリックできない

IE7でaの中のspanがクリックできないことがあります。状況としては下記のようなときです。

  • ・spanがdisplay: block;のときはクリックできない。
  • ・spanがdisplay: table-cell;(display: inline;zoom: 1;)のときはクリックできない。
  • ・spanがdisplay: inline;ではクリックできる。

解決策

aの外側をhasLayout: trueにし、spanをposition: relative;z-index: -1;にします。

display: block;のとき

/* HTML */
<ul class="clearfix">
    <li><a href="http://jsdo.it"><span class="pic"><img src="http://dummyimage.com/200x150/000/fff" alt=""></span><span>クリックできない</span></a></li>
</ul>
/* CSS */
li a span {
    display: block;
}
↓
li a span {
    position: relative;
    display: block;
    z-index: -1;
}

参考:IE7-/Win: Not clickable image in a link (caused by hasLayout)

display: table-cell;(display: inline;zoom: 1;)のとき

/* HTML */
<ul>
    <li><a href="http://jsdo.it/"><span><img src="http://dummyimage.com/50x50/000/fff" alt=""></span><span>クリックできない</span></a></li>    
</ul>
/* CSS */
li {
    margin-top: 5px;
    list-style: none;
}

li a span {
    display: table-cell;
    /display: inline;
    /zoom: 1;
    vertical-align: middle;
}
↓
li {
    margin-top: 5px;
    list-style: none;
    /zoom: 1;
}

li a span {
    position: relative;
    display: table-cell;
    /display: inline;
    /zoom: 1;
    vertical-align: middle;
    z-index: -1;
}

おまけ:display: block;のときにbugfixしてもクリックできないときは。

親にposition: relative;がかかっていないか調べてください。
※入ってないなぁと思ってもclearfixに含まれている場合もあります。

【Custom Scrollbar plugin】カスタムスクロールバー中のareaがスムーズスクロールしちゃう

Custom Scrollbar pluginのバージョン2.8.3を使ったカスタムスクロールバー中にareaがあると、クリックしたときにページ最下部へのスムーズスクロールになってしまいます。

bugfix

jquery.mCustomScrollbar.js内のareaの記述を削除します。
でもtextareaのほうは消さないように気をつけてください。そうすると直ります。

独断と偏見でオススメするウェブ漫画

紙じゃない本なんて。。。!と思っていたのに、最近はスマホかタブレットで漫画を読むことが多いです。市販のものをKindleで読んだりするのも好きなのですが、最近のオススメはウェブで連載している漫画。昔は市販のものを有料で読むサイトに登録していたのですが、まったく読まない月もあるのでなんだかなぁ・・・(阿藤快?)と思い解約。いろんなサイトやcomicoマンガボックスといったアプリで見ています。一番見ているのはcomicoでしょうか。
ということで、今回はオススメの漫画サイトや漫画を紹介して行きます!

御かぞくさま御いっこう

ノンフィクションらしい?作者と家族の日常4コマ。キャラクターが動物化されててすごくかわいいw

旦那が何を言っているかわからない件

オタクな旦那が何を言っているかわからないよ(ほぼタイトルのまま)な漫画。祝アニメ化決定!

モアイ

独身OLのすべて/まずりん

腹筋を鍛えられずにはいられない漫画です!
独身OL3人のギャグ4コマ。

かたくり/マイカタ

Webデザイナーが主人公の日常漫画。あるあるーと思って見ています。でも同業だとつらい面もあるかも・・・

インドでキャバクラ始めました(笑)/沼津マリー

インドもキャバクラのことも一切知らないのですが、これは面白い!(ホストなら行ったことはあるんですが。)
人生出たとこ勝負な主人公のフィクション。
人生って意外と何とかなるんだなぁってことと、インドでキャバクラをやる際の大変な様が伝わってきます。

comico

下に読み進めて行く珍しい形です。新しい書き方を見るたびにまだまだ漫画の可能性はあるんだなーと感心してしまいます。

かぴぐらし | ちーぱか

イラストレーターの主人公ちーぱかと同居人のウェブデザイナーかぴ、オカメインコのちーぽのほのぼの日常漫画。
ご飯大好き、運動嫌いな同居人が面白い!

ネト充のススメ | 黒曜燐

ネナベの主人公がネトゲでいろんな人と触れ合う話。

Queen | さんぱち

FBIアカデミーの候補生の話。殺人事件なんかが起きるアクション。アメコミっぽいかんじ。

さーたん | ユウビ

主人公と魔王さーたんの話。魔王が女性なので、何か不思議な感じ。

でしにっき | 上島カンナ – comico

江戸端唄師弟関係日常ギャグマンガ?

マンガボックス

蛙のおっさん

主人公の小学生と同居している蛙の顔をしたおっさんのショートギャグ。

たわら猫とまちがい人生

デブ猫と主人公の日常の話。

【HTML5】Videoが動かないときに確認すること

<source src="video/***.webm" type="video/webm">
<source src="video/***.mp4" type="video/mp4">

このようなコードでIEやChromeでVideoが動かない場合、mp4がH.264タイプではなく、MPEG4タイプかもしれません。

Macでの確認方法

QuickTIme Player>Cmd+Iのインスペクタで、フォーマットがH.264(H.264タイプ)かMPEG-4(MPEG4タイプ)か確認できます。

Windowsでの確認方法

<video>タグでmp4の動画が再生されない(解決法)(たまちゃんHTMLのおうち~作成に役立つテクニック)の方法で確認できます。