遅延読込「Lazy Load」とCSSのbox-shadowを滑らかにアニメーションする方法の記事を書きました。

遅延読込「Lazy Load」とCSSのbox-shadowを滑らかにアニメーションする方法の記事を書きました。

技術ブログの方に以下2つの記事を書いたのでこちらでも紹介します。 まだまだこちらのブログのほうからの流入が多いのと、技術ブログはインデックスされるまで時間が掛かるのでもう少しこちらブログでの紹介も続けようと思います。 (こちらのブログは殆ど即日インデックスしてもらえます)

「Font Awesome 5 Free」を疑似要素で使う方法をまとめ直しました!

「Font Awesome 5 Free」を疑似要素で使う方法をまとめ直しました!

北海道では初雪と冬の装いとなった近頃ですが、気付けばアイコンフォント「Font Awesome 5 Free」の最新 ver. が 5.5.0 になっていました。 このブログで初めてまとめた時にはまだ Ver.5.0.4 でした。 無料版で使えるアイコンの数も907種類から1409種類と約1.5倍に増えました。 ということで、疑似要素で使う方法についてもう少し詳しくまとめ直しました。 以下ページにまとめましたので、ご確認下さい。

CSSのセレクタを理解しよう!class指定が不要になりソースもスッキリして管理も容易になります!

CSSのセレクタを理解しよう!class指定が不要になりソースもスッキリして管理も容易になります!

平成最後の夏は大変暑かったですが、残暑が厳しい8月もそろそろ終わりですね。 9月になったら涼しくなって欲しいと思います。 さて、CSS にはセレクタによってどのタグに対してスタイルを指定するかを決めています。 今回はそんなセレクタの指定方法についてまとめます。

CSSの小技を紹介します!【中央揃え】【レシポンシブ対応アスペクト比固定要素】

CSSの小技を紹介します!【中央揃え】【レシポンシブ対応アスペクト比固定要素】

現在のWebデザインでは HTML はページ構成を、CSS はデザインを担うこととなっています。 そんな中で地味にどうやってコーディングすれば良いのかと頭を悩ませるものがありますので、紹介したいと思います。 特に最近ではスマホのような低解像度な画面から 4K のような高解像度まで対応したレシポンシブなデザインが求められていますので、描画領域の幅が不明でも使える小技となっています。

Google Chrome の開発者ツールでできることアレコレ

Google Chrome の開発者ツールでできることアレコレ

毎日毎日、最高気温を更新している今日ですが如何お過ごしでしょうか? 私は幸いにも暑さには慣れているので割と快適に過ごしております。 そんなうだるような日常の休閑話題として、Google Chrome や Opera の開発者ツールのアレコレについて紹介します。 どちらのブラウザも殆ど同じなので Google Chrome を使っていきます。 ※開発者ツール自体についてはいくらでも紹介記事があるので、本記事では “痒い所に手が届く” 小技を紹介することとします。

WebサイトのIE5~11までの動作確認をする方法とCSSプロパティが有効か調べる方法

WebサイトのIE5~11までの動作確認をする方法とCSSプロパティが有効か調べる方法

Webサイトをデザインしていると古いブラウザへの対応が気になりますよね。 特に昔からずっと鬼門だったIEへの対応は骨が折れます。 2018年現在では既にIE10以前はMicrosoftのサポート外になりました。 (最終アップデートは2016年1月) しかし、サポートが切れたブラウザも少なからず使っている人もいます。 そこで、古いIEで作成したWebサイトがどのように表示されるのか確認する方法を紹介します。

CSSだけで作るアニメーション付きドロップダウンメニュー【スマホ対応】

CSSだけで作るアニメーション付きドロップダウンメニュー【スマホ対応】

CSSだけでシンプルなドロップダウンメニューを作る方法を紹介します。 アニメーションを付ける場合、以前はJavascriptを使って動的にプロパティを変えていく必要がありました。 しかし、最近ではCSS3で追加された “transition” プロパティで徐々に変化させることもできるようになりました。