iPhon、iPad解像度一覧表 | ブレイクポイントなど
コードを書いている最中に、デバイス解像度についてちょっと気になるといつもGoogle検索するハメになるので、iPhone解像度をひとまとめにして覚書き。
ここまで古い機種はきっと必要ないですが。。
こうして見ると、最初のはめっちゃちっさいです。
レスポンシブデザインのブレイクポイントについて
いろいろためしてみつつ、いまのところ次のとおりに落ち着いているのですが、iPhoneの解像度が大きくなってタブレットのサイズが大小あるので、本当にこれで良いのかどうかサッパリわかりません。
// メディアクエリ用 変数
$w_sp: 375px; // スマホ
$w_tb: 768px; // タブレット
$w_pc: 1024px; // PC
@mixin sp { // スマホ
@media (min-width: ($w-sp)) {
@content;
}
}
@mixin tb { // タブレット
@media (min-width: ($w-tb)) {
@content;
}
}
@mixin pc { // パソコン
@media (min-width: ($w-pc)) {
@content;
}
}
mixinをまとめて[_mixin.scss]に書いて、それぞれの.scssで呼び出して使います。
※呼び出し時呪文↓
@include pc {
}
mixinを使うとメディアクエリのコードが見やすくなって良いです。
他にも、ボタンのような使いまわすスタイルや基本のカラーなどは同様に設定しておくと、あとで修正も簡単に行えます。
sass便利すぎる
拡張機能[Easy Sass]から[Live Sass Compiler]に乗り換えた話し | VSCode
ずっと前Sassを使うようになってからコンパイラーは、VSCodeの拡張機能「Easy Sass」を使っていました。
理由は簡単で、これしか知らなかったのと使い方も簡単だったから。
つい最近、そんな簡単コンパイラー「Easy Sass」よりも便利な拡張機能「Live Sass Compiler」を知ったので乗り換えたら、震えるほど快適になったという話。
乗り換えた理由は2つ
- ベンダープレフィックスの自動化（自動挿入）ができる
- ソースマップが作られるのでデバックが楽になる
これはかなり便利だと思う。
もっと早く知っていたら時間短縮できていたなー。
ベンダープレフィックスについて調べ始めると、あっという間に何時間も過ぎてしまうし、そもそもいまだによく分かっていないという。
ソースマップとは、例えばChromeデベロッパーツールを開いたときにあるスタイルについてcssではなく元のscssファイルの何行目のコードなのかを表示してくれるようになるもので、作業が大変便利になる。
どちらも「Easy Sass」には無い機能だったので（多分）乗り換えして大正解です。
「Live Sass Compiler」の設定
わたしはファイル構造は次のように分割して作っているのですが、デフォルトのままだとscssと同じ階層にコンパイルされてしまうので、コンパイル先のフォルダ指定を設定するのと、コンパイルしないフォルダの指定もします。
といってもめちゃ簡単で、例によって「settings.json」を開いてコードを追記するだけです。
インストール及びオプション設定の手順は次のとおり。
- 表示＞拡張機能からのインストール、有効化
- Live Sass Compilerの歯車：管理＞拡張機能の設定＞"settings.jsonで編集"をクリックしてユーザー設定の「settings.json」を開く
- 以下のコードを追記する
"liveSassCompile.settings.formats": [ //Sassの出力内容の設定
{
"format": "expanded", //nested、compact、compressedのどれかを選ぶ
"extensionName": ".css", //拡張子を.cssとして出力
"savePath": "/css" //出力先をcssフォルダの中にする
}
],
"liveSassCompile.settings.excludeList": [ //対象外とするフォルダを指定
"**/node_modules/**",
".vscode/**",
".history/**"
],
"liveSassCompile.settings.autoprefix": [ //ベンダープレフィックスの指定
"last 2 versions",
"ie >= 11",
"Android >= 4",
"ios_saf >= 8"
]
「Live Sass Compiler」の使い方
インストールすると、VSCode画面右下あたりに「Watch Sass」のボタンが現れるので、それをクリックするだけ。
試しに、style.sessに入力して [ctrl]+[C] で保存した後、次のようにstyle.cssが出来ているのを確認すると・・・
「おーーー！！」って声が出ます。
そしてブラウザで表示確認の上、「F12」キーでデベロッパーツールを開いて任意のスタイルを確認すると、style.scssではなく元のscssファイルの行数が表示されているはずです。
以上です。
最後まで読んでくださって、ありがとうございます。
htmlで閉じタグの後ろへコメントを自動挿入する設定 | VSCode
閉じタグコメントをわざわざ入力していたのですが、今頃になって自動でできるって知ったので設定してみたら、泣けるほど快適になったので覚書き。
※閉じタグコメントとは ↓ こんな感じ
</div><!-- /.inner -->
</section><!-- /#contact -->
ユーザー設定の変更
ファイル＞ユーザー設定＞設定からの「settings.json」を開く
※よく忘れる「settings.json」の開き方↓
「settings.json」に次のコードを追記する
"emmet.syntaxProfiles": {
"html": {
"filters": "html,c"
},
},
"emmet.preferences": {
"filter.commentAfter": ""
},
emmetサイコー♪
以上です。
Notonの有効期限が切れそうだったので初めて継続した話し
Nortonの有効期限が近づいてきたので手続きをしました。
毎回ほぼ同じ作業をしているで恒例行事となりつつあるのですが、いつもは契約延長ではなく、期限が切れたら安いところを探して新規購入していました。
ですが、今回はちょっと様子が違ったので、来年また同じことがあるかもしれないしないかもしれないけど一応覚書きです。
継続したほうがお得だった（初）
そもそも10年以上Nortonを使っています。購入先はその都度違っていて、比べてみて最もお得になるところで買っていました。期限も1年、3年とその時によってバラバラ。
ちなみに、今回の期限切れまでは旧製品の「Nortonセキュリティプレミアム・3台まで・3年版」を使っていて、その期限切れ1か月ほど前にさしかかると次のようなお知らせ窓が開くようになりました。
有効期限とキャンペーン価格のお知らせでした。
クリックしてみると、おもしろいことが書いてあります。
- 現状のまま製品を延長すると、2,728円/1年
- 最新の製品へアップグレードすると、2,728円/1年
- おすすめは最新製品+サービス付で、3,806円/1年
このお得な3種類から選べますという内容。
キャンペーン価格になっているのはどれも1年版のみで、3年版・5年版は通常価格。
にしても、価格が安すぎてちょっと疑ってしまうレベルだったので、Notonお問い合わせセンターへチャットでその内容について聞いてみたところ、ノートン製品購入者で最初の更新を迎えた人向けのキャンペーン価格なのだそう。
新規購入したとしても、1年版に限っては今回はコレがどこよりも安くて内容もお得だったのでNoton公式サイトから購入するすることにしました。
今回は（初）継続扱いになるので、余っている有効期限と統合は自動的に行われたうえ、「自動延長サービス」というものに強制加入になっていました。
といってもこの「自動延長サービス」はいつでも（購入直後でも）停止OKという、たいした強制力もなさそうなのですが、自動という以外にも特典があって、「サイバーセキュリティ保障」というものが無料で付帯するのです。
<
3デバイス以上にインストール可能なノートン製品をご利用のお客 様へお知らせ！>
対象製品の自動延長サービスご利用特典として、サイバーセキュリティ補償が無料で付帯いたします。
① クレジットカードの不正使用を年間最高100万円まで補償
② PCがウイルス等に感染した場合、PCの復旧補償として年間3万円まで補償
③ テレワーク中、PCが外部から不正アクセス等を受け勤務先に損害を与えた場合、 損害賠償金を50万円まで補償
保険について詳しくは保険詳細ページをご覧ください。
自動延長サービスご利用者様だけの特典ですので、ぜひ自動延長サービスを継続ご利用ください。
どうするのかは個人の自由ですが、わたしは一年後の更新まではとりあえずそのまま「自動延長サービス」を有効にしておくことに。
おわりに
今回は新規購入するのではく、旧製品の「Nortonセキュリティプレミアム」から継続して「Norton360プレミアムⅠ・5台まで・1年版・25GB」にお得にアップグレードすることができたという話しでした。
来年の更新のときはきっとこのようなサービスは受けられないと思うのですが、ノートンさんがまた新たなサービスをしていることを期待しつつ、またそのときが来たらに考えようと思います。コレが何かの役に立てば良いかな。
最後まで読んでくださって、ありがとうございます。
便利なChrome拡張機能を厳選して3本勝手におすすめしたい②
メインで使用する検索エンジンは Google Chrome です。
そして便利で、もはやなくてはならないのは 拡張機能（アドオン）ですよ。
以前に ”表” にその話しを書きました。
今回は、主にプログラミングの勉強中なら特に便利な拡張機能について、勝手におすすめしたいという話し。
「What Font」
わたしはフォントが好きです。
今までで特に美しいなーと思ったのは、広島アンデルセンの「ANDERSEN」の文字です。
これはフォントというよりはロゴタイプですね。
しかし、あれほど美しい文字はちょっとないなーと思うんです。
つまりそれくらいフォントが好きです。
なので気になるフォントを見つけると、直ぐに調べてみたくなります。
このプラグインは、フォントのスタイルやサイズpx値、line-heightの数値までワンクリックで調べられるのでお手軽だし、CSSを書くときなどとても便利です。
何より使い勝手がシンプルなところが良いです。
「Page Ruler Redux」
Webページの画像や余白の大きさなどを調べるのに使っています。
html/cssの勉強がある程度終わって美しいWebサイトを模写するときに、これを知ってからはよく使いました。今でも使っています。
これを使うとWebページで表示されるパーツの大きさや余白が簡単に分かるのでとても便利です。
ちなみに模写は有名なプログラミング系ブロガーさんたちがお勧めされているように、とても勉強になります。何より達成感が心地良い。
「Web Maker」
ドットインストールや書籍で勉強中に出てきたコードと違うやり方を試してみたり、何度も理解を深めたりするのに使っていました。
現在はソースコード再利用目的で、Markdownメモアプリの「Boost Note」と併せて使っています。
本番は普通にテキストエディタでhtmlやcssやjsファイルをつくってコードを書き、ブラウザで確認して修正したりするのですが、ちょっと違うデザインを軽くためしてみたいなど思いついたときに、ちゃちゃっと使ったりもします。
Web Makerを立ち上げると、HTMLとCSSとJSとプレビューの窓がすべて並んで表示されているので、プレビューでどのように表示されるコードなのかをひとつひとつ確認しながら入力ができるので気に入っています。
作ったファイルはダウンロードすることができるので、「Code Pen」へ移行することもできます。そうすると例えば、作ったファイルをはてなブログなどに貼りつけたりすることもできます。（最初から「Code Pen」でも良いです）
まとめ
今回はプログラミングの勉強中に便利で楽しくなる拡張機能、厳選3本です。
模写で便利な
1. What Font
2. Page Ruler Redux
ソースコードの確認に便利な
3. Web Maker
ついでに、併せて使いたいソフトは次の通り
★「Boost Note」
★「Code Pen」
最後まで読んでくださって、ありがとうございます。
きになること
気になること・モヤる件について、後日解決できたとき改めてまとめるために、今はわからないままでも書き留めておくことにしました。
- HTMLメールのリンクをタップすると、そのページがアプリが立ち上がって表示されることもあれば、サファリで表示されることもある謎
- HTMLメールがスマホ表示だと文字がめっちゃちっさくて読みづらいときがある謎
- スマホを縦横傾けたら、文字が大きくなったり小さくなったりして気持ち悪くなる謎
- スマホでピンチできないサイトがある謎
HTMLメールのリンクをタップすると、そのページがアプリが立ち上がって表示されることもあれば、サファリで表示されることもある謎
気が付いたのは、iPhoneで、note、cakes、はてなブログからのお知らせメールにあるリンクをタップすると全てサファリが立ち上がってページが表示される。
ちなみに3つともアプリは入れてあるのに。
自分としてはアプリで表示してもらいたい。（ログインとかメンドクサイ問題）
対して、ツイッターは必ずアプリが立ち上がり、そのページがきちんと開く。
やはりこちらのほうが便利なような気がする。
なんでなん？？( 'ω')?？
HTMLメールがスマホ表示だと文字がめっちゃちっさくて読みづらいときがある謎
これはもしかしたら、送り主側がHTMLメールをレスポンシブデザインにしてないからかもしれない。
HTMLメールの仕組みがよくわかっていないからなんともいえない。
スマホを縦横傾けたら、文字が大きくなったり小さくなったりして気持ち悪くなる謎
これはもしかしたら、やはりレスポンシブデザインでCSS設定してないからかもしれない。-webkit-text-size-adjust:とか。
個人的には、縦にしようが横にしようが文字の大きさは変えない方が読み手が読みやすいような気がする。
特に、寝ころんでスマホを見ているとき、急に縦横ひっくり返って読んでいた場所からずーっと違う行が表示されてイラっとする。
回転するのをロックすれば良いことなんだろうけど、普通にスマホを使うときはロックしていないほうが断然使いやすいので、常にロックはかけていないし。（ワガママネ）
スマホでピンチできないサイトがある謎
拡大したいのに固定されたままでできない。
これも多分、レスポンシブデザインで設定できることだとほぼほぼ分かっている。
どうも犯人は、ビューポートの書き方らしい。
老眼にはツライ。個人的にはピンチできなくする意味がわからん。
今のところこれくらいかな。
はてなブログのカスタマイズについて｜CSSやらソースコードやら覚書き
以下はカスタマイズした箇所の覚書き。
①見出しのデザイン
拡張機能＝h2
大見出し＝h3
中見出し＝h4
小見出し＝h5
標準＝p
※拡張機能の製作者さんのURL↓
②文字装飾
蛍光マーカー
※デフォルトでは文字装飾機能のボタンに「アンダーライン」はあっても「マーカー」は無いので、使う頻度が少ない「斜体」に割り当てた
※編集見たままモードでは変化が無いので、文字装飾を斜体+太字にするか、プレビューで都度確認する
設定 > 詳細設定 > headに要素を追加
<style type="text/css">
/* 斜体表示を蛍光マーカー（緑）にする */
article em{
font-weight:bold;
font-style: normal;
margin:0 0.1em;
padding:0.1em 0.2em;
background:#cbe874 !important;
background:linear-gradient(to bottom, transparent 60%, #cbe874 60%) !important;
}
/* iタグは斜体*/
article i{
font-style:oblique !important;
}
</style>
③目次
デザイン > カスタマイズ > デザインCSS
/*目次のカスタマイズ*/
.table-of-contents:before{
content: "目次";
font-size: 100%;
font-weight: bold;
}
.table-of-contents li,
.table-of-contents ul{
list-style-type: square;
}
ul.table-of-contents {
font-size: 90%;
background: #F3F5F6; /*背景色*/
padding: 10px 10px 10px 25px;
margin: 0;
}
.table-of-contents a:link{
color:#1464b3; /*未訪問リンク色*/
text-decoration: none;
}
.table-of-contents a:visited{
color: #333; /*訪問済みリンク色*/
}
.table-of-contents a:hover{ /*マウスホバー時*/
text-decoration:underline; /*下線をつける*/
}
④吹き出し
拡張機能＞「l-fuki クラス名」： l-fuki tsuno
拡張機能＞「r-fuki クラス名」： r-fuki tetsu
※拡張機能を利用して作れる（↓製作者さんのURL）
⑤ソースコードの表示
【一行ソースコード】
color: red;
HTML編集画面でcodeタグで囲む
<code style="background: #efefef; color: #333; padding: 0 5px; border: 1px solid #eee;">ここにコードを書く</code>
【複数行ソースコード】
p {
color: red;
}HTML編集画面でpreタグとcodeタグのセットタグで囲む
<pre style="background: #eee; padding: 30px; border: 1px solid #eee;"><code>ここにコードを書く</code></pre>
※または、拡張機能＞背景色をグレーにする
