次は、文字の上にマウスの矢印をのせると線を引く文字をHTMLとCSSを使ってする方法をします。
文字に線を引くアニメーションをHTMLとCSSを使ってする方法
ワードプレスの管理画面を開きます。
左上の「投稿」を押します。
左上の「新規追加」を押します。
左上の「タイトルを追加」に「文字に線を引くアニメーションをHTMLとCSSを使ってする方法」と入力します。
右側の「テキスト」を押します。
テキストのところにコードを貼り付けます。
テキストのところに下記のコードをコピーして、貼り付けます。
<div class="sen-hiku-mozi1"> 続きを見る </div>
貼り付けました。
右側の「公開」を押します。
「OK」を押します。
右上の「変更をプレビュー」を押します。
「文字に線を引くアニメーションHTMLとCSSを使ってする方法」の
文字の上にマウスの矢印をのせると文字に線を引くことを確認します。
↑じょうまさふみに学習状況を報告すると喜びます(^^)/
HTMLとCSSの説明
CSS
/*文字に線を引くアニメーション（基本）*/
.sen-hiku-mozi1 {
font-size: 1.5em; /*文字サイズ*/
font-weight: bold; /*太字*/
margin: 0 0 0.1em 0; /*文字の下余白*/
text-decoration: none; /*装飾なし*/
color: black; /*文字色*/
display: inline-block; /*要素内表示*/
line-height: 1; /*行の高さ*/
}
/*線を非表示*/
.sen-hiku-mozi1:after {
content: ''; /*線の表示*/
width: 0; /*幅ゼロ*/
-ms-transition: all 0.3s ease; /*下線を引く時間*/
-webkit-transition: all 0.3s ease; /*下線を引く時間*/
transition: all 0.3s ease; /*下線を引く時間*/
border-bottom: 3px solid black; /*下線*/
padding-bottom: 0.5em; /*文字と下線の余白*/
display: block; /*表示位置*/
}
/*線を表示*/
.sen-hiku-mozi1:hover:after {
width: 100%; /*横幅*/
border-bottom: 3px solid black; /*下線*/
}
HTML
<div class="sen-hiku-mozi1"> 続きを見る </div>
「font-size: 1.5em;」は、文字のサイズを指定するためのCSSコードです。
「font-weight: bold;」は、文字を太字にするためのCSSコードです。
「margin: 0 0 0.1em 0;」は、文字の下側の余白を指定するためのCSSコードです。
「text-decoration: none;」は、文字の装飾をなしにするためのCSSコードです。
「color: black;」は、文字の色を指定するためのCSSコードです。
「display: inline-block;」は、文字から下線がはみ出ないようにするためのCSSコードです。
「line-height: 1;」は、文字の行の高さを指定するためのCSSコードです。
「content: '';」は、下線を表示するためのCSSコードです。
「width: 0;」は、マウスの矢印を文字にのせてないときに、線を非標示にするためのCSSコードです。
「-ms-transition: all 0.3s ease;」は、下線が表示される時間を指定するためのCSSコードです
「-ms-transition」の、「-ms-」は、ブラウザーのインターネットエクスプロラーで表示させるためのコードです。
「-webkit-transition: all 0.3s ease;」は、下線が表示される時間を指定するためのCSSコードです
「webkit-transition」の、「-webkit-」は、ブラウザーのグーグルクロームとサファリで表示させるためのコードです。
「transition: all 0.3s ease;」は、下線が表示される時間を指定するためのCSSコードです。
「border-bottom: 3px solid black;」は、下線の幅と色を指定するためのCSSコードです。
「padding-bottom: 0.5em;」は、文字と下線の余白を指定するためのCSSコードです。
「display: block;」は、下線の位置を固定するためのCSSコードです。
「sen-hiku-mozi1:hover:after」の「width: 100%;」は、マウスの矢印を文字にのせたときに、下線を幅100%で表示するためのCSSコードです。
文字に線を引くアニメーション記入例
文字に線を引くアニメーション（基本）
CSS
/*文字に線を引くアニメーション（基本）*/
.sen-hiku-mozi1 {
font-size: 1.5em; /*文字サイズ*/
font-weight: bold; /*太字*/
margin: 0 0 0.1em 0; /*文字の下余白*/
text-decoration: none; /*装飾なし*/
color: black; /*文字色*/
display: inline-block; /*要素内表示*/
line-height: 1; /*行の高さ*/
}
/*線を非表示*/
.sen-hiku-mozi1:after {
content: ''; /*線の表示*/
width: 0; /*幅ゼロ*/
-ms-transition: all 0.3s ease; /*下線を引く時間*/
-webkit-transition: all 0.3s ease; /*下線を引く時間*/
transition: all 0.3s ease; /*下線を引く時間*/
border-bottom: 3px solid black; /*下線*/
padding-bottom: 0.5em; /*文字と下線の余白*/
display: block; /*表示位置*/
}
/*線を表示*/
.sen-hiku-mozi1:hover:after {
width: 100%; /*横幅*/
border-bottom: 3px solid black; /*下線*/
}
HTML
<div class="sen-hiku-mozi1"> 続きを見る </div>
記事をプレビュー表示したとき
続きを見る
文字に線を引くアニメーション（二重線）
CSS
/*文字に線を引くアニメーション（二重線）*/
.sen-hiku-mozi2 {
font-size: 1.5em; /*文字サイズ*/
font-weight: bold; /*太字*/
margin: 0 0 0.1em 0; /*文字の下余白*/
text-decoration: none; /*装飾なし*/
color: black; /*文字色*/
display: inline-block; /*要素内表示*/
line-height: 1; /*行の高さ*/
}
/*線を非表示*/
.sen-hiku-mozi2:after {
content: ''; /*線の表示*/
width: 0; /*幅ゼロ*/
-ms-transition: all 0.3s ease; /*下線を引く時間*/
-webkit-transition: all 0.3s ease; /*下線を引く時間*/
transition: all 0.3s ease; /*下線を引く時間*/
border-bottom: 10px double blue; /*二重線*/
padding-bottom: 0.5em; /*文字と下線の余白*/
display: block; /*表示位置*/
}
/*線を表示*/
.sen-hiku-mozi2:hover:after {
width: 100%; /*横幅*/
border-bottom: 10px double blue; /*二重線*/
}
HTML
<div class="sen-hiku-mozi2"> 続きを見る </div>
記事をプレビュー表示したとき
続きを見る
文字に線を引くアニメーション（点線）
CSS
/*文字に線を引くアニメーション（点線）*/
.sen-hiku-mozi3 {
font-size: 1.5em; /*文字サイズ*/
font-weight: bold; /*太字*/
margin: 0 0 0.1em 0; /*文字の下余白*/
text-decoration: none; /*装飾なし*/
color: black; /*文字色*/
display: inline-block; /*要素内表示*/
line-height: 1; /*行の高さ*/
}
/*線を非表示*/
.sen-hiku-mozi3:after {
content: ''; /*線の表示*/
width: 0; /*幅ゼロ*/
-ms-transition: all 0.3s ease; /*下線を引く時間*/
-webkit-transition: all 0.3s ease; /*下線を引く時間*/
transition: all 0.3s ease; /*下線を引く時間*/
border-bottom: 5px dotted red; /*点線*/
padding-bottom: 0.5em; /*文字と下線の余白*/
display: block; /*表示位置*/
}
/*線を表示*/
.sen-hiku-mozi3:hover:after {
width: 100%; /*横幅*/
border-bottom: 5px dotted red; /*点線*/
}
HTML
<div class="sen-hiku-mozi3"> 続きを見る </div>
記事をプレビュー表示したとき
続きを見る
文字に線を引くアニメーション（マーカー線）
CSS
/*文字に線を引くアニメーション（マーカー線）*/
.sen-hiku-mozi4 {
font-size: 1.5em; /*文字サイズ*/
font-weight: bold; /*太字*/
margin: 0 0 0.1em 0; /*文字の下余白*/
text-decoration: none; /*装飾なし*/
color: black; /*文字色*/
display: inline-block; /*要素内表示*/
line-height: 1; /*行の高さ*/
}
/*線を非表示*/
.sen-hiku-mozi4:after {
content: ''; /*線の表示*/
width: 0; /*幅ゼロ*/
-ms-transition: all 0.3s ease; /*下線を引く時間*/
-webkit-transition: all 0.3s ease; /*下線を引く時間*/
transition: all 0.3s ease; /*下線を引く時間*/
background: linear-gradient(transparent 0%, yellow 100%); /*マーカー線*/
padding-bottom: 0.5em; /*文字と下線の余白*/
display: block; /*表示位置*/
}
/*線を表示*/
.sen-hiku-mozi4:hover:after {
width: 100%; /*横幅*/
background: linear-gradient(transparent 0%, yellow 100%); /*マーカー線*/
}
HTML
<div class="sen-hiku-mozi4"> 続きを見る </div>
記事をプレビュー表示したとき
続きを見る
文字に線を引くアニメーション（右から線）
CSS
/*文字に線を引くアニメーション（右から線）*/
.sen-hiku-mozi5 {
font-size: 1.5em; /*文字サイズ*/
font-weight: bold; /*太字*/
margin: 0 0 0.1em 0; /*文字の下余白*/
text-decoration: none; /*装飾なし*/
color: black; /*文字色*/
display: inline-block; /*要素内表示*/
line-height: 1; /*行の高さ*/
position: relative; /*相対配置*/
}
/*線を非表示*/
.sen-hiku-mozi5:after {
content: ''; /*線の表示*/
width: 0; /*幅ゼロ*/
right: 0; /*右側位置*/
-ms-transition: all 0.3s ease; /*下線を引く時間*/
-webkit-transition: all 0.3s ease; /*下線を引く時間*/
transition: all 0.3s ease; /*下線を引く時間*/
background: linear-gradient(transparent 0%, orange 100%); /*マーカー線*/
padding-bottom: 0.5em; /*文字と下線の余白*/
display: block; /*表示位置*/
position: absolute; /*絶対配置*/
}
/*線を表示*/
.sen-hiku-mozi5:hover:after {
width: 100%; /*横幅*/
background: linear-gradient(transparent 0%, orange 100%); /*マーカー線*/
}
HTML
<div class="sen-hiku-mozi5"> 続きを見る </div>
記事をプレビュー表示したとき
続きを見る
文字に線を引くアニメーション（中央から線）
CSS
/*文字に線を引くアニメーション（中央から線）*/
.sen-hiku-mozi6 {
font-size: 1.5em; /*文字サイズ*/
font-weight: bold; /*太字*/
margin: 0 0 0.1em 0; /*文字の下余白*/
text-decoration: none; /*装飾なし*/
color: black; /*文字色*/
display: inline-block; /*要素内表示*/
line-height: 1; /*行の高さ*/
position: relative; /*相対配置*/
}
/*右線を非表示*/
.sen-hiku-mozi6:after {
content: ''; /*線の表示*/
width: 0; /*幅ゼロ*/
right: 50%; /*中央位置*/
bottom: -0.5em; /*文字と下線の余白*/
-ms-transition: all 0.3s ease; /*下線を引く時間*/
-webkit-transition: all 0.3s ease; /*下線を引く時間*/
transition: all 0.3s ease; /*下線を引く時間*/
background: linear-gradient(transparent 0%, limegreen 100%); /*マーカー線*/
padding-bottom: 0.5em; /*線幅*/
display: block; /*表示位置*/
position: absolute; /*絶対配置*/
}
/*右線を表示*/
.sen-hiku-mozi6:hover:after {
width: 50%; /*横幅*/
background: linear-gradient(transparent 0%, limegreen 100%); /*マーカー線*/
}
/*左線を非表示*/
.sen-hiku-mozi6:before {
content: ''; /*線の表示*/
width: 0; /*幅ゼロ*/
left: 50%; /*中央位置*/
bottom: -0.5em; /*文字と下線の余白*/
-ms-transition: all 0.3s ease; /*下線を引く時間*/
-webkit-transition: all 0.3s ease; /*下線を引く時間*/
transition: all 0.3s ease; /*下線を引く時間*/
background: linear-gradient(transparent 0%, limegreen 100%); /*マーカー線*/
padding-bottom: 0.5em; /*線幅*/
display: block; /*表示位置*/
position: absolute; /*絶対配置*/
}
/*左線を表示*/
.sen-hiku-mozi6:hover:before {
width: 50%; /*横幅*/
background: linear-gradient(transparent 0%, limegreen 100%); /*マーカー線*/
}
HTML
<div class="sen-hiku-mozi6"> 続きを見る </div>
記事をプレビュー表示したとき
続きを見る
文字に線を引くアニメーション（左右から線）
CSS
/*文字に線を引くアニメーション（左右から線）*/
.sen-hiku-mozi7 {
font-size: 1.5em; /*文字サイズ*/
font-weight: bold; /*太字*/
margin: 0 0 0.1em 0; /*文字の下余白*/
text-decoration: none; /*装飾なし*/
color: black; /*文字色*/
display: inline-block; /*要素内表示*/
line-height: 1; /*行の高さ*/
position: relative; /*相対配置*/
}
/*右線を非表示*/
.sen-hiku-mozi7:after {
content: ''; /*線の表示*/
width: 0; /*幅ゼロ*/
right: 0; /*右位置*/
bottom: -0.5em; /*文字と下線の余白*/
-ms-transition: all 0.3s ease; /*下線を引く時間*/
-webkit-transition: all 0.3s ease; /*下線を引く時間*/
transition: all 0.3s ease; /*下線を引く時間*/
background: linear-gradient(transparent 0%, pink 100%); /*マーカー線*/
padding-bottom: 0.5em; /*線幅*/
display: block; /*表示位置*/
position: absolute; /*絶対配置*/
}
/*右線を表示*/
.sen-hiku-mozi7:hover:after {
width: 50%; /*横幅*/
background: linear-gradient(transparent 0%, pink 100%); /*マーカー線*/
}
/*左線を非表示*/
.sen-hiku-mozi7:before {
content: ''; /*線の表示*/
width: 0; /*幅ゼロ*/
left: 0; /*左位置*/
bottom: -0.5em; /*文字と下線の余白*/
-ms-transition: all 0.3s ease; /*下線を引く時間*/
-webkit-transition: all 0.3s ease; /*下線を引く時間*/
transition: all 0.3s ease; /*下線を引く時間*/
background: linear-gradient(transparent 0%, pink 100%); /*マーカー線*/
padding-bottom: 0.5em; /*線幅*/
display: block; /*表示位置*/
position: absolute; /*絶対配置*/
}
/*左線を表示*/
.sen-hiku-mozi7:hover:before {
width: 50%; /*横幅*/
background: linear-gradient(transparent 0%, pink 100%); /*マーカー線*/
}
HTML
<div class="sen-hiku-mozi7"> 続きを見る </div>
記事をプレビュー表示したとき
続きを見る
文字に線を引くアニメーション（リンク付き）
CSS
/*文字に線を引くアニメーション（リンク付き）*/
.sen-hiku-mozi8 {
font-size: 1.5em; /*文字サイズ*/
font-weight: bold; /*太字*/
margin: 0 0 0.1em 0; /*文字の下余白*/
text-decoration: none; /*装飾なし*/
color: black; /*文字色*/
display: inline-block; /*要素内表示*/
line-height: 1; /*行の高さ*/
position: relative; /*相対配置*/
}
/*リンクの下線削除*/
.sen-hiku-mozi8 a{
text-decoration: none !important; /*装飾なし*/
}
/*右線を非表示*/
.sen-hiku-mozi8:after {
content: ''; /*線の表示*/
width: 0; /*幅ゼロ*/
right: 0; /*右位置*/
bottom: -0.5em; /*文字と下線の余白*/
-ms-transition: all 0.3s ease; /*下線を引く時間*/
-webkit-transition: all 0.3s ease; /*下線を引く時間*/
transition: all 0.3s ease; /*下線を引く時間*/
background: linear-gradient(transparent 0%, aqua 100%); /*マーカー線*/
padding-bottom: 0.5em; /*線幅*/
display: block; /*表示位置*/
position: absolute; /*絶対配置*/
}
/*右線を表示*/
.sen-hiku-mozi8:hover:after {
width: 50%; /*横幅*/
background: linear-gradient(transparent 0%, aqua 100%); /*マーカー線*/
}
/*左線を非表示*/
.sen-hiku-mozi8:before {
content: ''; /*線の表示*/
width: 0; /*幅ゼロ*/
left: 0; /*左位置*/
bottom: -0.5em; /*文字と下線の余白*/
-ms-transition: all 0.3s ease; /*下線を引く時間*/
-webkit-transition: all 0.3s ease; /*下線を引く時間*/
transition: all 0.3s ease; /*下線を引く時間*/
background: linear-gradient(transparent 0%, aqua 100%); /*マーカー線*/
padding-bottom: 0.5em; /*線幅*/
display: block; /*表示位置*/
position: absolute; /*絶対配置*/
}
/*左線を表示*/
.sen-hiku-mozi8:hover:before {
width: 50%; /*横幅*/
background: linear-gradient(transparent 0%, aqua 100%); /*マーカー線*/
}
HTML
<div class="sen-hiku-mozi8"> <a href="ここにURLリンクを入れる">続きを見る</a> </div>
記事をプレビュー表示したとき
文字に線を引くアニメーション（線を消す）
CSS
/*文字に線を引くアニメーション（線を消す）*/
.sen-hiku-mozi9 {
font-size: 1.5em; /*文字サイズ*/
font-weight: bold; /*太字*/
margin: 0 0 0.1em 0; /*文字の下余白*/
text-decoration: none; /*装飾なし*/
color: black; /*文字色*/
display: inline-block; /*要素内表示*/
line-height: 1; /*行の高さ*/
}
/*線を表示*/
.sen-hiku-mozi9:after {
content: ''; /*線の表示*/
width: 100%; /*線の幅*/
-ms-transition: all 0.3s ease; /*下線を引く時間*/
-webkit-transition: all 0.3s ease; /*下線を引く時間*/
transition: all 0.3s ease; /*下線を引く時間*/
border-bottom: 3px solid black; /*下線*/
padding-bottom: 0.5em; /*文字と下線の余白*/
display: block; /*表示位置*/
}
/*線を非表示*/
.sen-hiku-mozi9:hover:after {
width: 0; /*線の幅ゼロ*/
border-bottom: 3px solid black; /*下線*/
}
HTML
<div class="sen-hiku-mozi9"> 続きを見る </div>
記事をプレビュー表示したとき
続きを見る