【HTML+CSS】BEMの命名規則でメンテナンス性の高いコードを書く
コーディングのときにクラス名に迷うことはありませんか?命名規則がないまま構成が複雑になると、管理ができず、いずれ破綻してしまいます。 コードの再利用やメンテナンスを考えるなら「BEM」と呼ばれる設計方法がおすすめです。理...
コーディングのときにクラス名に迷うことはありませんか?命名規則がないまま構成が複雑になると、管理ができず、いずれ破綻してしまいます。 コードの再利用やメンテナンスを考えるなら「BEM」と呼ばれる設計方法がおすすめです。理...
Webフォントといえば「モリサワフォント」が有名ですよね。 例えば、明朝体の「リュウミン」は名刺でよく使われるフォントです。 実は、そんな「モリサワフォント」が「Adobeユーザー」なら無料で使用できます。 書体は、全1...
画像加工したいけれど「Photoshop」がない、すぐに手直ししたいときもありますよね。CSSの「filter」を使えば「明るさ」「ぼかし」「影」などのアレンジが値ひとつでできます。 ただしIEは適用できないため、仕様や...
画像にフィルターをかけるときは、CSSのスタイル指定がラクですよ。Photoshopなどを使うと、ソフトを起動したり、元データを残しつつ加工したりと時間がかかるもの。 今回はIEとIE以外のブラウザに分けた形でご紹介しま...
要素を指定の位置に固定するときのプロパティといえば「position : fixed」が一般的ですが、 似たようなふるまいをするもので「position : sticky」という値があります。 こちらは、ある一定の位置で...
2022年2月7日に「Font Awesome」がバージョンアップされました。 今回は「5」から「6」へのメジャーアップデートということで、公式サイトも一新! 検索ボックスからアイコンを探して選ぶところは、前のバージョン...
アニメーションをつけて動きのあるサイトにしたいとき。 いくつか方法はありますが、文字を手書き風に表現するなら今回の方法が最適です。 流れとしては、元となる「SVGファイル」を作成して、CSSの値で動きを調整するだけ。 J...