css– category –

webページ作成時によく使うリンクボタンのコードを紹介します。 HTMLとCSSだけで作るシンプルなボタンです。 ボタンのデザインは結局シンプルなものを使うことが多いので4種類にしぼりました。 コピペしたり必要に応じて修正して使っていただければと思い...

上記のようにカバー写真の上に文字を入れて、レスポンシブにも対応できる方法を紹介します。 【コード】 cssに画像パスを使って表示させる方法です。 私が実際に作成した際のコードです。 HTML <div class="main"> <h1>Hello World&...

webページ制作時に、webフォントの文字がブラウザによって文字がかすれたりにじむという現象に遭遇したことはないでしょうか？ macのChromeで見たら問題なかったのに、WindowsのChromeやEdgeで見るとなぜか文字がにじむ現象が起きた！ ↓こんな感じで文字が...

webページを作成したときによく使うhoverの記述です。 hoverの設定をするとカーソルをボタンの上に移動したときに動きを出すことができます。 <a href="#" class="btn">よくあるボタン</a> .btn{ transition: all 0.2s ea...

【flexboxで画像が縦に伸びた時の対処法】 flexboxで作成した際、画像が縦に伸びる問題が発生しました。 Chrome、IE、Edge、iphoneのsafariで見たときは気づきませんでしたが、パソコンのsafariで見ると明らかに縦に伸びています。 cssに記述を追加します...