新しいiPhoneの解像度とCSSピクセル幅を考える - fragmentary
そろそろSafari 8?のベースになるWebKitのブランチが切られるかなと思って待っていたら月末になってしまった。ネタがないのでiPhoneの噂話でもしよう。 新iPhoneの画面解像度は？ まず、確かな情報筋（）によると、4.7インチと5.5インチのモデルが出ると。 4.7インチは750×1334らしい。現行iPhoneのディスプレイと同じ326ppiなものを4.7インチにするとこうなると。5.5インチだとフルHDな1080×1920らしい。こちらは新しいディスプレイで401ppiだって。 さて、5.5インチについてはまだわかるんだけど、4.7インチの謎解像度はないのではないかと思っている。というのはデバイス非依存ピクセルを想像すると2つのモデルで幅が異なる可能性が高いから。同じディスプレイが使えるという製造観点での利点や理由はあれど、アプリとかの観点から考えると煩わしすぎるわけです
iPhone/iPad/Apple Watch解像度(画面サイズ)早見表 - Qiita
用語解説 ポイント boundsやframe等で使用される論理的な画面サイズ。通常はこれを意識してプログラムを作成します。 ピクセル 描画が行われる論理的な画面サイズ。ピクセルパーフェクトな描画が必要な場合には、このグリッドに合うように描画を行う必要があります。 デバイス 端末に搭載された液晶の物理的なピクセル数。これが上記ピクセル数と一致しない場合には、ピクセルパーフェクトの描画は非常に難しくなります。 このサイトの解説がわかりやすいです。 https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions 拡大モード iPhone6, 6 Plusでは、画面設定から拡大モードが選択できます。 上記の表にまとめた通り、retinaの倍率はそのままで、ワンサイズ小さいiPhone相当のポイント数になります。 iPho
すりガラスの様なぼかし効果がかかった画像作成のチュートリアル
2013年頃からにわかに流行りだしたすりガラスっぽいのフィルターをかけた見せ方は、iOS7で取り入れられ一気に認知度が広がりました。 例えば下から上に向かってスワイプすることで出せるコントロールセンターには、白いすりガラスが。ホームボタンを長押ししてだせるSiriには、黒いすりガラスのフィルターがかけられており、とても美しいですね。このすりガラスのフィルターは、ブラー（blur）効果と言われております。
女性モデルのフリー画像 無料人物写真素材のモデル・フォト
女性モデルの写真素材・フリー画像 女性モデルのフリー画像 無料人物写真素材の model.foto（モデルドットフォト）では、 プロのカメラマンが撮影した女性モデルの人物写真を 無料でフリー画像素材として公開しています。 女性モデルのフリー画像 無料人物写真素材のモデル・フォト 女性モデルのフリー画像 無料人物写真素材の model.foto（モデルドットフォト）では、プロのカメラマンが撮影した女性モデルの人物写真を無料でフリー画像素材として公開しています。 広告素材・Web素材・デザイン素材として商用利用も可能な高画質・高解像度のフリー画像が今すぐ無料でダウンロードできます。 model.foto の写真素材は、ご利用規約の範囲内で、商業広告・出版物・冊子のデザイン、Webサイトやホームページのデザイン制作、TV番組やCMの映像製作、店舗や看板の装飾などに画像のトリミングや合成など、自由
CSSフィルター：背景の一部をぼかす表現 – ハック｜kousoku AWS
サンプルはこちら。 http://codepen.io/KazuyoshiGoto/pen/nhstF テキストの乗っているレイヤーで擦りガラスを通したような表現を作っています。 CSS(Sass) HTMLはごくシンプルなので要のCSSについて。 body, section:before { background:url("***.jpg"); background-position: center; background-size: cover; background-attachment: fixed; } section:before { content: ""; z-index: -1; -webkit-filter: blur(4px); -ms-filter: blur(4px); filter: blur(4px); position: absolute; width: 1
CSSでbody指定の背景を中央寄せする簡単な方法！確実に忘れそうだから備忘録
今回はbodyタグの背景画像を中央寄せする <STYLE type="text/css"> <!-- body { background-image:url("/*背景画像のURL*/"); background-repeat:no-repeat; background-position: 50% 50%; background-attachment:fixed; } --> </STYLE> 簡単ですね。 もう、終わっちゃったので上から順に解説しましょう！ 背景画像の指定をする background-image: url("/*背景画像のURL*/"); 背景画像の繰り返しをさせない background-repeat: no-repeat; 背景画像のポジションを左右に50%余裕を持たせる background-position: 50% 50%; 背景画像をガッチリ固定する back
Webフォント「Google web fonts」の使い方・実装手順メモ
商用・非商用を問わず無料で利用できるWebフォント、「Google web fonts」の実装方法をさっくりメモっておきたいと思います。 Google Web Fonts Google web fontsとは Webページ閲覧時、通常ではパソコンにインストールされているフォントしかブラウザで表示することが出来ませんが、「Webフォント」を使用すると任意のフォントを表示することが出来ます。 Googleの提供するGoogle Web Fontsはアカウント登録の必要も無く、実装が非常に簡単なそれの一つです。商用・非商用ともに無償で利用が可能と言うのもポイント:) ちなみに当サイトでも日付の表示とサイドバー・フッターの見出しにGoogle web fontsの「Coda」を使用しています。 Google web fontsの実装方法 実装の手順は3ステップ。 1.使いたいフォントを選択する 2
CSSのfont-family指定に関する考察 2014年版 | ブログ | 静岡県のホームページ制作 | 6666666 セブンシックス
引用元：フォントカタログ5・ブラウザのデフォルトフォント 合成フォントの問題 font-familyを指定する際に、日本語フォントよりも優先順位の高い位置に欧文フォントを置くテクニックがあります。こうすることで、欧文フォントに存在しない文字だけ日本語フォントが適用される、いわゆる合成フォントが実現できます。ブラウザの標準フォントでも、safariではHelveticaとヒラギノ、IE8ではArialとMSゴシックの合成フォントが適用されています。 合成フォントは、日本語フォントの英数字を見やすくする措置です。しかし、ひとつの文章の中に複数のフォントが混在すると、文字の大きさやウェイト、ベースラインなどが微妙に異なり、違和感を覚える懸念があります。英数字だけにやけに太かったり、ひとまわり小さかったり。印刷物と違って、ウェブでは微調整がとてもむずかしい。特別、デザイン的な狙いがないのであれば、
テキストエリアで取得した文字列の改行 初歩的な質問で申し訳無いのですが <html> <span></span> <textarea wrap="hard"></textarea> ///////////////// でこの…
テキストエリアで取得した文字列の改行 初歩的な質問で申し訳無いのですが <html> <span></span> <textarea wrap="hard"></textarea> ///////////////// でこのテキストエリア内に文字が打ち込まれた際にその文字を <script> var text =$('textarea').text(); $('span').text(text); ////////////////// jQueryで取得してspanタグに入れたいのですがtextarea内で 「あいうえお(改行) かきくけこ 」 となっている時はどのようにして改行をspanタグ内で反映させるのでしょうか？ （結果は「あいうえお かきくけこ」になってしまいます） お手数ですがよろしくお願いします。
JQueryでテキストエリアの入力値を取得する - Fight the Future
$("#テキストエリアのID").val() サンプル <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script type="text/javascript" src="lib/jquery/jquery.js"> </script> <script type="text/javascript"> $(function(){ $("#trigger").click(function(){ var text = $("#target").val(); alert(text); }); }); </script> </head> <body> <textarea id="target" rows="10" cols="100"> </textarea> <br> <in
jqueryでhtmlの書き換えを行う方法
jqueryでhtmlを書き換える方法はいろいろとあります。 テキストを書き換える方法 $("セレクター").text("書き換え"); 例えば、フリーランスをデザイナーに書き換える <p class="text">フリーランス</p> jqueryのタグは $("p.text").text("デザイナー"); すると <p class="text">デザイナー</p> になります。 htmlタグごと書き換える方法 $("セレクター").html("書き換え"); 例えば、pタグのフリーランスをh3タグのデザイナーに変更します。 <p class="text">フリーランス</p> jqueryのタグは $("p.text").html("<h3>デザイナー</h3>"); すると <h3>デザイナー</h3> にかわります。 htmlの追加 指定した要素内部の先頭に追加する方法 $("セ
HTMLで縦書きは実現できるか - CSSでの実装とライブラリの活用 - Qiita
CSS Writing Modes Level 3 さまざまな言語表記法をサポートする仕様。 writing-modeプロパティで縦書きを指定できる。 writing-mode: tb-rl; /* IE独自仕様 */ writing-mode: vertical-rl; -moz-writing-mode: vertical-rl; -o-writing-mode: vertical-rl; -webkit-writing-mode: vertical-rl; 注意点 IE5.5以降（ただしプロパティ値が独自） Google Chrome, Safariは要ベンダープレフィックス text-decoration:underlineが左側に引かれ、一般的な傍線にならない ※ Opera未確認 問題点 Firefoxでは未だ実装されていない 横幅固定のブロック要素でテキスト量に応じた適切な縦
[JS]複数のCSSアニメーションを簡単に組み合わせて利用できるスクリプト -animo.js
Rotate then flip out それぞれのパネルを回転させ、異なるタイミングでめくってフェードアウトさせます。 animo.jsの使い方 Step 1: 外部ファイル animo.jsはjQuery 2+で動作し、animate.cssを含む60以上の美しいアニメーションをコントロールできます。 head内にjquery.jsと当スクリプト・スタイルシートを外部ファイルとして記述します。 <script src="http://code.jquery.com/jquery-2.0.3.min.js" type="text/javascript"></script> <script src="animo.js" type="text/javascript"></script> <link href="animate+animo.css" rel="stylesheet" type=
jQuery：HTMLの要素にclassを追加・削除する方法 | raining
jQueryを使用してHTMLの要素にclassの追加や削除をしたい場合があります。 クリックやマウスオーバーした時などにスタイルを変更したい場合、 HTMLの要素のclassを変更すれば用意しておいたスタイルに変えることができます。 下記にjQueryの「addClass」「removeClass」「toggleClass」メソッドを使用して、 HTMLの要素にclassを追加したり、削除したりする方法をメモします。 ■ addClass 指定したHTMLの要素にclassを追加します。 $('要素').addClass('クラス名'); ■ removeClass 指定したHTMLの要素のclassを削除します。 $('要素').removeClass('クラス名'); ■ toggleClass 指定したHTMLの要素のclassがなければ追加し、ある場合は削除します。 $('要素'
スタイルシートだけで画像を回転させ続けてみました
Keep it simple, make it general, and make it intelligible! 日頃モニタ画面でよく見かける "回転し続ける画像" といえば、「ダウンロード中」とか「同期中」「考え中」など、そのコンピュータの処理状況が継続する間という目に見えない時間を可視化するために用いられています。 なのでたまには何かを待つという時間を気にかけることなく、ただ単に「回してみたかったから」「回せるんだから」という視点で、日常では "回す側" に位置していて回ることも回されることもないレコードプレーヤーの画像を回してみました。 しかもタイトルの文字通り、Flash や Javascript を使うことなく、スタイルシートだけで。 この「画像を回転させ続けるスタイルシート」のサンプルは、次の通りです。 .spin_infinite { /* keyframes に任意の名
[jQuery] post メソッドと ajax メソッドを使って POST 送信を行うサンプル
jQuery で POST 送信をすることができるメソッドに ajax と post があります。その 2 つのメソッドを用いた簡単なサンプルコードです。それぞれ post.php に POST 送信を行い、レスポンスをアラートで表示します。 まずは post メソッドの使用例です。 post.html <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(function(){ $('#sw').click( function(){ $.post( 'post.php', { 'pd': 'こんにちは' }, function(data){ alert(data); } ); } ); }); </script> </head> <b
![[jQuery] post メソッドと ajax メソッドを使って POST 送信を行うサンプル](https://cdn-ak-scissors.b.st-hatena.com/image/square/8d71ff5111e05619a10d29bb40d7aebaa75c8fbc/height=288;version=1;width=512/https%3A%2F%2Fs0.wp.com%2Fi%2Fblank.jpg)
jQueryでaリンクにイベントを設定するモダンな書き方を教えてください リンクにクリックイベントを設定するとき 最初 <a href="#" onClick="jump(1);">ページ１<…
jQueryでaリンクにイベントを設定するモダンな書き方を教えてください リンクにクリックイベントを設定するとき 最初 <a href="#" onClick="jump(1);">ページ１</a> <a href="#" onClick="jump(2);">ページ２</a> function jump(page) { location.href = 'http://hoge' + page; } としてましたが、なんとなくjQueryでロード時にイベントを設定する方が良いのかなと思って、以下のように直しました $(function(){ $("#one").click(function(){ location.href = 'http://hoge' + 1; }); $("#two").click(function(){ location.href = 'http://hoge' +
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQueryでhiddenの内容を取得する
phpjp.com
css-lecture.com
電話占いで使われる占術をご紹介 | 当たる電話占いおすすめランキング～口コミで評判の当たる電話占いサイト紹介～