htmlやcssの機能について
今回は簡単だけど便利なコードを4つご紹介いたします。
- リンクの下線を消す方法
- リンクを1回押すと２回目表示する際に色が変わるのを防ぐ方法
- 画像をラインのプロフィールのように丸く表示する方法
- 要素を上下中央に配置する方法
リンクの下線を消す方法
liタグやulタグにのcssにtext-decoration:none;と記述します
html
<ul>
<li>
リスト1
</li>
</ul>
<a>リンク</a>
css
li {
text-decoration: none;
}
記述はこれだけでデフォルトで設定されている下線を消すことができます！
リンクを1回押すと２回目表示する際に色が変わるのを防ぐ方法
これはaタグに`color'を設定することで防ぐことができます。
html
<a href="リンク" alt="リンク" >こちらがリンクです</a>
css
a {
color: white;
}
これでリンクを押した後もデフォルトの紫色になることなく白色に設定できました！
画像をラインのプロフィール画像のように丸く表示する方法
imgのcssにborder-radius: 50%;を記述すると円形で表示されます。
html
<img src="img/templete-img" alt="プロフィール画像です">
css
border-radius: 50%;
これで円形の画像を表示することができました!
%を3%のように変更すると画像の角が３％丸くなります。
何か不明点や修正点などありましたらご質問ください。
また、学習のモチベーションにもなりますので気に入っていただけたらハート押していただけると喜びます。