Analogstudio

アナログ回路、車、写真、PCなどに関するブログ

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

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

平成最後の夏は大変暑かったですが、残暑が厳しい8月もそろそろ終わりですね。
9月になったら涼しくなって欲しいと思います。

さて、CSS にはセレクタによってどのタグに対してスタイルを指定するかを決めています。
今回はそんなセレクタの指定方法についてまとめます。
続きを読む 紹介CSSのセレクタを理解しよう!class指定が不要になりソースもスッキリして管理も容易になります!

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

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

現在のWebデザインでは HTML はページ構成を、CSS はデザインを担うこととなっています。

そんな中で地味にどうやってコーディングすれば良いのかと頭を悩ませるものがありますので、紹介したいと思います。
特に最近ではスマホのような低解像度な画面から 4K のような高解像度まで対応したレシポンシブなデザインが求められていますので、描画領域の幅が不明でも使える小技となっています。
続きを読む 紹介CSSの小技を紹介します!【中央揃え】【レシポンシブ対応アスペクト比固定要素】

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

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

毎日毎日、最高気温を更新している今日ですが如何お過ごしでしょうか?
私は幸いにも暑さには慣れているので割と快適に過ごしております。

そんなうだるような日常の休閑話題として、Google Chrome や Opera の開発者ツールのアレコレについて紹介します。
どちらのブラウザも殆ど同じなので Google Chrome を使っていきます。
※開発者ツール自体についてはいくらでも紹介記事があるので、本記事では “痒い所に手が届く” 小技を紹介することとします。
続きを読む 紹介Google Chrome の開発者ツールでできることアレコレ

iPhoneでhoverやclickイベントが思い通りにならない場合の処方箋【CSS】【Javascript】

iPhoneでhoverやclickイベントが思い通りにならない場合の処方箋【CSS】【Javascript】

Webサイトを設計する際にPCやAndroid端末では想定通りの動作をするのにiPhoneだけはうまくいかないことがあります。

そこで、今回はそうなってしまった場合にどのように対処するかをまとめます。
続きを読む 紹介iPhoneでhoverやclickイベントが思い通りにならない場合の処方箋【CSS】【Javascript】

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

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

Webサイトをデザインしていると古いブラウザへの対応が気になりますよね。
特に昔からずっと鬼門だったIEへの対応は骨が折れます。

2018年現在では既にIE10以前はMicrosoftのサポート外になりました。
(最終アップデートは2016年1月)
しかし、サポートが切れたブラウザも少なからず使っている人もいます。

そこで、古いIEで作成したWebサイトがどのように表示されるのか確認する方法を紹介します。
続きを読む 紹介WebサイトのIE5~11までの動作確認をする方法とCSSプロパティが有効か調べる方法

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

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

CSSだけでシンプルなドロップダウンメニューを作る方法を紹介します。

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