Monthly Archives: July 2017

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で共有していただければ幸いです。