サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
大谷翔平
webkan.hateblo.jp
スマホはレスボンシブ、iPadはPC画面縮小表示したい。 そんな訳で実装する為に、 ↓この3つについてご説明します。 ・レスボンシブサイトのviewport設定 ・PC表示をそのまま縮小する為のviewport設定(iPad用) ・デバイスによってviewport設定を振り分ける レスボンシブサイトのviewport設定まずこちらから。 表示画面サイズの設定は、content=widthの値をどうするかですが、 Googleが推奨する設定に縮小はさせない設定の↓こちらがスタンダードです。 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0"> ・幅を各デバイスのサイズに合わせる(width=device-width) ・初期設定は等倍表示(initial-scale=1.
上付き文字タグ(sup)をそのまま使うとブラウザによってずれるようです。 (ブラウザのデフォルト設定があるので) 対応方法なので、cssで調整します。 ↓こんな感じに整えます。 html <p>30m<span class="supText">2</span></p> <p>D<span class="subText">3</span></p> *上付き文字、下付き文字にクラスを付けます。 css span.supText { font-size: 75.5%; vertical-align: top; position: relative; top: -0.1em; } span.subText { font-size: 75.5%; vertical-align: bottom; position: relative; top: 0.1em; } *font-sizeは好きなサイズ、「
jQuery1.8ぐらいから、 .click(function(){}) →.on('click', 'id', function() {}) ↑で書くべし的な事を言われてちゃんと.onで書いているのになぜか?効かない。。。 1時間ぐらいハマったのでメモ。。 1. まずはjQueryのバージョンを確認 .on()メソッドはjQuery1.7に登場ですので、 当然それより前のバージョンでは使用できません。。 意外と見落としてしまいます。 レスボンシブ対応の比較的新しいサイトでv1.5.2が使われていた。。なんて事もありました。 わりとよく使うjs系をテンプレセットにして何年も使う会社もありますし、古いサイトのメンテやセミリニューアルなどで物凄く古いjQuery Libraryに出会う事もあります。 *ファイル名が「jquery.js」とバージョン名が書かれていない物は、中身(ソース)を見て上
トロイの木馬やiWormは、第三者がパソコンを勝手に操作できるようにするマルウェアです。 主にフリーなどから感染するケースが多く感染すると、 PCの中身を勝手に変えられる、個人情報やクレジットカード(ネット銀行など)情報を盗まれる、ホームページの閲覧履歴を盗まれるなどの被害があります。 トロイの木馬「Flashback」に感染しているか?チェックする方法 ターミナルを起動↓を入力 safariの場合: defaults read /Applications/Safari.app/Contents/Info LSEnvironment firefoxの場合: defaults read /Applications/Firefox.app/Contents/Info LSEnvironment Chromeの場合: defaults read /Applications/Chrome.app/
カス削除くんは2018年に再リリースしております。 新バージョンの手順をご紹介します。 気がつけば勝手に作られる不可視ファイル。。 他の人とのファイルのやり取りで「_notes」などが紛れ込んでいたら、 プロとして恥ずかしい。。 ターミナルでももちろん削除できますが、 対象ファイルドラックと、削除ボタンクリックだけで一瞬で、 サブファイルも削除できる「カス削除くん」をご紹介します。 納品ファイルやテストサーバーにアップする時に便利ですね。 「.git」「.svn」などのバーション管理用ファイルも選択すれば削除できます。 6年以上使ってますが、手放せないぐらい便利です。 ダウンロードする*airアプリなのでWindowsとMacどちらでも使用できますが、 Adobe airの最新版をインストールしておく必要があります。 ▼Adobe AIRダウンロードサイト http://www.adobe
PC版は全く問題ないのに。。iPhoneで表示確認するとちゃんと、 文字サイズ指定したのに、大きくなったり小さくなったり。。 文字サイズにバラつきが出る問題。。 解決方法 結論から言うと↓で直ります。 body { -webkit-text-size-adjust: 100%; } どうやら、iPhoneの文字サイズ自動調節機能が効いてしまっているようです。 自動調整を行わないようにする指定が↑こちらになります。 ちなみに、 webkit-text-size-adjust: none; だと文字の拡大ができなくなるのでNGです。 WebKitのバグのようです。。 リセットcssに入れておくといいですね。 ▼リセットcss最新版 テンプレ http://d.hatena.ne.jp/soratomo0714/20120814/p2 【関連記事】 ▼Chromeでfont-sizeにremを使
「rem」は、CSS3のfon-size 単位。 親要素に継承されず、ルート(html)からの相対サイズが指定出来るので、 とても便利なのですが、Chromeでフォントサイズが大きくなる現象があります。。(涙) どんな時にフォントサイズがおかしくなるのか? html { font-size: 62.5%; } body { font-size: 1.6rem; } こう書いた時に、bodyの文字サイズは62.5%が無効になり100%(デフォルトサイズ)に対して1.6remになってしまいます。 ただ、classやpなどで別でサイズ指定している所は正常なサイズ。 bodyが継承されいる(個別指定していない)要素は大きいサイズで表示されてしまいます。 解決方法 bodyにサイズ指定するなら相対指定をする。 body { font-size: 1.6em; } bodyもルート要素の為、remをe
日本語対応で、サブフォルダごと比較、差分修正、書き込み編集ができて、データ抽出もできる! 今回ご紹介する「CompareMerge」は「WinMerge」のMac版と言えると思います。 ちなみに、以前「FileMerge」をご紹介しましたが、日本語設定が不要、インライン編集ができるなどの点でこちらの方がオススメです。 今回ご紹介する機能は下記3点。 ・基本的なdiff機能 ・差分結果をhtml形式でレポート作成(修正した所を報告するのに便利) ・差分ファイルの抽出方法(納品ファイル作成に便利) 1年ぐらい前から使ってますが、納品ファイル作成、日付違いの原稿のチェック、他の人との共有データチェックなど大変重宝しております。 ▼ダウンロード http://sourceforge.net/projects/comparemergenosandbox/ ↓App store (こちらだと有料になり
タイムスタンプで納品データを管理する際に、jsライブラリなど使い回しているファイルのタイムスタンプを変更したい。。 とか、画像の撮影日時が間違っていて修正したい。。 そんな時に便利なアプリ「Shupapan」のご紹介です。 *ファイル名に連番をつけたり、パーミッションを一括で変更したりなどもできます。 *「Shupapan」はmac用です。 Windowsなら▼こちらが参考になると思います。 http://www.atmarkit.co.jp/fwin2k/win2ktips/1350timspg/timspg.html 「Shupapan」をダウンロード ▼ダウンロードサイト http://sunsky3s.s41.xrea.com/shupapan/download/index.html OS X 10.8以降なら「バージョン 5.9.7β Universal Binary版」で大丈夫
jQuery UI タブメニュー1 IE6〜9まで問題なし。 html5→エラーなし。 ▼完成URL http://jewelcafe.main.jp/0717/tab/index.html jQuery TOOLS タブメニュー2 IE6〜9まで問題なし。 html5→エラーなし。 css→エラーなし。 ▼完成URL http://jewelcafe.main.jp/0717/tabs/index.html Yetii タブメニュー3 タブの左側が空いているのが気になる。。 IE8・9→問題なし。 IE6・7→tabが左よりになる。tabの下のボーダー右側がなくなる。。 html5→エラーなし。 css→エラーなし。 ▼完成URL http://jewelcafe.main.jp/0717/yetii/index.html タブ切り替えパネル タブメニュー4 IE6〜9→まで問題なし。
このページを最初にブックマークしてみませんか?
『iPadで端が切れたり余白できたり。。スマホとiPadでviewport設定をjsで振り分ける ...』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く