BLOG

カテゴリー: FRONTEND

2019.04.16.

WEBデザイナーがマイペースにSCSSを学んでみる(1)

いまさらながら、ふとSCSSを勉強しようと思います。以前一度挑戦してみたのですが、環境の構築までの敷居がものすごく高くて、途中で面倒臭くなってしまい挫折してしまいました。 ただ、知らないよりは知っていた方が良いはずですし、今後フリーランスのWEBデザイナーとして様々な案件に携わっていく中で、「使わない」はまだしも「使えない」はまずいと思ったからです。 期限が …

2019.04.15.

開閉時にアイコンが回転するドロップダウンメニュー

スマホサイト等でつかえそうなドロップダウンメニューの実装方法の紹介です。 ダラダラとメニューを並べたくない時、見た目をスッキリさせたい時によくつかうのがドロップダウンメニューです。実装時に気を付けているのが、「押せる」ことが分かるようにすることです。まあ、当然ですが。 今回紹介するドロップダウンメニューであれば、ボタンの右端にアイコンが付いていて、そのアイコ …

2019.04.14.

2色の下線を表現するCSS

テキストに2色の下線をつけるCSSを紹介します。 パッと見、画像をつかった方が簡単なのかも知れないですが、レスポンシブの事まで考えるとCSSで制御した方が結局は楽です。 サンプル 疑似要素のwidthで、上の色(サンプルでは#f00)の幅を細かく指定できます。あとは、好みに合わせて色の組み合わせ等を変更してもらえればそのままつかえます。 See the Pe …

2019.04.13.

iPhone上でのDrawer.jsの不具合を修正する方法

以前下記の記事で紹介したDrawer.jsですが、iPhoneでの不具合があるようです。不具合の内容は、ドロワー内のメニューをスクロールしようとすると、メニューが閉じてしまうというもの。 PCやAndroidでは確認できない不具合なのですが、どうやらiOSのアップグレードに伴って発生し始めた不具合みたいです。僕自身iPhoneはつかっていないのでよくわかりま …

2019.04.12.

Font Awesomeのアイコンを疑似要素でつかう方法

今回はFont Awesomeのアイコンを::beforeや::afterの疑似要素で表示させるCSSの紹介です。 Font Awesomeのアイコンをつかうようになって、ますます画像に頼らないといけない場面が減ってきました。メニューやボタンについてはphotoshopで制作して、書き出して・・・みたいな作業はもう何年もやっていないような気がします。Font …

2019.04.11.

CSSで縦横比を保ったまま背景画像を横幅いっぱいに表示する方法

縦横比をキープしたまま画像をウィンドウ幅いっぱいに表示する。レスポンシブサイトが当たり前の昨今、よくつかう技術です。 <img>タグで表示する場合であれば比較的簡単ですが、背景画像だと少し小技が必要になってくるので、今回はそんなCSSの方法を紹介します。小技といってもpaddingでcalcをつかうだけなので本当に簡単。 サンプル See the …

2019.04.10.

CSSだけで実装されたホバーアニメーションのサンプル

以前、この記事でテキストリンクのホバー時のアンダーラインアニメーションを実装するCSSを紹介しました。今回は、ボタンのホバー時のアニメーションです。 サイトやページの雰囲気に合った動きのものを上手く選べば、ユーザーの印象がかなり良くなるのではないでしょうか。 hover時にボタンの枠線がアニメーションするCSS See the Pen Button Hove …

2019.04.8.

CSSの疑似要素で表示したアイコンを右寄せ&上下中央に配置

CSSの疑似要素::afterをつかえば、わざわざ画像をつかわなくてもHTMLとCSSだけで良い感じのボタンが作れます。ここ数年、個人的にはボタン画像を作成する機会がめっきり減りました。 そんな中でよくつかうのが今回紹介するCSSです。fontawesomeなんかのアイコンをボタンの右に寄せて、かつ上下中央配置にする方法になります。 サンプル See the …