次は、文字の上にマウスの矢印をのせると回る文字をHTMLとCSSを使ってする方法をします。
文字を回すHTMLとCSSを使ってする方法
ワードプレスの管理画面を開きます。
左上の「投稿」を押します。
左上の「新規追加」を押します。
左上の「タイトルを追加」に「文字を回すHTMLとCSSを使ってする方法」と入力します。
右側の「テキスト」を押します。
テキストのところにコードを貼り付けます。
テキストのところに下記のコードをコピーして、貼り付けます。
<span class="mawaru-mozi1">文字が回る（基本）</span>
貼り付けました。
右側の「公開」を押します。
「OK」を押します。
右上の「変更をプレビュー」を押します。
「文字を回すHTMLとCSSを使ってする方法」の
文字の上にマウスの矢印をのせると文字が回ることを確認します。
↑じょうまさふみに学習状況を報告すると喜びます(^^)/
HTMLとCSSの説明
CSS
/*文字が回る（基本）*/
.mawaru-mozi1 {
display: inline-block; /*位置*/
transition: all 1s ease 0s; /*変化時間*/
text-decoration: none; /*文字の装飾なし*/
}
.mawaru-mozi1:hover {
transform: rotateZ( 360deg ); /*Z回転の設定*/
}
HTML
<span class="mawaru-mozi1">文字が回る（基本）</span>
「display」は、文字の位置を指定するためのCSSコードです。
「transition」の数字が大きくなるほど、文字が回るのに時間がかかります。
「text-decoration」のところは文字の装飾するためのCSSコードです。
「transform」は、文字をどれくらい大きくするかを設定するCSSコードです。
「rotateZ」は、回転を設定するCSSコードです。
「rotateZ」を「rotateX」に変えると、縦回転します。
「rotateZ」を「rotateY」に変えると、横回転します。
文字が回る記入例
文字が回る（基本）
CSS
/*文字が回る（基本）*/
.mawaru-mozi1 {
display: inline-block; /*位置*/
transition: all 1s ease 0s; /*変化時間*/
text-decoration: none; /*文字の装飾なし*/
}
.mawaru-mozi1:hover {
transform: rotateZ( 360deg ); /*Z回転の設定*/
}
HTML
<span class="mawaru-mozi1">文字が回る（基本）</span>
記事をプレビュー表示したとき
文字が回る（基本）
文字が回る（太字）
CSS
/*文字が回る（太字）*/
.mawaru-mozi2 {
display: inline-block; /*位置*/
transition: all 1s ease 0s; /*変化時間*/
text-decoration: none; /*文字の装飾なし*/
font-weight: bold; /*太字*/
}
.mawaru-mozi2:hover {
transform: rotateZ( 360deg ); /*Z回転の設定*/
}
HTML
<span class="mawaru-mozi2">文字が回る（太字）</span>
記事をプレビュー表示したとき
文字が回る（太字）
文字が回る（色付き）
CSS
/*文字が回る（色付き）*/
.mawaru-mozi3 {
display: inline-block; /*位置*/
transition: all 1s ease 0s; /*変化時間*/
text-decoration: none; /*文字の装飾なし*/
color: red; /*文字の色*/
}
.mawaru-mozi3:hover {
transform: rotateZ( 360deg ); /*Z回転の設定*/
}
HTML
<span class="mawaru-mozi3">文字が回る（色付き）</span>
記事をプレビュー表示したとき
文字が回る（色付き）
文字が回る（リンク付き）
CSS
/*文字が回る（リンク付き）*/
.mawaru-mozi4 {
display: inline-block; /*位置*/
transition: all 1s ease 0s; /*変化時間*/
text-decoration: none; /*文字の装飾なし*/
color: black; /*文字の色*/
}
.mawaru-mozi4:hover {
transform: rotateZ( 360deg ); /*Z回転の設定*/
}
HTML
<span class="mawaru-mozi4"><a href="ここにリンクのURLを入れます" rel="noopener" target="_blank">文字が回る（リンク付き）</a></span>
記事をプレビュー表示したとき
文字が回る（大きい文字）
CSS
/*文字が回る（大きい文字）*/
.mawaru-mozi5 {
display: inline-block; /*位置*/
transition: all 1s ease 0s; /*変化時間*/
text-decoration: none; /*文字の装飾なし*/
color: black; /*文字の色*/
font-size: 1.5em; /*文字の大きさ*/
}
.mawaru-mozi5:hover {
transform: rotateZ( 360deg ); /*Z回転の設定*/
}
HTML
<span class="mawaru-mozi5">文字が回る（大きい文字）</span>
記事をプレビュー表示したとき
文字が回る（大きい文字）
文字が回る（下線付き）
CSS
/*文字が回る（下線付き）*/
.mawaru-mozi6 {
display: inline-block; /*位置*/
transition: all 1s ease 0s; /*変化時間*/
text-decoration: underline; /*文字の装飾なし*/
color: black; /*文字の色*/
}
.mawaru-mozi6:hover {
transform: rotateZ( 360deg ); /*Z回転の設定*/
}
HTML
<span class="mawaru-mozi6">文字が回る（下線付き）</span>
記事をプレビュー表示したとき
文字が回る（下線付き）
文字が回る（マーカー付き）
CSS
/*文字が回る（マーカー付き）*/
.mawaru-mozi7 {
display: inline-block; /*位置*/
transition: all 1s ease 0s; /*変化時間*/
text-decoration: none; /*文字の装飾なし*/
color: black; /*文字の色*/
background: linear-gradient(transparent 0%, yellow 100%); /*マーカー色*/
}
.mawaru-mozi7:hover {
transform: rotateZ( 360deg ); /*Z回転の設定*/
}
HTML
<span class="mawaru-mozi7">文字が回る（マーカー付き）</span>
記事をプレビュー表示したとき
文字が回る（マーカー付き）
文字が回る（もっと回る）
CSS
/*文字が回る（もっと回る）*/
.mawaru-mozi8 {
display: inline-block; /*位置*/
transition: all 1s ease 0s; /*変化時間*/
text-decoration: none; /*文字の装飾なし*/
color: black; /*文字の色*/
}
.mawaru-mozi8:hover {
transform: rotateZ( 720deg ); /*Z回転の設定*/
}
HTML
<span class="mawaru-mozi8">文字が回る（もっと回る）</span>
記事をプレビュー表示したとき
文字が回る（もっと回る）
文字が回る（縦回転）
CSS
/*文字が回る（縦回転）*/
.mawaru-mozi9 {
display: inline-block; /*位置*/
transition: all 1s ease 0s; /*変化時間*/
text-decoration: none; /*文字の装飾なし*/
color: black; /*文字の色*/
}
.mawaru-mozi9:hover {
transform: rotateX( 360deg ); /*X回転の設定*/
}
HTML
<span class="mawaru-mozi9">文字が回る（縦回転）</span>
記事をプレビュー表示したとき
文字が回る（縦回転）
文字が回る（横回転）
CSS
/*文字が回る（横回転）*/
.mawaru-mozi10 {
display: inline-block; /*位置*/
transition: all 1s ease 0s; /*変化時間*/
text-decoration: none; /*文字の装飾なし*/
color: black; /*文字の色*/
}
.mawaru-mozi10:hover {
transform: rotateY( 360deg ); /*Y回転の設定*/
}
HTML
<span class="mawaru-mozi10">文字が回る（横回転）</span>
記事をプレビュー表示したとき
文字が回る（横回転）