クリスマスのリア充爆破サイト 君はリア充を爆発できるか！？
じんぐるべーじんぐるべー♪
……とうとうこの時期が来たか
画面の前の紳士淑女の諸君、ごきげんよう
諸君らはクリスマスをいかがお過ごしかね？
何？ 恋人と過ごす？
HAHAHA、聞きたかったのはそんな回答では無いのだよ
そんな解を持つ諸君らは、少々今回の記事は楽しめないだろうね
もしこの記事を読んでいる君がクリスマスを一人で過ごすのなら、
ましてやクリスマスにキャッキャウフフするリア充にイラァとするのなら、
是非とも最後まで記事を読んで貰いたい
「今年もこの季節がやってきた……」
「恐らく俺以外にも多くの非リア充が怒りに震えるであろう12月の聖夜！」
「クリスマスに街を歩けばあっちもリア充、こっちもリア充、リア充リア充リア充……」
「クリスマスって本来そういう行事じゃねーから！ くっそうらやましい！」
「まってろリア充ども！ 俺は見事にお前らを爆発させてやる」
「そして俺は今年こそ晴れやかな気分でクリスマスを乗り切るんだ！」
「俺が考えた手段はこのサイト『Riajyuubakuhatu』！」
「何でも、リア充を爆発させるサイトなのだとか……なんて俺得」
「使い方は、まず名前を入力する」
「そしてスイッチを押してみるボタンを押すと……」
「リア充を爆破できたかどうかが診断されるのだ！」
「結果はTwitterなどのSNSでつぶやくことができる！」
「……とまあ、かなりお手軽だがリア充を爆発できなかったりもする」
↑爆発できなかった結果たち
「中にはサンタを追跡してみたり、下剋上してみたり、中二になったりとバリエーションは豊富だ」
「何？ どっかにこんな感じの無かったか、だって？ 気にするな」
「なお、このサイトはとあるブログの連中が制作したものらしいぞ」
「さあ俺と同じ想いを抱く同士よ！ 是非とも試してみてくれたまえ！」
サイトはこちらだ！
Riajyuubakuhatu 君はリア充を爆発できるか！？
WindowsとMacのショートカットキーについて！
この世界でパソコンを使っているみなさまへ！
普段使っているWindowsだと何気ない操作でも、Macだと操作方法が異なるので、
やり方がわからなくてハマるケースが結構あります。
今日はWindowsとMacのショートカットキーについてまとめてみみました。
「WindowsのCtrlキー＝MacのCommandキー」と考えてもらえれば、
同じキー操作でできることもたくさんあります。
ファイル・フォルダ操作
| 動作 | Mac | Windows |
|---|---|---|
| ファイルをクリップボードにコピー | command + C | 同じ |
| ファイルコピー（ファイル名の後ろに「コピー」がつく） | command + D | なし |
| クリップボードからファイルをペースト | command + V | 同じ |
| 情報（プロパティ）を見る | command + I | alt + enter |
| ファイルのエイリアスを作る | command + L | なし |
| フォルダの新規作成 | shift + command + N | なし |
| ゴミ箱に入れる | command + delete | delete |
| １つ上のフォルダに移動 | command + 上矢印キー | backspace |
| ファイルを開く／フォルダを開く | command + 下矢印キー | enter |
テキスト操作
| 動作 | Mac | Windows |
|---|---|---|
| すべてを選択 | command + A | 同じ |
| 選択したテキストをクリップボードにコピー | command + C | 同じ |
| クリップボードからテキストをペースト | command + V | 同じ |
| 選択したテキストをカット | command + X | 同じ |
| 前のコマンドの取り消し | command + Z | 同じ |
| 前のコマンドのやり直し | shift + command + Z | control + Y |
その他操作
| 動作 | Mac | Windows |
|---|---|---|
| オブジェクトを削除 | command + D | 同じ |
| 選択したオブジェクトのプロパティを開く | command + I | alt + enter |
| 日本語入力と英字入力を切り替える | command + Space | Alt + [半角/全角] |
| 全てのウインドウを閉じる | option + 閉じるボタン | Shift + 閉じるボタン |
| 前のコマンドの取り消し | command + Z | 同じ |
| 画面に表示されている映像を全面キャプチャ | command + Shift + 3 | Print Screen |
まだまだ、たくさんありますが。
今日はよく使われる部分だけ簡単にまとめてみました。
お役に立てれば幸いです～
スマホサイト制作のポイント！スマホ持ってない奴が真剣に考えてみたった
画面の前の皆様、ごきげんよう。私だ（誰だお前）
今回はスマホ持ってない奴が真剣にスマホサイト制作のポイントを考えたぜ。
さあ、選ばれし勇者達よ我と共に学ぼうではないか！
そのいち 実機で確認しましょう
スマートフォンとPCでは目からの距離などが違うので、
PCでしっかり見れても文字が小さすぎるなんてこともあります。
持ってない人は持ってる人に借りるなりなんなりしましょう。
そのに Retina Displayに対応すべし！
Retina Displayとは
「iPhone4から用いられるようになった高精細なディスプレイ」である。
画面サイズはiPhone3などと同じ3.5inchでありながら、4倍以上の解像度を実現している。
コントラスト比も従来比4倍で、より鮮明で深みのある色を表現できる。
あと周囲の明るさによってディスプレイの明るさを自動調節するとか、
通話で耳にあてた時に自動的にディスプレイをオフにするといったこともできたりします。
が、今ここではあまり関係ありませんね。閑話休題。
こいつに対応していない画像は、対応してる端末で見た時にぼやけて見えてしまいます。
なんということでしょう。
で、対応する方法ですが
- CSSの＠mediaに指定する
@media screen and (-webkit-min-device-pixel-ratio:1.5){
.classname{
background:url(hoge.png);
//2倍の画像を指定
-webkit-background-size:50px 50px;
//半分の大きさに縮める（半分に縮めることで大きさは変わらない）
}
}↑こんな風に記述するですよ
- デザインを640×960pxで制作する
4以降の解像度が2倍なので320×480pxの2倍である640×960pxでデザインしましょう
倍のサイズなので、文字サイズ、ロゴサイズ、アイコンサイズ、画像サイズ、マージンも倍です
なので2で割り切れる数にしましょう
↑コンテンツ（おもに画像）の実際の1pxをデバイス上では何pxで描画するのかを表した比率
- Retina.jsを使う
↑ただし全ての画像が指定される上にサーバに探しにくる
とはいったものの、
「Androidの画面サイズはすべて！？スマートフォン画面サイズ108個まとめ 」で紹介した通り
Androidの画面サイズは非常にまちまちなので気をつける必要があります。なんてこったい。
そのさん ボタンの最小サイズは44×44px
iOSヒューマンインターフェースガイドラインで、
タップ可能な要素には「約44×44pxのターゲット領域を割り当てる」としてるそうな。
まあ確かに指で操作する以上、小さいと押しにくいし、高さがないと誤押ししますよね。
そのご フォントサイズは14px～16px
小さいと可読性が悪い上に、iPhoneで11px以下にするとおかしなバグが起こる。
さらに言うとAndroidは7px以下のフォントは表示されないのである。
また長文の文章になっても読みやすいフォントサイズは14～16pxとされているので、
フォントサイズは14～16px以上を心がけましょう。
そのろく 色んなサイトを参考にしましょう
他にも横向き想定しようとか、フォントはヒラギノ角ゴで作ろうぜとか色々あるけれど、
色んなサイトを見て色んなデザインを見るにこしたことはないです。
様々なスマホサイトを見てデザインを学ぶことも大事ですよ。
下記にスマホサイトのデザインを集めたサイトの一部を掲載しました。参考にどうぞ。
「iPhoneサイトデザイン集のiPhoneデザインアーカイブ」
毎回デザインに悩む！見出しデザインについて改めて考えてみる。
h1～h6までの見出しのデザイン。経験のない間は色々と悩むことが多かったので、そのことを踏まえて、今回は見出しデザインについて考えて見たいと思います。
見出しとは
まず見出しとはなにか。
記事の内容が一目で分かるように付けられた題名。 後に続く内容を端的に表したものもあれば、読者の目を引くことだけを目的にした内容と関係の薄いものも存在する。 （見出しとは - はてなキーワードより引用）
このままでも分かりますが、さら簡単に言うとしたら、
この文書の内容にはこういうことが書いてありますよ！
一言で言うならば、◯◯です！
この、◯◯の部分が見出しになります。
そもそもなぜ見出しが必要なのか
ではなぜそもそも見出しが必要なのか。
見出しにはどのような効果があるのか考えてみた。
・目を引く ・内容が一目でわかる
見出しには大きくこの２つの効果があると考える。
そのサイトを見る人にとって見出しとは、その内容が
「すぐに、わかりやすく理解することができるモノ」
になる。
また、SEO的にも、より検索エンジンが見つけやすくなる為、わかりやすく、簡潔なキーワードを見出しとして付けることが好ましいでしょう。
見出しデザインの仕方
ここで、やっとデザインが出てくる。
見出しをわかりやすく簡潔にするためには、他の文章との差別化が必要になる。
差別化の方法をまとめてみた。
1.文字の大きさ。
その他の文章よりもサイズを大きくすることでユーザーの目を引き、見出しだとわかりやすく伝えるとができます。
2.文字の色
色が他と違えば、必然的に他の文書との差別化が図られ、そこに目線が行きます。
3.フォントを変える
フォントが違えば、文字の線の太さや細さが他の文字と比べた時に目立ちます。
4.サイト内で統一されたアイコンが入っている
統一されたアイコンが入っていれば、そこは他のところと同じく見出しであるということがユーザーに伝わり、インプットされたその情報は次に同じアイコンを見た時に、これは見出しであるということがすぐにわかります。
見出しの組み合わせ
上記で説明した４つを組み合わせることで色々な見出しができると思います。
いくつか例を挙げたいと思います。
1.文字の大きさとフォント
2.文字の大きさと色
3.文字の大きさとアイコン
4.色とフォント
5.色とアイコン
6.フォントとアイコン
応用
1.文字の色とアイコンとフォントを組み合わせてみる。
2.文字の大きさとフォントとアイコンを組み合わせてみる。
このように組み合わせることで色々な見出しができる事がわかります。
他にも色々な組み合わせや方法があると思います。
この記事についてのまとめ
この記事が見出しを作るときの参考や、見出デザインを学ぶ上でのちょっとした注目する点として意識してもらえれば幸いです。
オススメの見出し記事
見出しのデザインを調べたりするときには、このサイトがおすすめです。
CSSだけでできる見出しはこちらのサイトがおすすめです。
見出しデザインの参考にしたい CSSで作るhタグのサンプル集
CSS 見出し要素をシンプルなHTMLで美しくスタイルするテクニックのまとめ
見出しとSEOについての記事はこちらがおすすめです。
Andloidの画面サイズはすべて！？スマートフォン画面サイズ108個まとめ
全世界のみなさん、こんにちわんこ蕎麦（白目）
最近、画面がさらにデカくなったiPhone5、画面サイズが小さいiPad miniが出ましたね！
今回は復習も兼ねて今まで出たスマホの画面サイズをまとめてみました！
リストは新しい順で並んでいます！
ではどうぞ！
Androidの機種ごとの仕様一覧表
※一番上のは2013年に発売！
| 機種 | OS | 画面サイズ | 解像度 |
|---|---|---|---|
| AQUOS PHONE Xx 203SH | Android 4.1 | 4.9インチ | 720×1,280 |
| ARROWS A 201F | Android 4.1 | 4.7インチ | 720×1,280 |
| HONEY BEE 201K | Android 4.1 | 3.7インチ | 480×800 |
| ARROWS Kiss (F-03E) | Android 4.0 | 4.0インチ | 540×960 |
| Disney mobile on docomo(N-03E) | Android 4.0 | 4.7インチ | 720×1,280 |
| GALAXY S III α(SC-03E) | Android 4.1 | 4.8インチ | 720×1,280 |
| HTC J butterfly (HTL21) | Android 4.1 | 5.0インチ | 1,080×1,920 |
| PANTONE 6(200SH) | Android 4.0 | 4.5インチ | 720×1,280 |
| Ascend(HW-01E) | Android 4.0 | 4.5インチ | 720×1,280 |
| GALAXY Note II(SC-02E) | Android 4.1 | 5.5インチ | 720×1,280 |
| Xperia AX(SO-01E) | Android 4.0 | 4.3インチ | 720×1,280 |
| DIGNO S(KYL21) | Android 4.0 | 4.7インチ | 720×1,280 |
| AQUOS PHONE SERIE(SHL21) | Android 4.0 | 4.7インチ | 720×1,280 |
| ARROWS ef(FJL21) | Android 4.0 | 4.3インチ | 720×1,280 |
| G'zOne TYPE-L(CAL21) | Android 4.0 | 4.0インチ | 480×800 |
| GALAXY S III Progre(SCL21) | Android 4.0 | 4.8インチ | 720×1,280 |
| Optimus G(LGL21) | Android 4.0 | 4.7インチ | 720×1,280 |
| VEGA(PTL21) | Android 4.0 | 4.3インチ | 720×1,280 |
| Xperia VL(SOL21) | Android 4.0 | 4.3インチ | 720×1,280 |
| AQUOS PHONE ZETA SH-02E | Android 4.0 | 4.9インチ | 720×1,280 |
| ARROWS V(F-04E) | Android 4.0 | 4.7インチ | 720×1,280 |
| MEDIAS U(N-02E) | Android 4.0 | 4.0インチ | 480×800 |
| Optimus LIFE(L-02E) | Android 4.0 | 4.5インチ | 720×1,280 |
| RAZR M(201M) | Android 4.0 | 4.3インチ | 540×960 |
| Optimus G(L-01E) | Android 4.0 | 4.7インチ | 720×1,280 |
| STREAM(201HW) | Android 4.0 | 4.3インチ | 540×960 |
| AQUOS PHONE si(SH-01E) | Android 4.0 | 4.1インチ | 540×960 |
| MEDIAS TAB UL(N-08D) | Android 4.0 | 7.0インチ | 720×1,280 |
| AQUOS PHONE sv(SH-10D) | Android 4.0 | 4.5インチ | 720×1,280 |
| ARROWS Me(F-11D) | Android 4.0 | 3.7インチ | 480×800 |
| ELUGA power(P-07D) | Android 4.0 | 5.0インチ | 720×1,280 |
| Optimus Vu(L-06D) | Android 4.0 | 5.0インチ | 768×1,024 |
| らくらくスマートフォン(F-12D) | Android 4.0 | 4.0インチ | 480×800 |
| ARROWS A(101F) | Android 4.0 | 4.3インチ | 540×960 |
| REGZA Phone T-02D | Android 4.0 | 4.3インチ | 540×960 |
| AQUOS PHONE CL(IS17SH) | Android 4.0 | 4.2インチ | 540×960 |
| ARROWS X(F-10D) | Android 4.0 | 4.6インチ | 720×1,280 |
| ARROWS Z ISW13F | Android 4.0 | 4.6インチ | 720×1,280 |
| PANTONE 5(107SH) | Android 4.0 | 3.7インチ | 480×854 |
| MEDIAS X(N-07D) | Android 4.0 | 4.3インチ | 720×1,280 |
| AQUOS PHONE 102SH II | Android 4.0 | 4.5インチ | 720×1,280 |
| ELUGA V(P-06D) | Android 4.0 | 4.6インチ | 720×1,280 |
| AQUOS PHONE SL(IS15SH) | Android 4.0 | 3.7インチ | 540×960 |
| AQUOS PHONE Xx(106SH) | Android 4.0 | 4.7インチ | 720×1,280 |
| Optimus it(L-05D) | Android 4.0 | 4.0インチ | 480×800 |
| AQUOS PHONE SERIE(ISW16SH) | Android 4.0 | 4.6インチ | 720×1,280 |
| GALAXY S III(SC-06D) | Android 4.0 | 4.8インチ | 720×1,280 |
| F-09D ANTEPRIMA | Android 4.0 | 4.8インチ | 720×1,280 |
| DIGNO DUAL(WX04K) | Android 2.3 | 4.0インチ | 480×800 |
| GS03 | Android 4.0 | 4.3インチ | 540×960 |
| AQUOS PHONE st(SH-07D) | Android 4.0 | 3.4インチ | 480×854 |
| URBANO PROGRESSO | Android 4.0 | 4.0インチ | 480×800 |
| HTC J(ISW13HT) | Android 4.0 | 4.3インチ | 540×960 |
| GALAXY Note(SC-05D) | Android 4.0 | 5.3インチ | 800×1,280 |
| BlackBerry Bold 9900 | BlackBerry OS 7.1 | 2.8インチ | 480×640 |
| MEDIAS TAB(N-06D) | Android 2.3 | 7.0インチ | 800×1,280 |
| P-04D | Android 2.3 | 4.3インチ | 540×960 |
| 102P | Android 2.3 | 4.3インチ | 540×960 |
| AQUOS PHONE SH-06D | Android 4.0 | 4.5インチ | 720×1,280 |
| Disney Mobile on docomo P-05D | Android 2.3 | 4.3インチ | 540×960 |
| Xperia acro HD(SO-03D) | Android 2.3 | 4.3インチ | 720×1,280 |
| Xperia acro HD(IS12S) | Android 4.0 | 4.3インチ | 720×1,280 |
| DELL Streak Pro(101DL) | Android 2.3 | 4.3インチ | 540×960 |
| MEDIAS ES(N-05D) | Android 4.0 | 4.3インチ | 720×1,280 |
| MOTOROLA RAZR(IS12M) | Android 4.0 | 4.5インチ | 720×1,280 |
| AQUOS PHONE 104SH | Android 4.0 | 4.5インチ | 720×1,280 |
| Disney Mobile on docomo F-08D | Android 4.0 | 4.3インチ | 720×1,280 |
| Q-pot.Phone(SH-04D) | Android 2.3 | 3.7インチ | 540×960 |
| INFOBAR C01 | Android 2.3 | 3.2インチ | 480×854 |
| HONEY BEE(101K) | Android 2.3 | 3.5インチ | 480×800 |
| PRADA phone by LG(L-02D) | Android 4.0 | 4.3インチ | 480×800 |
| AQUOS PHONE 103SH | Android 2.3 | 4.0インチ | 540×960 |
| GALAXY S II WiMAX(ISW11SC) | Android 4.0 | 4.7インチ | 720×1,280 |
| MEDIAS CH(101N) | Android 2.3 | 4.0インチ | 480×800 |
| Optimus X(IS11LG) | Android 4.0 | 4.0インチ | 480×800 |
| LUMIX Phone 101P | Android 2.3 | 4.0インチ | 540×960 |
| ARROWS ES(IS12F) | Android 2.3 | 4.0インチ | 480×800 |
| AQUOS PHONE IS14SH | Android 2.3 | 3.7インチ | 540×960 |
| MEDIAS BR(IS11N) | Android 2.3 | 3.6インチ | 480×800 |
| STAR7(009Z) | Android 2.3 | 3.8インチ | 480×800 |
| AQUOS PHONE 102SH | Android 4.0 | 4.5インチ | 720×1,280 |
| GS02 | Android 2.3 | 4.0インチ | 480×854 |
| DIGNO(ISW11K) | Android 2.3 | 4.0インチ | 480×800 |
| AQUOS PHONE THE HYBRID 101SH | Android 2.3 | 3.4インチ | 480×854 |
| Sony Ericsson mini(S51SE) | Android 2.3 | 3.0インチ | 320×480 |
| Xperia PLAY(SO-01D) | Android 2.3 | 4.0インチ | 480×854 |
| htc EVO 3D(ISW12HT) | Android 4.0 | 4.3インチ | 480×854 |
| MOTOROLA PHOTON(ISW11M) | Android 2.3 | 4.3インチ | 540×960 |
| MIRACH(IS11PT) | Android 2.3 | 3.7インチ | 480×800 |
| smart bar(S42HW) | Android 2.3 | 3.0インチ | 480×800 |
| Vision(007HW) | Android 2.3 | 3.7インチ | 480×800 |
| REGZA Phone IS11T | Android 2.3 | 4.0インチ | 480×854 |
| AQUOS PHONE THE PREMIUM(009SH) | Android 2.3 | 4.0インチ | 540×960 |
| Windows Phone IS12T | Windows Phone 7.5 | 3.7インチ | 480×800 |
| シンプルスマートフォン(008Z) | Android 2.3 | 3.8インチ | 480×800 |
| Sweety(003P) | Android 2.3 | 4.3インチ | 480×854 |
| F-12C | Android 2.3 | 3.7インチ | 480×800 |
| Pocket WiFi S II(S41HW) | Android 2.3 | 3.2インチ | 480×800 |
| INFOBAR A01 | Android 2.3 | 3.7インチ | 540×960 |
| AQUOS PHONE THE HYBRID(007SH) | Android 2.3 | 3.4インチ | 480×854 |
| AQUOS PHONE(006SH) | Android 2.3 | 4.2インチ | 540×960 |
| GALAPAGOS 005SH | Android 2.3 | 3.8インチ | 480×800 |
| Pocket WiFi S(S31HW) | Android 2.2 | 2.8インチ | 240×320 |
| IDEOS | Android 2.2 | 2.8インチ | 240×320 |
| Libero(003Z) | Android 2.2 | 3.5インチ | 480×800 |
| GALAPAGOS 003SH | Android 2.3 | 3.8インチ | 480×800 |
| HTC Desire HD(001HT) | Android 2.3 | 4.3インチ | 480×800 |
iPhoneの機種ごとの仕様一覧表
| 機種 | OS | 画面サイズ | 解像度 |
|---|---|---|---|
| iPhone | iPhone OS 1.0 | 3.5インチ | 480×320 |
| iPhone 3G | iPhone OS 2.0 | 3.5インチ | 480×320 |
| iPhone 3GS | iPhone OS 3.0 | 3.5インチ | 480×320 |
| iPhone 4 | iOS 4 | 3.5インチ | 960×640 |
| iPhone 4S | iOS 5 | 3.5インチ | 960×640 |
| iPhone 5 | iOS 6 | 4.0インチ | 640×1,136 |
こんな感じになります。
サイト作り等でお役にたてれば幸いです＾＾
じゃあの
