http://w.atwiki.jp/oboegaki1002/ 自分用覚え書き @Wiki ja 2013-07-30T11:49:48+09:00 1375152588 https://w.atwiki.jp/oboegaki1002/pages/43.html <h2 class="TableHeading">Resolutions</h2> <table class="responsivetable"><thead><tr><th>Devices</th> <th>Portrait</th> <th>Landscape</th> </tr></thead><tbody><tr><td class="Device iPhone5">iPhone 5</td> <td>640x1136 px</td> <td>1136x640 px</td> </tr><tr><td class="Device iPhone4">iPhone 4/4S</td> <td>640x960 px</td> <td>960x640 px</td> </tr><tr><td class="Device iPhone3 Subliner">iPhone &amp; iPod Touch <span>1st, 2nd and 3rd Generation</span></td> <td>320x480 px</td> <td>480x320 px</td> </tr><tr><td class="Device iPad Subliner">Retina iPad <span>iPad 3, iPad 4</span></td> <td>1536x2048 px</td> <td>2048x1536 px</td> </tr><tr><td class="Device iPad">iPad Mini</td> <td>768x1024 px</td> <td>1024x768 px</td> </tr><tr><td class="Device iPad Subliner">iPad <span>1st and 2nd Generation</span></td> <td>768x1024 px</td> <td>1024x768 px</td> </tr></tbody></table><h2 class="TableHeading">Displays</h2> <table class="responsivetable"><thead><tr><th>Devices</th> <th>PPI</th> <th>Color Mode</th> <th 2013-07-30T11:49:48+09:00 1375152588 https://w.atwiki.jp/oboegaki1002/pages/42.html <h2 class="TableHeading">Resolutions</h2> <table class="responsivetable"> <thead> <tr> <th>Devices</th> <th>Portrait</th> <th>Landscape</th> </tr> </thead> <tbody> <tr> <td class="Device iPhone5">iPhone 5</td> <td>640x1136 px</td> <td>1136x640 px</td> </tr> <tr> <td class="Device iPhone4">iPhone 4/4S</td> <td>640x960 px</td> <td>960x640 px</td> </tr> <tr> <td class="Device iPhone3 Subliner">iPhone & iPod Touch <span>1st, 2nd and 3rd Generation</span></td> <td>320x480 px</td> <td>480x320 px</td> </tr> <tr> <td class="Device iPad Subliner">Retina iPad <span>iPad 3, iPad 4</span></td> <td>1536x2048 px</td> <td>2048x1536 px</td> </tr> <tr> <td class="Device iPad">iPad Mini</td> <td>768x1024 px</td> <td>1024x768 px</td> </tr> <tr> <td class="Device iPad Subliner">iPad <span>1st and 2nd Generation</span></td> <td>768x1024 px</td> <td>1024x768 px</td> </tr> </tbody> </table> <h2 class="TableHeading">Displays</h2> <table class="responsivetable"> <the 2013-07-30T11:45:23+09:00 1375152323 https://w.atwiki.jp/oboegaki1002/pages/41.html <h2>レスポンシブwebデザインについて</h2> <h3><span>Media Queriesを利用する</span></h3> <ul><li>CSS3「Media Queries」ex.スクリーンサイズ、デバイスの解像度に応じて、CSSを使い分ける。</li> <li>今まではMedia Type→ media="screen"や media="print" の拡張として利用されている。</li> <li>但しユーザーエージェントによって振り分け（.htaccess や Javascriptを使って）するわけではない。</li> <li>ブラウザサイズによって相対的に幅が可変するリキッドレイアウトで構築。<br /> コンテナなどのボックス、マージンやパディング、画像の幅、ポジションの値など、基本的には %で指定して可変する必要あり<br /> ※可変にしないとボックスからはみ出してしまう。</li> </ul><h3><span>Media Queriesの書き方</span></h3> <ul><li>【link要素のmedia属性】<br /></li> <li>【@import】<br /> @import url("tablet.css") screen and (min-width:480px) and (max-width: 768px)</li> <li style="list-style:none;">ウインドウサイズが480px?768pxの場合にtablet.cssを読み込む</li> <li>【@media】<br /> @media screen and (min-width:480px) and (max-width: 768px){/* style */}</li> </ul><h3><span>スマートフォン対策</span></h3> <ul><li>viewportの設定がかけられている ex.iPhoneのviewportのデフォルト値は980px<br /> 以下の記述で等倍表示に設定しなおす<br /></li> <li>viewportの設定変更でiPhone などのスマートフォンの width をコントロールできる（しないと擬似的な横幅になってしまう）</li> <li>縦表示から横にすると拡大されて表示され 2012-07-04T10:56:04+09:00 1341366964 https://w.atwiki.jp/oboegaki1002/pages/40.html <h3><span>テキストを維持したままタグ変更</span></h3> <div class="box"> <pre> 置換対象：&lt;td width="300"&gt;&lt;font size="2"&gt;テキスト&lt;/font&gt;&lt;/td&gt; 置換後：&lt;th scope="row"&gt;テキスト&lt;/th&gt; <strong>検索パターン：&lt;td width="300"&gt;&lt;font size="2"&gt;(.+)&lt;/font&gt;&lt;/td&gt; 置換パターン：&lt;th scope="row"&gt;$1&lt;/th&gt;</strong> </pre></div> <ul><li>() → ()内の正規表現パターンを記憶する</li> <li>. → 改行以外のすべての単一文字</li> <li>+ → 直前の文字の1回以上の繰り返し。*も可</li> </ul><p>検索対象によっては、.を以下に変更したほうが良い場合もある。※複数同時に使う場合は大カッコ[]で挟む。</p> <ul><li>¥w → 下線を含む、英数字1つ。[A-Za-z0-9_] と同じ</li> <li>¥d → 数字1文字。[0-9] と同じ</li> <li>¥W → 非英数字の1つ。[^A-Za-z0-9_] と同じ</li> <li>¥s → スペース、タブ、用紙送り、改行を含むホワイトスペース1つ</li> </ul><h3><span>属性の中の値のみまとめて変更</span></h3> <div class="box"> <pre> 置換対象：&lt;td width="397"&gt;テキスト&lt;/td&gt; 置換後： &lt;td width="300"&gt;テキスト&lt;/td&gt; <strong>検索パターン：img width="\d+" 置換パターン：img width="300"</strong> </pre></div> <h3><span>属性に単語を追加</span></h3> <div class="box"> <pre> 置換対象：&lt;span class="hoge"&gt;テキスト&lt;/span&gt; 置換後：&lt;span c 2012-04-30T23:04:33+09:00 1335794673 https://w.atwiki.jp/oboegaki1002/pages/39.html <h3><span>よく使われる文字実体参照</span></h3> <table border="1" cellpadding="5" cellspacing="0"><tr><th colspan="2">文字実体参照</th> <th colspan="2">数値文字参照</th> <th>説明</th> </tr><tr><td>&lt;</td> <td>&amp;lt;</td> <td>&lt;</td> <td>&amp;#60;</td> <td>小なり</td> </tr><tr><td>&gt;</td> <td>&amp;gt;</td> <td>&gt;</td> <td>&amp;#62;</td> <td>大なり</td> </tr><tr><td>&amp;</td> <td>&amp;amp;</td> <td>&amp;</td> <td>&amp;#38;</td> <td>アンパサンド</td> </tr><tr><td>"</td> <td>&amp;quot;</td> <td>"</td> <td>&amp;#34;</td> <td>二重引用符</td> </tr><tr><td> </td> <td>&amp;nbsp;</td> <td> </td> <td>&amp;#160;</td> <td>スペース ( 改行禁止スペース )</td> </tr><tr><td>©</td> <td>&amp;copy;</td> <td>©</td> <td>&amp;#169;</td> <td>著作権</td> </tr><tr><td>®</td> <td>&amp;reg;</td> <td>®</td> <td>&amp;#174;</td> <td>登録商標</td> </tr></table><h3 id="characterEntitySet"><span>文字実体参照一覧表</span></h3> <table border="1" cellpadding="5" cellspacing="0" id="special"><caption>マークアップ記号、国際化文字<br /> ( Special Character Entity Set )</caption> <tr><th colspan="2 2012-09-11T11:38:28+09:00 1347331108 https://w.atwiki.jp/oboegaki1002/pages/38.html <h3><span>ポップで楽しいイメージの配色</span></h3> <ul class="color"><li><span class="p1" style="background:#d06da2;">D06DA2</span><span class="p1" style="background:#65b7ec;">65B7EC</span><span class="p2" style="background:#fff000;">FFF000</span></li> <li><span class="p1" style="background:#9560a0;">9560A0</span><span class="p1" style="background:#b4cc31;">B4CC31</span><span class="p2" style="background:#d06d8c;">D06D8C</span></li> <li><span class="p1" style="background:#f1cf00;">F1CF00</span><span class="p1" style="background:#c7337f;">C7337F</span><span class="p2" style="background:#6bb6bb;">6BB6BB</span></li> <li><span class="p1" style="background:#d16c15;">D16C15</span><span class="p1" style="background:#0080c8;">0080C8</span><span class="p2" style="background:#dbdf1a;">DBDF1A</span></li> <li><span class="p1" style="background:#f8e100;">F8E100</span><span class="p1" style="background:#924c94;">924C94</span><span class="p2" style="background:#65ace3;">65ACE3</span></li> </ul><h3 style="clear:bo 2012-03-09T15:56:05+09:00 1331276165 https://w.atwiki.jp/oboegaki1002/pages/34.html <p>プロパティの順序について（推奨）</p> <div class="box"> <ol><li>display</li> <li>visibility</li> <li>overflow</li> <li>clip</li> <li>position</li> <li>top/right/bottom/left</li> <li>float</li> <li>clear</li> <li>z-index</li> <li>width（min-width/max-width）</li> <li>height（min-height/max-height ）</li> <li>margin（margin-top/margin-right/margin-bottom/margin-left）</li> <li>padding（padding-top/padding-right/padding-bottom/padding-left）</li> <li>border（border-width/border-color/border-style）</li> <li>list-style（list-style-type/list-style-image/list-style-position）</li> <li>color</li> <li> background（background-color/background-image/background-repeat/background-attachment/background-position）</li> <li>font（font-family/font-style/font-variant/font-weight/font-size）</li> <li>line-height</li> <li>vertical-align</li> <li>text-indent</li> <li>text-align</li> <li>text-decoration</li> <li>letter-spacing</li> <li>word-spacing</li> <li>white-space</li> </ol></div> 2012-02-23T09:51:14+09:00 1329958274 https://w.atwiki.jp/oboegaki1002/pages/33.html <h2>CSS3実用的コードまとめ</h2> <h3><span>カラムレイアウト「display:box」</span></h3> <p>すべてのボックスの高さを揃えるということがとても容易にできるようになりました。<br /> CSS3 のボックス要素で 3 カラムレイアウトを作るのに必要なのは、極端に言えば "display: box; と指定するだけ" です。<br /> そうすると、中に内包されている div※が勝手に横並びになり、かつ一番長い div に追従して（つまり "display: box;" と指定した親要素の高さに追従して）高さが揃います。<br /> ※正確にはブロック要素に対して、です。なので、div でなくても p でも同様の結果になります。</p> <h4>ボックスの表示順序を制御する「box-ordinal-group」</h4> <p>box-ordinal-group:1;と指定すれば、ボックス要素内でどこに書かれていても一番左側に表示されます。</p> <h3><span>段組み「column-count」</span></h3> <p>従来の段組はfloatやpositionを利用して行っていましたが、このプロパティが導入されると、段組レイアウトがぐっと楽になります。</p> <div class="box"> <pre> column-count: 3[段数]; column-width: 200px[幅]; column-gap: 50px[段組の間隔]; column-rule: 5px[段組間のボーダーサイズ] dotted[段組間のボーダースタイル] #333[段組間のボーダー色]; </pre></div> <h3><span>角丸やグラデーションを組み合わせたボタン</span></h3> <ul><li>CSSで押し心地のいいボタン　<a href="http://jsdo.it/grfxdsgn/nCa2">http://jsdo.it/grfxdsgn/nCa2</a></li> <li>CSS Only Download Button　<a href="http://jsdo.it/tetsuwo/bK1Q">http://jsdo.it/tetsuwo/bK1Q</a></li> </ul><div 2012-03-04T18:56:08+09:00 1330854968 https://w.atwiki.jp/oboegaki1002/pages/32.html <h2>HTML5で使い方が変更されたタグのまとめ</h2> <h2>●<span style="color:rgb(0,102,204);"><strong>a要素</strong></span></h2> <p>リンク設定をするaタグですがアンカーリンクの使い方と別ウインドウにリンクを設定するtarget属性の使い方が一部変更になっています。<br /> またリンクの設定する範囲がいままではdivタグやpタグなどのブロックレベル要素や複数のタグを囲ったりすることができませんでしたが、HTML5からはできるようになりました。</p> <h3><span>アンカーリンクとしての使い方が変わりました</span></h3> <p> xhtml1.0でアンカーリンクを設定する場合は移動したい場所にa要素のname属性とid属性をセットし、別のa要素のhref属性でそれを参照していました。<br /> HTML5ではページのアンカーを表すためだけにa要素を使うことはできなくなり、name属性も廃止になりました。<br /> HTML5でアンカーを表す場合は、要素に関わらすid属性を指定することでアンカーを機能させることができるようになります。</p> <p><span style="font-size:8pt;">HTML5ではアンカー設定の際に ＜a id="top"＞ と記述しなくても可能となります</span></p> <h3><span>target属性が非推奨ではなくなりました</span></h3> <p> リンクを別ウインドウで表示させる際によく使用していたtarget=_blankですが、実際は今でも使われておりましたが、strictでは非推奨となっており、非推奨タグを使いたくないという場合には別ウインドウで表示させたいときはJavascriptで別ウインドウでリンクを開く対応などをしておりましたが、HTML5ではtarget属性が非推奨ではなくなりました。</p> <p><span style="font-size:8pt;">別ウインドウでリンクを開く際のtarget="_blank"が非推奨ではなくなりました</span></p> <h3><span>div要素や複数のタグをまとめてa要素で囲むことができます</span></h3> <p>これがH 2011-12-02T20:15:40+09:00 1322824540 https://w.atwiki.jp/oboegaki1002/pages/30.html <h3><span>jQueryのプラグイン33+1選</span></h3> <p><a href="http://coliss.com/articles/build-websites/operation/javascript/jquery-plugins-best-2011-aug.html"> http://coliss.com/articles/build-websites/operation/javascript/jquery-plugins-best-2011-aug.html</a></p> 2011-09-07T21:19:33+09:00 1315397973