はてなブックマーク

See the Pen css sample item-list by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen. 以上のサンプルはhover時の表示に擬似要素（:after）を使っています。このCSSについて分解して紹介します。 コードのサンプルというよりCSS装飾の考え方の参考になれば。 概要 CSSでやることを言葉でざっと分解すると以下になります。 a:after を半透明フィルムのように a 全体を覆うようにする a:after に Fontawesome のアイコンを出す a:after は平時は透明にする （opacity:0） a:hover で a:after を表示させる （opacity:1） ※完成像が頭の中に（or絵として）あったうえで、こんな風にすれば出来るやろ！という手順をイメージします。 CSS サンプルから抜粋して

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

TOWN Advent Calendar 2018 1日目の記事です。 弊社は9割開発者の弊社においてなので、デザイナーがやっていること・出来ることを知らない人も多いと思います。 ならばデザイナーの自分から一発目をかましたろと思い、エンジニアとも共通の話題にしやすい自分のフロントコーディング環境について紹介します。フロント始める人の参考になれば。 ※以下はGulp3の内容です。Gulp4に対応した内容を新たに書きました。 どんな環境？ Node.jsインストール済みの環境で エディタにVSCode使って タスクランナーにGulpを利用して SassをCSSにコンパイルし BrowserSyncでライブプレビューしています。 こんな環境で書いてます。 前提＆用語 VSCode みんな大好きVisual Studio Code. VSCodeに限らずAtomなどターミナルを内包したエディタなら

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?