CSSのみでホームページを制作したい〜画像の上に文字をのせるとか

記事公開日：2017.11.08

画像に文字を乗せるときでデザイン処理をしたいとき、Photoshopで加工していましたが、最近は後々の更新や修正やSEO対策を考えて、画像加工をせずにcssで加工するようになってきました。

画像の上に文字を載せたいときに簡単にできるCSSです。
いろいろ他のレイアウトやCSSとも組み合わせがしやすかったです。

今回参考にさせていただいたサイトです
画像の上に文字列を表示する方法

画像にマウスを乗せると下からスライドして出てくるのをCSSだけで設置

こんなこともcssでできてしまうのだから、javaScript離れしそうです。
javaScriptは時々ぶつかったりするので多数扱う場合は注意が必要ですが、cssだけならそんな心配もなく安心です。

一緒に読みたい内部記事
ホームページに動きをつける：cssだけで画像にマウスオーバーで動きをつけたい

javaScriptを使わなくても同様の動きを加えることもできるし、写真のスライダーとかもjavaScriptを使わない方向にいきそうです。
画像のスライダーについては、設定しやすいものでレスポンシブ対応のものを集めているので後日忘備録にまとめたいと思います。