Yearly Archives: 2017

New!

HTML5: area-hidden プロパティについて

aria-hidden プロパティ とは、WAI-ARIA の仕様で定義されている、テキスト読み上げの有無を設定する値です。 主にアイコンフォントのタグに指定するケースがほとんどだと思いますが、今回はこの area-hidden プロパティ についてのメモしておきます。 目次 area-hidden プロパティについて area-hidden プロパティについて 今回説明に使用する CSS フレームワークは Bootstrap、アイコンは自家製アイコンフォントの MellowGlyph を例にとって説明したいと思います。 装飾アイコンの場合 機能に関係なく、単なる装飾であるアイコンの場合、aria-hidden=”true” を設定することで、スクリーンリーダーに対して存在しないものと認識させることができる。 表意アイコンの場合 アイコンの意匠そのものに機能的な意味が含まれる場合、aria-hidden=”true” を設定したうえで、代替テキスト を span class=”sr-only” に記述し、スクリーンリーダーに認識させます。 インタラクションアイコンの場合 アイコン自体がリンクになっていて、タッチやマウス等の入力デバイスによるインタラクションが発生する場合、aria-hidden=”true” と title プロパティ 設定したうえで、代替テキスト を span class=”sr-only” に記述し、スクリーンリーダーに認識させます。 まとめ アイコンのアクセシビリティを解決する方法として、タグを使用せずに ::before, ::after といった擬似要素で指定する方法があります。 ただし、この方法をとる場合は、定義された名前空間による直感的なコーディングが困難なため、タグで直接記述し、area-hidden プロパティ を適切に指定する方法が簡単かつ便利かと思います。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。
Update!

CSS3: 擬似クラス not で複数要素を指定する

今回は CSS でスタイルを効かせたくない要素が指定できる擬似クラス、not を複数指定する方法をメモしておきます。 目次 擬似クラス not で複数要素を指定する まとめ 擬似クラス not で複数要素を指定する 下記 HTML で、box1, box3 クラスに対してフォントカラー赤の指定を除外します。 HTML CSS まとめ 参考までに、擬似要素、擬似クラスの違いもメモしておきます。 ::before, ::after, ::first-letter, ::first-line, ::selection は要素の一部に影響を与えるため、擬似要素となります。 それ以外の :link, :visited, :hover, :active, :first-child… は要素全体に影響を与えるため、擬似クラスとなります。 擬似要素はコロン2つ、擬似クラスはコロン1つから始まるので、記述を間違えないようにしましょう。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

CSS3: 最新 Bootstrap 対応 iOS メディアクエリのテンプレート

Bootstrap のグリッドシステムを利用し、iOS 各デバイスに対応した SCSS メディアクエリを作成しました。 現時点での最新 iOS デバイスである iPad Pro 10.5 にも対応しています。 スタイルコーディング時のテンプレートとしてご活用ください。 目次 Bootstrap 対応 iOS メディアクエリ(SCSS) まとめ Bootstrap 対応 iOS メディアクエリ (SCSS) 冒頭のコメントに Bootstrap と既存 iOS デバイスのサイズを明記しておきました。 デバイスの向きは Portrait ベースで作成しており、ネストされた orientation のコメントを解除しなければ、単体で CSS としても利用可能です。 まとめ モバイルファーストから更に iOS に完全対応し、Android と PC は Bootstrap で吸収する方針で記述すると、以上のようになるかと思います。 スクリーン解像度の種類がこれ以上増えなければいいのですが、次の iPhone でまた一つ増えることになりそうです。。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

CSS: 擬似クラス before, after の解除方法

link, visited, active, hover 等、CSS 擬似クラスは多数存在します。 チームで制作を行っていると、フレームワークやベースのコードに、clearfix や装飾等の before, after 要素がコーディングされていて、不都合なときがあります。 今回は、before, after 擬似クラスを、拡張し解除する方法をメモしておきます。 目次 before, after の解除方法 まとめ before, after の解除方法 someclass の before 要素をカスケードで拡張し、解除(打ち消し)したい場合は以下のように記述します。 まとめ

Mac: Visual Studio Code の基本ショートカット一覧

