ブログ

前々回ではVS Code（Visual Studio Code）のダウンロードとインストール、前回ではVS Codeの日本語化を行いました。かなりのスローペースです。 今回はVS Codeでsassをコンパイル出来るようにしていきます。前回はこのコンパイルできるような環境作りのところで挫折したんですよね・・・今回は上手くいくのでしょうか。失敗したらこの記事シ …

前回の続きで、SCSSを勉強するための環境構築を進めます。肝心のSCSSについてはまだ何も触れません・・・ 今回はVisual Stdio Code（略してVSCodeというらしい）の日本語化です。 VS Codeの表示を日本語にする インストールしただけでは全部英語表記 どうも以前のVS Codeではダウンロード時に言語を選択できたようなのですが、現在のも …

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

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

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

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

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

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