次は、画像の上にマウスの矢印をのせると線を引く画像をHTMLとCSSを使ってする方法をします。
画像に線を引くHTMLとCSSを使ってする方法
ワードプレスの管理画面を開きます。
左上の「投稿」を押します。
左上の「新規追加」を押します。
左上の「タイトルを追加」に「画像に線を引くアニメーションHTMLとCSSを使ってする方法」と入力します。
右側の「テキスト」を押します。
テキストのところにコードを貼り付けます。
テキストのところに下記のコードをコピーして、貼り付けます。
<div class="sen-hiku-gazou1"> ここに画像を入れる </div>
貼り付けました。
「ここに画像を入れる」の文字を消します。
文字を消したところに「画像」を入れます。
左上の「メディアを追加」を押します。
左上の「メディアライブラリ」を押します。
①「WordPress」を選択します。
画像は、他の画像でも大丈夫です。
②「配置：なし」、「リンク先：なし」、「サイズ：フルサイズ」を選択します。
③右下の「投稿に挿入」を押します。
画像が挿入されました。
右側の「公開」を押します。
「OK」を押します。
右上の「変更をプレビュー」を押します。
「画像に線を引くアニメーションHTMLとCSSを使ってする方法」の
画像の上にマウスの矢印をのせると画像に線を引くことを確認します。
↑じょうまさふみに学習状況を報告すると喜びます(^^)/
HTMLとCSSの説明
CSS
/*画像に線を引くアニメーション（基本）*/
.sen-hiku-gazou1 {
position: relative; /*相対配置*/
width: 450px; /*画像の横幅*/
height: 255px; /*画像の高さ*/
margin: 0 0 2em 0; /*画像の下余白*/
}
/*線を非表示*/
.sen-hiku-gazou1:after {
content: ''; /*線の表示*/
position: absolute; /*絶対配置*/
width: 0; /*幅ゼロ*/
left: 0; /*線の始まり位置*/
bottom: 25%; /*下線の位置*/
-ms-transition: all 0.3s ease; /*下線を引く時間*/
-webkit-transition: all 0.3s ease; /*下線を引く時間*/
transition: all 0.3s ease; /*下線を引く時間*/
border-bottom: 10px solid yellow; /*下線*/
display: block; /*表示位置*/
}
/*線を表示*/
.sen-hiku-gazou1:hover:after {
width: 100%; /*線の横幅*/
border-bottom: 10px solid yellow; /*下線*/
}
HTML
<div class="sen-hiku-gazou1"> ここに画像を入れる </div>
「position: relative;」は、画像を親要素として指定するためのCSSコードです。
「width: 450px;」は、画像の横幅を指定するためのCSSコードです。
「height: 255px;」は、画像の高さを指定するためのCSSコードです。
「margin: 0 0 2em 0;」は、画像の下側の余白を指定するためのCSSコードです。
「content: '';」は、下線を表示するためのCSSコードです。
「position: absolute;」は、線を子要素として指定するためのCSSコードです。
「width: 0;」は、マウスの矢印を文字にのせてないときに、線を非標示にするためのCSSコードです。
「left: 0;」は、線の始まりを指定するためのCSSコードです。
「bottom: 25%;」は、線の位置を指定するための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: 10px solid yellow;」は、下線の幅と色を指定するためのCSSコードです。
「display: block;」は、下線の位置を固定するためのCSSコードです。
「sen-hiku-gazou1:hover:after」の「width: 100%;」は、マウスの矢印を画像にのせたときに、下線を幅100%で表示するためのCSSコードです。
「ここに画像を入れる」の文字を消して、画像を入れてください。画像に線を引くアニメーション記入例
画像に線を引くアニメーション（基本）
CSS
/*画像に線を引くアニメーション（基本）*/
.sen-hiku-gazou1 {
position: relative; /*相対配置*/
width: 450px; /*画像の横幅*/
height: 255px; /*画像の高さ*/
margin: 0 0 2em 0; /*画像の下余白*/
}
/*線を非表示*/
.sen-hiku-gazou1:after {
content: ''; /*線の表示*/
position: absolute; /*絶対配置*/
width: 0; /*幅ゼロ*/
left: 0; /*線の始まり位置*/
bottom: 25%; /*下線の位置*/
-ms-transition: all 0.3s ease; /*下線を引く時間*/
-webkit-transition: all 0.3s ease; /*下線を引く時間*/
transition: all 0.3s ease; /*下線を引く時間*/
border-bottom: 10px solid yellow; /*下線*/
display: block; /*表示位置*/
}
/*線を表示*/
.sen-hiku-gazou1:hover:after {
width: 100%; /*線の横幅*/
border-bottom: 10px solid yellow; /*下線*/
}
HTML
<div class="sen-hiku-gazou1"> ここに画像を入れる </div>「ここに画像を入れる」の文字を消して、画像を入れてください。
記事をプレビュー表示したとき
画像に線を引くアニメーション（二重線）
CSS
/*画像に線を引くアニメーション（二重線）*/
.sen-hiku-gazou2 {
position: relative; /*相対配置*/
width: 450px; /*画像の横幅*/
height: 255px; /*画像の高さ*/
margin: 0 0 2em 0; /*画像の下余白*/
}
/*線を非表示*/
.sen-hiku-gazou2:after {
content: ''; /*線の表示*/
position: absolute; /*絶対配置*/
width: 0; /*幅ゼロ*/
left: 0; /*線の始まり位置*/
bottom: 25%; /*下線の位置*/
-ms-transition: all 0.3s ease; /*下線を引く時間*/
-webkit-transition: all 0.3s ease; /*下線を引く時間*/
transition: all 0.3s ease; /*下線を引く時間*/
border-bottom: 10px double red; /*下線*/
display: block; /*表示位置*/
}
/*線を表示*/
.sen-hiku-gazou2:hover:after {
width: 100%; /*線の横幅*/
border-bottom: 10px double red; /*下線*/
}
HTML
<div class="sen-hiku-gazou2"> ここに画像を入れる </div>「ここに画像を入れる」の文字を消して、画像を入れてください。
記事をプレビュー表示したとき
画像に線を引くアニメーション（点線）
CSS
/*画像に線を引くアニメーション（点線）*/
.sen-hiku-gazou3 {
position: relative; /*相対配置*/
width: 450px; /*画像の横幅*/
height: 255px; /*画像の高さ*/
margin: 0 0 2em 0; /*画像の下余白*/
}
/*線を非表示*/
.sen-hiku-gazou3:after {
content: ''; /*線の表示*/
position: absolute; /*絶対配置*/
width: 0; /*幅ゼロ*/
left: 0; /*線の始まり位置*/
bottom: 25%; /*下線の位置*/
-ms-transition: all 0.3s ease; /*下線を引く時間*/
-webkit-transition: all 0.3s ease; /*下線を引く時間*/
transition: all 0.3s ease; /*下線を引く時間*/
border-bottom: 10px dotted aqua; /*下線*/
display: block; /*表示位置*/
}
/*線を表示*/
.sen-hiku-gazou3:hover:after {
width: 100%; /*線の横幅*/
border-bottom: 10px dotted aqua; /*下線*/
}
HTML
<div class="sen-hiku-gazou3"> ここに画像を入れる </div>「ここに画像を入れる」の文字を消して、画像を入れてください。
記事をプレビュー表示したとき
画像に線を引くアニメーション（マーカー線）
CSS
/*画像に線を引くアニメーション（マーカー線）*/
.sen-hiku-gazou4 {
position: relative; /*相対配置*/
width: 450px; /*画像の横幅*/
height: 255px; /*画像の高さ*/
margin: 0 0 2em 0; /*画像の下余白*/
}
/*線を非表示*/
.sen-hiku-gazou4:after {
content: ''; /*線の表示*/
position: absolute; /*絶対配置*/
width: 0; /*幅ゼロ*/
left: 0; /*線の始まり位置*/
bottom: 25%; /*下線の位置*/
-ms-transition: all 0.3s ease; /*下線を引く時間*/
-webkit-transition: all 0.3s ease; /*下線を引く時間*/
transition: all 0.3s ease; /*下線を引く時間*/
background: linear-gradient(transparent 0%, yellow 100%); /*マーカー線*/
display: block; /*表示位置*/
padding-bottom: 2em; /*マーカー線幅*/
}
/*線を表示*/
.sen-hiku-gazou4:hover:after {
width: 100%; /*線の横幅*/
background: linear-gradient(transparent 0%, yellow 100%); /*マーカー線*/
}
HTML
<div class="sen-hiku-gazou4"> ここに画像を入れる </div>「ここに画像を入れる」の文字を消して、画像を入れてください。
記事をプレビュー表示したとき
画像に線を引くアニメーション（右から線）
CSS
/*画像に線を引くアニメーション（右から線）*/
.sen-hiku-gazou5 {
position: relative; /*相対配置*/
width: 450px; /*画像の横幅*/
height: 255px; /*画像の高さ*/
margin: 0 0 2em 0; /*画像の下余白*/
}
/*線を非表示*/
.sen-hiku-gazou5:after {
content: ''; /*線の表示*/
position: absolute; /*絶対配置*/
width: 0; /*幅ゼロ*/
right: 0; /*線の始まり位置*/
bottom: 25%; /*下線の位置*/
-ms-transition: all 0.3s ease; /*下線を引く時間*/
-webkit-transition: all 0.3s ease; /*下線を引く時間*/
transition: all 0.3s ease; /*下線を引く時間*/
background: linear-gradient(transparent 0%, orange 100%); /*マーカー線*/
display: block; /*表示位置*/
padding-bottom: 2em; /*マーカー線幅*/
}
/*線を表示*/
.sen-hiku-gazou5:hover:after {
width: 100%; /*線の横幅*/
background: linear-gradient(transparent 0%, orange 100%); /*マーカー線*/
}
HTML
<div class="sen-hiku-gazou5"> ここに画像を入れる </div>「ここに画像を入れる」の文字を消して、画像を入れてください。
記事をプレビュー表示したとき
画像に線を引くアニメーション（中央から線）
CSS
/*画像に線を引くアニメーション（中央から線）*/
.sen-hiku-gazou6 {
position: relative; /*相対配置*/
width: 450px; /*画像の横幅*/
height: 255px; /*画像の高さ*/
margin: 0 0 2em 0; /*画像の下余白*/
}
/*右線を非表示*/
.sen-hiku-gazou6:after {
content: ''; /*線の表示*/
position: absolute; /*絶対配置*/
width: 0; /*幅ゼロ*/
right: 50%; /*線の始まり位置*/
bottom: 25%; /*下線の位置*/
-ms-transition: all 0.3s ease; /*下線を引く時間*/
-webkit-transition: all 0.3s ease; /*下線を引く時間*/
transition: all 0.3s ease; /*下線を引く時間*/
background: linear-gradient(transparent 0%, springgreen 100%); /*マーカー線*/
display: block; /*表示位置*/
padding-bottom: 2em; /*マーカー線幅*/
}
/*右線を表示*/
.sen-hiku-gazou6:hover:after {
width: 50%; /*線の横幅*/
background: linear-gradient(transparent 0%, springgreen 100%); /*マーカー線*/
}
/*左線を非表示*/
.sen-hiku-gazou6:before {
content: ''; /*線の表示*/
position: absolute; /*絶対配置*/
width: 0; /*幅ゼロ*/
left: 50%; /*線の始まり位置*/
bottom: 25%; /*下線の位置*/
-ms-transition: all 0.3s ease; /*下線を引く時間*/
-webkit-transition: all 0.3s ease; /*下線を引く時間*/
transition: all 0.3s ease; /*下線を引く時間*/
background: linear-gradient(transparent 0%, springgreen 100%); /*マーカー線*/
display: block; /*表示位置*/
padding-bottom: 2em; /*マーカー線幅*/
}
/*左線を表示*/
.sen-hiku-gazou6:hover:before {
width: 50%; /*線の横幅*/
background: linear-gradient(transparent 0%, springgreen 100%); /*マーカー線*/
}
HTML
<div class="sen-hiku-gazou6"> ここに画像を入れる </div>「ここに画像を入れる」の文字を消して、画像を入れてください。
記事をプレビュー表示したとき
画像に線を引くアニメーション（左右から線）
CSS
/*画像に線を引くアニメーション（左右から線）*/
.sen-hiku-gazou7 {
position: relative; /*相対配置*/
width: 450px; /*画像の横幅*/
height: 255px; /*画像の高さ*/
margin: 0 0 2em 0; /*画像の下余白*/
}
/*右線を非表示*/
.sen-hiku-gazou7:after {
content: ''; /*線の表示*/
position: absolute; /*絶対配置*/
width: 0; /*幅ゼロ*/
right: 0; /*線の始まり位置*/
bottom: 25%; /*下線の位置*/
-ms-transition: all 0.3s ease; /*下線を引く時間*/
-webkit-transition: all 0.3s ease; /*下線を引く時間*/
transition: all 0.3s ease; /*下線を引く時間*/
background: linear-gradient(transparent 0%, springgreen 100%); /*マーカー線*/
display: block; /*表示位置*/
padding-bottom: 2em; /*マーカー線幅*/
}
/*右線を表示*/
.sen-hiku-gazou7:hover:after {
width: 50%; /*線の横幅*/
background: linear-gradient(transparent 0%, springgreen 100%); /*マーカー線*/
}
/*左線を非表示*/
.sen-hiku-gazou7:before {
content: ''; /*線の表示*/
position: absolute; /*絶対配置*/
width: 0; /*幅ゼロ*/
left: 0; /*線の始まり位置*/
bottom: 25%; /*下線の位置*/
-ms-transition: all 0.3s ease; /*下線を引く時間*/
-webkit-transition: all 0.3s ease; /*下線を引く時間*/
transition: all 0.3s ease; /*下線を引く時間*/
background: linear-gradient(transparent 0%, pink 100%); /*マーカー線*/
display: block; /*表示位置*/
padding-bottom: 2em; /*マーカー線幅*/
}
/*左線を表示*/
.sen-hiku-gazou7:hover:before {
width: 50%; /*線の横幅*/
background: linear-gradient(transparent 0%, pink 100%); /*マーカー線*/
}
HTML
<div class="sen-hiku-gazou7"> ここに画像を入れる </div>「ここに画像を入れる」の文字を消して、画像を入れてください。
記事をプレビュー表示したとき
画像に線を引くアニメーション（リンク付き）
CSS
/*画像に線を引くアニメーション（リンク付き）*/
.sen-hiku-gazou8 {
position: relative; /*相対配置*/
width: 450px; /*画像の横幅*/
height: 255px; /*画像の高さ*/
margin: 0 0 2em 0; /*画像の下余白*/
}
/*右線を非表示*/
.sen-hiku-gazou8:after {
content: ''; /*線の表示*/
position: absolute; /*絶対配置*/
width: 0; /*幅ゼロ*/
right: 0; /*線の始まり位置*/
bottom: 20%; /*下線の位置*/
-ms-transition: all 0.3s ease; /*下線を引く時間*/
-webkit-transition: all 0.3s ease; /*下線を引く時間*/
transition: all 0.3s ease; /*下線を引く時間*/
background: linear-gradient(yellow 0%, red 100%); /*マーカー線*/
display: block; /*表示位置*/
padding-bottom: 2em; /*マーカー線幅*/
}
/*右線を表示*/
.sen-hiku-gazou8:hover:after {
width: 50%; /*線の横幅*/
background: linear-gradient(yellow 0%, red 100%); /*マーカー線*/
}
/*左線を非表示*/
.sen-hiku-gazou8:before {
content: ''; /*線の表示*/
position: absolute; /*絶対配置*/
width: 0; /*幅ゼロ*/
left: 0; /*線の始まり位置*/
bottom: 20%; /*下線の位置*/
-ms-transition: all 0.3s ease; /*下線を引く時間*/
-webkit-transition: all 0.3s ease; /*下線を引く時間*/
transition: all 0.3s ease; /*下線を引く時間*/
background: linear-gradient(yellow 0%, red 100%); /*マーカー線*/
display: block; /*表示位置*/
padding-bottom: 2em; /*マーカー線幅*/
}
/*左線を表示*/
.sen-hiku-gazou8:hover:before {
width: 50%; /*線の横幅*/
background: linear-gradient(yellow 0%, red 100%); /*マーカー線*/
}
HTML
<div class="sen-hiku-gazou8"> <a href="ここにリンクのURLを入れます"> ここに画像を入れる </a> </div>
「ここにリンクのURLを入れます」の文字を消して、リンクのURLを入れてください。
「ここに画像を入れる」の文字を消して、画像を入れてください。
記事をプレビュー表示したとき
画像に線を引くアニメーション（文字のところだけ線）
CSS
/*画像に線を引くアニメーション（文字のところだけ線）*/
.sen-hiku-gazou9 {
position: relative; /*相対配置*/
width: 450px; /*画像の横幅*/
height: 255px; /*画像の高さ*/
margin: 0 0 2em 0; /*画像の下余白*/
}
/*線を非表示*/
.sen-hiku-gazou9:after {
content: ''; /*線の表示*/
position: absolute; /*絶対配置*/
width: 0; /*幅ゼロ*/
left: 30%; /*左側の位置*/
bottom: 35%; /*下側の位置*/
-ms-transition: all 0.3s ease; /*下線を引く時間*/
-webkit-transition: all 0.3s ease; /*下線を引く時間*/
transition: all 0.3s ease; /*下線を引く時間*/
border-bottom: 10px solid white; /*下線*/
display: block; /*表示位置*/
}
/*線を表示*/
.sen-hiku-gazou9:hover:after {
width: 63%; /*横幅*/
border-bottom: 10px solid white; /*下線*/
}
HTML
<div class="sen-hiku-gazou9"> ここに画像を入れる </div>「ここに画像を入れる」の文字を消して、画像を入れてください。
記事をプレビュー表示したとき
画像に線を引くアニメーション（線を消す）
CSS
/*画像に線を引くアニメーション（線を消す）*/
.sen-hiku-gazou10 {
position: relative; /*相対配置*/
width: 450px; /*画像の横幅*/
height: 255px; /*画像の高さ*/
margin: 0 0 2em 0; /*画像の下余白*/
}
/*線を表示*/
.sen-hiku-gazou10:after {
content: ''; /*線の表示*/
position: absolute; /*絶対配置*/
width: 63%; /*線の横幅*/
left: 30%; /*左側の位置*/
bottom: 35%; /*下側の位置*/
-ms-transition: all 0.3s ease; /*下線を引く時間*/
-webkit-transition: all 0.3s ease; /*下線を引く時間*/
transition: all 0.3s ease; /*下線を引く時間*/
border-bottom: 10px solid white; /*下線*/
display: block; /*表示位置*/
}
/*線を非表示*/
.sen-hiku-gazou10:hover:after {
width: 0%; /*線非表示*/
border-bottom: 10px solid white; /*下線*/
}
HTML
<div class="sen-hiku-gazou10"> ここに画像を入れる </div>「ここに画像を入れる」の文字を消して、画像を入れてください。
記事をプレビュー表示したとき