現在 Visual Studio Code と Atom を併用しています。どちらも一長一短ありますが、後発の Visual Studio Code の方が、機能がシンプルにまとまっていて、使い勝手がいいように感じます。 今回はそんな Visual Studio Code の、よく使いそうな基本ショートカット一覧をメモしておきます。 目次 Visual Studio Code の基本ショートカット一覧 まとめ Visual Studio Code の基本ショートカット一覧 コマンド ショートカット コマンドパレット開く ⌘ + Shift + P サイドバー開閉 ⌘ + B 画面分割 ⌘ + \ 画面閉じる ⌘ + W 画面切り替え ⌘ + 数字キー 検索 ⌘ + F 置換 ⌘ + Shift + F 次を検索 ⌘ + G 前を検索 ⌘ + Shift + G インデント追加 Option + ] インデント削除 Option + [ カーソル行・上移動 Option + ↑ カーソル行・下移動 Option + ↓ カーソル行・上コピー Option + Shift + ↑ カーソル行・下コピー Option + Shift + ↓ Emmet Emmetコマンド + Tab Beautify Option + Shift + F マルチカーソル追加 Option + クリック マルチカーソル上追加 マウスで範囲選択後 ⌘ + Option + ↑ マルチカーソル下追加 マウスで範囲選択後 ⌘ + Option + ↓ ファイルの先頭に移動 Option + ↑ ファイルの末尾に移動 Option + ↓ ズームイン ⌘ + Shift + = ズームアウト ⌘ + Shift + – 新しいファイル ⌘ + N 保存 ⌘ + S 名前を付けて保存 ⌘ + Shift + S 設定 ⌘ + , まとめ ノート・デスクトップPC の需要が減りつつある中、ここ最近の Microsoft の意欲的なチャレンジには好感が持てます。 Atom は決して悪いエディタではありませんが、もう少し様子をみて、Visual Studio Code への乗り換えも検討したいと思います。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

HTML: よく使う特殊文字のコード一覧

HTML 上で、比較的利用する機会がある特殊文字(記号)のコードをリスト化しました。 WordPress 等で、動的に処理される HTML コンテンツに必要となるときもありますので、お役立て下さい。 目次 よく使う特殊文字コード まとめ よく使う特殊文字コード リテラルは「&」+「〜」+「;」となり、大文字、小文字は区別されます。 一覧にはありませんが、&alpha ; の場合、ギリシャ小文字の 「α」、&Alpha ; ではギリシャ大文字の「Α」となります。 文字 表記 意味 " &quot; quotation mark & &amp; ampersand < &lt; less-than > &gt; greater-than   &nbsp; no-break space ¥ &yen; yen © &copy; copyright ® &reg; registered ± &plusmn; plus-minus · &middot; middle dot Ø &Oslash; O-slash ÷ &dvide; divide ø &oslash o-slash α &alpha; alpha β &beta; beta γ &gamma; gamma δ &delta; delta π &pi; pi σ &sigma; sigma φ &phi; phi ω &omega; omega … &hellip; horizontal ellipsis ™ &trade; trade mark ← &larr; leftwards arrow ↑ &uarr; upwards arrow → &rarr; rightwards arrow ↓ &darr; downwards arrow ∴ &there4; therefore ≠ &ne; not equal ≡ &equiv; equivalent まとめ これらの特殊文字の表記は、呪文のようなものもいくつかありますが、それらは全て英単語の短縮形となっています。 一見遠回りに思えますが、英語本来の意味から表記コードを覚えれば、すんなりと記憶に定着し暗記が可能です。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

Apple: iPad Pro 10.5 と iPad Pro 9.7 の違いについて

WWDC2017 での iPad Pro 10.5 の発表後、すぐに注文し、iPad Pro 9.7 から iPad Pro 10.5 へ買い替えました。 今回はディスコンとなった iPad Pro 9.7 ユーザーのために、iPad Pro 10.5 との違いと感想をメモしておきますので、買い換える必要があるかどうかの判断材料としてご活用ください。 目次 スペック比較表 所感 まとめ スペック比較表 スペックの比較表は以下の通りです。 iPad Pro 10.5 iPad Pro 9.7 発売日 2017年6月6日 2016年3月21日 OS iOS 10 iOS 9 CPU 64ビットアーキテクチャ A10X Fusion + 組込型 M10 コプロセッサ 64ビットアーキテクチャ A9X + 組込型 M9 コプロセッサ メモリ 4GB 2GB 容量 64GB、256GB、512GB 32GB、128GB、256GB ディスプレイ 10.5インチ(対角)LEDバックライトMulti-Touchディスプレイ 2,224 x 1,668ピクセル解像度 264ppi ProMotionテクノロジー 広色域ディスプレイ(P3) True Toneディスプレイ 耐指紋性撥油コーティング フルラミネーションディスプレイ 反射防止コーティング 9.7インチ(対角)LEDバックライトMulti-Touchディスプレイ 2,048 x 1,536ピクセル解像度 264ppi 広色域ディスプレイ(P3) True Toneディスプレイ 耐指紋性撥油コーティング フルラミネーションディスプレイ 反射防止コーティング リフレッシュレート 120Hz 60Hz Wi-Fi Wi-Fi(802.11a/b/g/n/ac)デュアルバンド(2.4GHz/5GHz)MIMO対応HT80 Wi-Fi(802.11a/b/g/n/ac)デュアルバンド(2.4GHz/5GHz)MIMO対応HT80 カメラ(フロント) 700万画素、HDビデオ撮影(1080p) 500万画素、HDビデオ撮影(720p) カメラ(バック) 1200万画素、4Kビデオ撮影 1200万画素、4Kビデオ撮影 センサー Touch ID、3軸ジャイロ、加速度センサー 気圧計、環境光センサー Touch ID、3軸ジャイロ、加速度センサー 気圧計、環境光センサー Bluetooth Bluetooth 4.2 Bluetooth 4.2 Touch ID 第2世代 第1世代 サイズ 250.6mm(縦)×174.1mm(横)×6.1mm(厚さ) 240mm(縦)×169.5mm(横)×6.1mm(厚さ) 重さ 469g(Wi-Fi)、477g(LTE) 437g(Wi-Fi)、444g(LTE) バッテリー 最大10時間 最大10時間 外部接続端子 USB3-Lightning USB2-Lightning カラー シルバー・ゴールド・スペースグレイ・ローズゴールド シルバー・ゴールド・スペースグレイ・ローズゴールド 所感 以下、主要な変更点についての所感をメモしておきます。 CPU CPU は 30%、 GPU は 40% 程度速くなってるそうですが、iPad Pro 9.7 と iPad Pro 10.5 で 違いはわかりません でした。どちらでもいいと思います。 メモリ メモリに関しては iPad Pro 9.7 の 2GB から iPad Pro 10.5 では 4GB へと倍になっています。現時点でその恩恵は感じられませんが、iOS11 でのマルチタスキング時に、違いが出てくると思います。 容量 256GB で十分 だと思いますが、大量のメディア、TV録画等をダウンロード保存し、ローカルで視聴したい方は 512GB あってもいいかと思います。 ディスプレイ 1インチに満たないサイズアップですが、それでも大きく感じます。12.9 インチは自分には大きすぎですが、10.5 インチは丁度いいサイズ だと実感しました。 リフレッシュレート Retina ディスプレイが発表された際、ここまでの解像度は必要ないだろうと思ったものの、慣れてしまうと戻れない体験であることはみなさんも経験済みだと思います。 今回のリフレッシュレートはそれと似た体験を与えてくれました。スクロール時の文字が、残像とならず「くっきり」しているため、目の疲れが明らかに軽減されています。 一見地味な変更であるリフレッシュレートのアップデートですが、はっきり言いますと これだけで買い換える意味は十分ある と思います。 Touch ID iPad Pro 9.7 の不満点の一つが Touch ID の反応の遅さでした。iPhone 6s 以降は Touch ID 2.0 となっているため、その違いが顕著に出てしまう結果となっていました。 ただ、iPad Pro 10.5 の Touch… 続きを読む

CSS3: Bootstrap4 グリッドレイアウトの概要メモ

Bootstrap はバージョンごとに時代に合わせ、グリッドレイアウト内部の仕様が変更されています。 今回は、Bootstrap のそのグリッドレイアウトについて、新しいバージョン 4 に対応したグリッドオプションのクラスをメモしておきます。 目次 グリッドオプション まとめ グリッドオプション Extra small (<576px) Small (≥576px) Medium (≥768px) Large(≥992px) Extra large(≥1200px) Grid behavior 常時水平レイアウト 折りたたまれた状態で開始、ブレークポイントで水平レイアウト .container の最大幅 None (auto) 540px 720px 960px 1140px プレフィックスクラス .col- .col-sm- .col-md- .col-lg- .col-xl- オフセットクラス .offset- .offset-sm- .offset-md- .offset-lg- .offset-xl- カラム(列)の分割数 12 レイアウトの間隔 30px (各セルの両端 15px 間隔) まとめ 今回、サンプルコードを掲載したかったのですが、サイト構造の問題で BS4 でのコーディングができませんでした。。 みなさんもこういったことのないように、定期的にコードを見直し、時代に合わせてアップデートしていきましょう。 近々 DB を含めたサイトの再構築を行いたいと思います。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

CSS3: Bootstrap4 グリッドの offset が効かない場合の対処

Bootstrap でのグリッドレイアウト時、空白部分が発生する場合に col-xx-offset-x を利用すると思いますが、バージョン4では反映されなくなっています。 offset の概念がなくなったわけではなく、バージョン4 よりクラス名が変更されているだけですので、メモしておきます。 目次 Bootstrap グリッド offset について まとめ Bootstrap グリッド offset について 以下のようにクラス名が変更されています。 Bootstrap3 例)sm, offset 4 の場合のサンプル Bootstrap4 例)sm, offset 4 の場合のサンプル まとめ Bootrstrap4 では他にも色々なクラス名が変更されています。 Bootstrap は CSS フレームワークとしてはデファクトスタンダードですので、既存コードの対応が必要な方は早めに修正してくことをお勧めします。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

Swift: guard と defer についての覚書

Swift2 より登場した guard と defer ですが、if 文に慣れすぎてなかなか使おうとせず、覚えられなかったので、勉強を兼ねてメモしておきます。 目次 guard defer guard defer サンプル まとめ guard 条件式が false の場合の処理を記述することができる。if の else 部分のみの構文。 defer スコープを抜け出す際に、実行される処理を定義できる。 guard defer サンプル ViewController.swift 実行結果 まとめ guard と defer のセットを適切に利用すれば、if 文よりモダンかつスマートに処理が記述できますね。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。