mikotohodo-三言ほど-

くだらない雑談と小さな情報を日常に

はてなブログ:自分用メモ#1 / HTML / 自由帳



ぺぺっとコピーして使うかもしれない自分用メモ、お気に入りの何かも貼っていく

FontAwesome無料版一部


See the Pen
Font Awesome pattern
by mikoto (@mikotohodo)
on CodePen.


<!-- <head>にペースト[Font Awesome] -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">

最新版 Font Awesome


 

自分用メモ / HTML CSS 文字装飾

<a href="#">テストログtestlogテストログ</a>
a {
  padding: 0 .3em;
  transition: all .3s;
}
a:hover {
  color: #fff;
  background-color: #2ecc71;
}


<a href="#">テストログtestlogテストログ</a>
a {
  position: relative;
  display: inline-block;
  transition: .3s;
}
a::before,
a::after {
  position: absolute;
  left: 50%;
  content: '';
  width: 0;
  height: 1px;
  background-color: #2ecc71;
  transition: .3s;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}
a::before {
  top: 0;
}
a::after {
  bottom: 0;
}
a:hover::before,
a:hover::after {
  width: 100%;
}


<a href="#">テストログtestlogテストログ</a>
a {
  padding: 0 .3em;
  background-image: linear-gradient(to right, rgba(0,0,0,0) 50%, rgba(46,204,113,1) 50%);
  background-position: 0 0;
  background-size: 200% auto;
  transition: .3s;
}
a:hover {
  background-position: -100% 0;
  color: #fff;
}
自分用メモ / HTML
<div align="center">testlog</div>
<span style="font-size: 20px">testlog</span>
<b><span style="font-size: 20px">testlog</span></b>
<strong><span style="font-size: 20px">testlog</span></strong>

testlog
testlog
testlog
testlog


<div style="padding: 10px 10px; margin:0px 0px 10px 0px; background: #bebebe;"><span style="font-size: 20px">testlog</span></div>

testlog


<div style="padding: 10px 10px; margin:0px 0px 10px 0px; background: #bebebe; border-radius:10px;"><span style="font-size: 20px">testlog</span></div>

testlog


<div style="border-width: 5px; border-color: #bebebe; border-style: solid; padding: 10px 10px; margin:0px 0px 10px 0px;  background: #f5f5f5;"><span style="font-size: 20px">testlog</span></div>

testlog


<div style="border-width: 0px 0px 0px 7px; border-color: #bebebe; border-style: solid; padding: 10px 10px; margin:0px 0px 10px 0px; background: #F5F5F5;"><span style="font-size: 20px">testlog</span></div>

testlog


<div style="position: relative; padding: 1em; background: #bebebe;">
<span style="font-size: 20px">testlog</span>
<span style="position: absolute; top: 100%; left: 30px; border: 15px solid transparent; border-top: 15px solid #bebebe; width: 0; height: 0;"></span></div>


testlog

Font Awesomeアイコンテスト