Monthly Archives: January 2017

New!

CSS3: background ショートハンド(複数指定) background-size の記述方法

久しぶりに CSS を書いていると、ついつい忘れてしまうのが background のショートハンドです。 今回は background ショートハンドへ background-size を記述する方法をメモしておきます。 目次 background ショートハンド(複数指定) background-size の記述方法 まとめ background ショートハンド(複数指定) background-size の記述方法 以下、background でよく行うであろうプロパティを個別に記述した場合、ショートハンドで記述した場合のサンプルをそれぞれ用意しました。 background 個別指定 background ショートハンド(複数指定) ショートハンドでは /cover とすることで background-size: cover を指定することができます。 まとめ CSS の background ショートハンドは CSS2 では多様していましたが、CSS3 からは設定項目が大幅に増えたため、コードの見通しが悪くなってしまいがちです。 慣れないうちは、多少面倒でも個別にプロパティを指定し記述する方法が、混乱も少なくいいのかもしれませんね。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。
New!

HTML: Atom から Shift + Enter で改行タグを挿入するカスタマイズ方法

一部の HTML エディタでは Shift + Enter キーで br タグ が自動挿入されとても便利です。 今回はこの動きを Atom エディタで再現したいと思います。 目次 Atom から Shift + Enter で改行タグを挿入するカスタマイズ方法 まとめ Atom から Shift + Enter で改行タグを挿入するカスタマイズ方法 Atom を起動し、メニューの Atom -> 起動スクリプト を選択します。 init.coffee ファイルが開きますので、以下のコードを記述し保存します。 init.coffee 次に、メニューの Atom -> キーマップ を選択します。 keymap.cson ファイルが開きますので、以下のコードを記述し保存します。 keymap.cson Atom を再起動すれば、Shift + Enter で br タグ が挿入されるようになります。 まとめ 今回のカスタマイズは、HTML ページの設計時にはそれほど必要ではありませんが、コンテンツ自体の更新作業のコーディングとなったとき、よりクリエイティブに集中できるため、重宝される機能だと思います。 Atom をメインでディタとして HTML コーディングを行なっている方は、是非とも導入してみてください。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。