外部リンクにアイコンがついているとどんなリンクか分かるしおしゃれ！
ということでFontawesomeを使ってWebサービスのリンクにアイコンを付ける方法を紹介します。
リンクにFontawesomeのアイコンをつける
aタグにアイコンを表示するには疑似要素のbeforeかafterを使います。
Beforeならリンクの前、afterならリンクの後につけることができます。
``...
#CSS
「CSS」に関連するタグ
「CSS」に関する記事一覧
グラデーションの文字をCSSで実装したいと思ったことはありませんか？
CSS3のプロパティを使うことで文字をグラデーションにすることができるので方法を紹介します。
CSSで文字の切り抜きと透過
実装の方法は文字の背景をグラデーションにするのと合わせて、文字の形に切り抜いて文字色を透過することで実現することができます。
必要なCSSは下記です。
background-i...
BEMでコーディングしていると、Elementが入れ子になってしまうことがありませんか？
設計になれないとどういう単位でBlockにしてコンポーネント化するのか迷ってしまうかと思います。
そこでBEMのBlockはどういう単位で作ればいいのか基準を紹介します。
BEMがよくわからない人は最初に「{% post_link slug='bem-css-cording' /%}
」を読んでみ...
BEMでCSS設計する人にわかりやすいサンプルはこれだ！っていう例があります。
わからない人にいきなりBlock・Elment・Modifierと言っていきなり理解できる人も少ないですよね。
そこでペットボトルをBEMでコーディングしたサンプルが説明するのに、一番わかりやすいのでは？と思っています。
BEMでCSS設計したコーディング
BEMは冒頭に書いたようにBlock・El...
HTMLとCSSで横並びを実現する方法はいくつかあります。
これまでは対応するブラウザや横並びのレイアウトによって方法を変えてきましたが、横並びを実現するための1つの方法としてdisplay: flex;```が実用レベルになりました。
```dispaly: flex;```を使うのが横並びを手っ取り早く簡単に実現するのに一番おすすめな方法です。
この記事では```displa...
スタイルガイドで作るときにコメントを書くのがつらい・・。
これを思っているのって自分だけかな。
便利にするはずのスタイルガイドの運用がつらいと更新を続けるモチベーションも下がってしまう。
そんな時にコメントを問題を解消できるfractalを知ってからずっと使っているけど、やっぱりテンプレートはスタイルシートとは別の方がすっきりする。
CSSにコメント...
一定量スクロールするとサイドバーを追従して固定させたい時は結構ある。
実現するにはこれまでJavaScriptを使う必要があったけど、CSSだけで実現できるようになってすごい楽になった。
まずはどうやってCSSだけで実現するのかサクッとサンプルを。
stickyで固定する
サイドバーを追従固定するにはCSSのposition: sticky;を使うことで実現できる。
...
Nuxt.jsを身につけたい！
Nuxt.jsビギナーズガイド―Vue.js ベースのフレームワークによるシングルページアプリケーション開発