中村桐子のポートフォリオサイト、LIFE IS A PARTY!

沖縄出身のデザイナーナカムラキリコの人生はパーティーだ!ブログ

  • ウェブ

    デザインの手間をCSSで解消したいというお話〜outline編〜

    2017年8月8日

    0808

     

    こんにちは。初めてのピンバックを頂いて元気が出たキリコです!いえーい∠( ˙-˙ )/

     

    さっそく本題です。

    私はほとんど請け負っていないのですが、たま〜に更新業務の依頼を頂くことがあります。人の作ったサイトを更新すると、とにかく効率化がしたい!!!!!!と常々思ってしまいます。

    特に、「いかにデザインせずに済む方法はないか」「Photoshopをわざわざ立ち上げずにcssで実装できないか」という部分を考えて、クライアントへ提案することが多いです。

     

    今回、めったに使わないoutlineプロパティを使って効率化できた部分があったので、備忘録として書いておきます〜。そしてこれ、シリーズ化したい。

     

    依頼内容

    頂いた要望が、こんな感じのコンテンツを10件ほど更新してくださいというお話だったのですが

     

    ブログ用img01

     

    よく見ると、画像にこんな加工が!

     

    名称未設定-2

     

    はい。なんでこんなデザインにしたのか、デザイナーを小一時間問い詰めたいところですね。

     

    指示書には、こんな書き込みが。

    「枠線をPhotoshopで追加してから掲載してください」

     

    ふむ。確かに外枠のみならcssのborderで行きそうだけど、+半透明の内枠となると画像加工で済ませがちかもしれない。しかし私はcssでいきたいのだ!全部加工するの、面倒なのだ!!!

    そして考えた結果、outlineプロパティを使えば不要なラッパーを追加せずにシンプルにいけるのでは、と思いつく。

     

    いけました。

    記述はこんな感じです。

     

    img{
    border: solid 3px #fff142;
    outline: solid 3px rgba(255,255,255,0.85);
    outline-offset: -3px;
    }

     

    意外と便利なのね、outline。私はこれでクライアントに提案して、自分の実工数としては7分ほど、そのサイトの将来的にはかなりの時間短縮に成功しました。

     

    あとがき

    こんな感じで、ちまっとしたことですがcssで代替出来る部分ってかなり世の中に潜んでます。みなさんもこんな感じの小ネタ持ってたら、ぜひ教えてください〜。

     

    あと、結局言いたいのはこれなのかもしれませんが、、、全ブラウザの皆さん、

    ::outside擬似要素なんで未だに実装してくれないの?(大声)

     

     

    私からは以上です。

沖縄出身のWebデザイナー6年生。
1993年生まれ、現24歳。
ビールとお相撲が好きです。

ページトップへ戻る