49hack

見習いエンジニアが魔法使いになるまで

css

width: calc()が効かないと思ったら書き方に問題があった

css

CSS3のcalc()ファンクションが最新のブラウザで効かない。。困った。。。 .hogeBlock width: calc(100%-320px) // ←こいつ 原因は計算式の書き方でした。計算式の間にちゃんとスペースを入れないと機能しません。 In addition, whitespace is required on bo…

autoprefixerを使って快適にコーディングする

SASSを導入してからコーディングがかなり楽ちんになったのですが、CSSでベンダープレフィックスをつけるとき、「このプロパティってプレフィックスいるんだっけ?」「Safariでこれってまだ必要だっけ?」みたいな問題によく遭遇します。 -webkit-border-radi…

印刷するときだけ要素を非表示にする

印刷ページを別途用意するのもいいけど、ちょっとそれはめんどくさい。。 ってときに、css3のメディアクエリを使うと便利でした。 @media print{ .no_print{ display: none; } } <p>このパラグラフは印刷時には表示されるよ</p> <p class="no_print">このパラグラフは印刷時には表示され</p>…

iPhoneのWebViewでカスタムフォントを使う

アプリ全体のデザインを崩さないためにも、アプリ内のWebViewでも積極的にカスタムフォントを使いましょう。 使用したいカスタムフォントがアプリ内に入っている場合とそうでない場合で方法が若干異なります。 (カスタムフォントがmplus-1c-medium.ttfの場…

iPhone、AndroidのモバイルWebでの長押しアクションを無効化する

css

モバイルWebにおいて、セキュリティ上、WebのリンクURLを表示させたくなかったり、 テキストのコピーを防止したい場合があります。 これらの長押しアクションを無効にするにはbodyのcssに以下を追記します。 body { -webkit-touch-callout:none; // リンク長…

よく使うjQueryでのcssセレクタまとめ

jQueryオブジェクトでcssセレクタを多用するのでその備忘録です。 var target; $('.select').click(function() { target = $(this); // .selectそのもの target = $(this).parent(); // .selectの親要素 target = $('.child',this); // .selectの子要素.chil…