記号・HTML・CSS。初歩で使えたら便利なやつ

ブログで便利な初歩から使える記号・HTML・CSS

レベルの高いものとか一切なく、初歩で使うもしくは普段からよく使う、またはたまに使うようなコード・タグそれら等々。

 全て言い訳、自分が覚えないからコピペ用。

 随時更新していきたい。

記号

「*」とか「-」は、はてなブログでは結構使ってる。あとスペースも便利。

記号	コード	用途
<	&lt;	タグを表記するとき
>	&gt;	タグを表記するとき
|	&#124;	区切りなど
*	&#42;	*
–	&ndash;	*
—	&mdash;	*
	&nbsp;	ノーブレークスペース
	&ensp;	フォントサイズ半分スペース
	&emsp;	フォントサイズ全角スペース

オンマウス時の画像リンクの変化

ボーダーラインのオンオフ切り替え

<div class="img-bordersample"><a href="url"><img src="画像url"></a></div>

.img-bordersample a img {
 border:2px solid #000;
 }
.img-bordersample a:hover img {
 border:2px solid #ff0000;
 }

オンマウス時に画像の拡大

<div class="img-hoversample"><a href="url"><img src="画像url"></a></div>

.img-hoversample {
 overflow: hidden;
 }
.img-hoversample img{
 display: block;
 transition-duration: 0.3s;
 }
.img-hoversample img:hover {
 transform: scale(1.1); 
 transition-duration: 0.3s;
 }

画像の枠線・縁取り

いい加減これくらいのモノはショートカットに入れたら…と思うのだけど、それすら面倒。

 style="border: solid 1px #000000;"

画像の縁取り・装飾

アイキャッチを使うときにそのまま載せるのではなく、太目の枠にシャドウを入れてあげると更に良い（と個人的には思う）

<img src="画像url" class="effectsample">

.effectsample {
 padding: 10px;
 background-color: #fff;
 box-shadow: 0px 0px 15px 0px rgba(56, 89, 150, 0.8);
 }

Googleフォトから直接貼り付けたコードの中に既にclassがある場合は、その中に入れて問題なし。

更新履歴

コピペしたくなったら更新していく。

 初回:2020/02/06