次は、文字の上にマウスの矢印をのせると大きくなる文字をHTMLとCSSを使ってする方法をします。
文字が大きくなるHTMLとCSSを使ってする方法
ワードプレスの管理画面を開きます。
左上の「投稿」を押します。
左上の「新規追加」を押します。
左上の「タイトルを追加」に「文字が大きくなるHTMLとCSSを使ってする方法」と入力します。
右側の「テキスト」を押します。
テキストのところにコードを貼り付けます。
テキストのところに下記のコードをコピーして、貼り付けます。
<span class="ookikunaru-mozi1">大きくなる文字（基本）</span>
貼り付けました。
右側の「公開」を押します。
「OK」を押します。
右上の「変更をプレビュー」を押します。
「文字が大きくなるHTMLとCSSを使ってする方法」の
文字の上にマウスの矢印をのせると文字が大きくなることを確認します。
↑じょうまさふみに学習状況を報告すると喜びます(^^)/
HTMLとCSSの説明
CSS
/*文字が大きくなる（基本）*/
.ookikunaru-mozi1 {
display: inline-block; /*位置*/
transition: all .3s ease 0s; /*変化時間*/
text-decoration: none; /*文字の装飾なし*/
}
.ookikunaru-mozi1:hover {
cursor: default; /*マウスのカーソル設定*/
transform: scale(1.2); /*大きくなる大きさ*/
}
HTML
<span class="ookikunaru-mozi1">大きくなる文字（基本）</span>
「display」は、文字の位置を指定するためのCSSコードです。
「transition」の数字が大きくなるほど、文字が大きくなるのに時間がかかります。
「text-decoration」のところは文字の装飾するためのCSSコードです。
「cursor」は、文字の上にマウスの矢印をのせたときのカーソルの形を設定するためのCSSコードです。
「transform」は、文字をどれくらい大きくするかを設定するCSSコードです。
「Scale(1.2)」の、「1.2」の数字を大きくすると、マウスを文字の上にのせたときの大きさを大きくすることができます。
cursor説明
今回、矢印の設定に使ったcursorの説明をします。
文字の上にマウスの矢印をのせたきにカーソルの形を設定するためのCSSコードです。
cursorの記入方法は、25種類あります。
| auto | ブラウザが自動的に選択したカーソル |
| default | 標準のカーソル |
| pointer | リンクのカーソル |
| crosshair | 十字のカーソル |
| move | 移動のカーソル |
| text | テキスト編集のカーソル |
| wait | 待機と処理中のカーソル |
| help | ヘルプのカーソル |
| n-resize | 北向きのリサイズカーソル |
| s-resize | 南向きのリサイズカーソル |
| w-resize | 西向きのリサイズカーソル |
| e-resize | 東向きのリサイズカーソル |
| ne-resize | 北東向きのリサイズカーソル |
| nw-resize | 北西向きのリサイズカーソル |
| se-resize | 南東向きのリサイズカーソル |
| sw-resize | 南西向きのリサイズカーソル |
| progress | 進行中のカーソル |
| url('ファイルのURL') | オリジナルのカーソル |
| hand | 指のカーソル |
| no-drop | ドロップ禁止のカーソル |
| all-scroll | 全スクロールのカーソル |
| col-resize | 横方向のリサイズカーソル |
| row-resize | 縦方向のリサイズカーソル |
| not-allowed | 禁止のカーソル |
| vertical-text | 縦書きのカーソル |
文字が大きくなる記入例
文字が大きくなる（基本）
CSS
/*文字が大きくなる（基本）*/
.ookikunaru-mozi1 {
display: inline-block; /*位置*/
transition: all .3s ease 0s; /*変化時間*/
text-decoration: none; /*文字の装飾なし*/
}
.ookikunaru-mozi1:hover {
cursor: default; /*マウスのカーソル設定*/
transform: scale(1.2); /*大きくなる大きさ*/
}
HTML
<span class="ookikunaru-mozi1">大きくなる文字（基本）</span>
記事をプレビュー表示したとき
大きくなる文字（基本）
文字が大きくなる（太字）
CSS
/*文字が大きくなる（太字）*/
.ookikunaru-mozi2 {
display: inline-block; /*位置*/
transition: all .3s ease 0s; /*変化時間*/
text-decoration: none; /*文字の装飾なし*/
font-weight: bold; /*太字*/
}
.ookikunaru-mozi2:hover {
cursor: default; /*マウスのカーソル設定*/
transform: scale(1.2); /*大きくなる大きさ*/
}
HTML
<span class="ookikunaru-mozi2">大きくなる文字（太字）</span>
記事をプレビュー表示したとき
大きくなる文字（太字）
文字が大きくなる（色付き）
CSS
/*文字が大きくなる（色付き）*/
.ookikunaru-mozi3 {
display: inline-block; /*位置*/
transition: all .3s ease 0s; /*変化時間*/
text-decoration: none; /*文字の装飾なし*/
color: red; /*文字の色*/
}
.ookikunaru-mozi3:hover {
cursor: default; /*マウスのカーソル設定*/
transform: scale(1.2); /*大きくなる大きさ*/
}
HTML
<span class="ookikunaru-mozi3">大きくなる文字（色付き）</span>
記事をプレビュー表示したとき
大きくなる文字（色付き）
文字が大きくなる（リンク付き）
CSS
/*文字が大きくなる（リンク付き）*/
.ookikunaru-mozi4 {
display: inline-block; /*位置*/
transition: all .3s ease 0s; /*変化時間*/
text-decoration: none; /*文字の装飾なし*/
color: black; /*文字の色*/
}
.ookikunaru-mozi4:hover {
cursor: default; /*マウスのカーソル設定*/
transform: scale(1.2); /*大きくなる大きさ*/
}
HTML
<span class="ookikunaru-mozi4"><a href="ここにリンクのURLを入れます" rel="noopener" target="_blank">大きくなる文字（リンク付き）</a></span>
記事をプレビュー表示したとき
文字が大きくなる（大きい文字）
CSS
/*文字が大きくなる（大きい文字）*/
.ookikunaru-mozi5 {
display: inline-block; /*位置*/
transition: all .3s ease 0s; /*変化時間*/
text-decoration: none; /*文字の装飾なし*/
color: black; /*文字の色*/
font-size: 1.5em; /*文字の大きさ*/
}
.ookikunaru-mozi5:hover {
cursor: default; /*マウスのカーソル設定*/
transform: scale(1.2); /*大きくなる大きさ*/
}
HTML
<span class="ookikunaru-mozi5">大きくなる文字（大きい文字）</span>
記事をプレビュー表示したとき
大きくなる文字（大きい文字）
文字が大きくなる（下線付き）
CSS
/*文字が大きくなる（下線付き）*/
.ookikunaru-mozi6 {
display: inline-block; /*位置*/
transition: all .3s ease 0s; /*変化時間*/
text-decoration: underline; /*文字の装飾なし*/
color: black; /*文字の色*/
}
.ookikunaru-mozi6:hover {
cursor: default; /*マウスのカーソル設定*/
transform: scale(1.2); /*大きくなる大きさ*/
}
HTML
<span class="ookikunaru-mozi6">大きくなる文字（下線付き）</span>
記事をプレビュー表示したとき
大きくなる文字（下線付き）
文字が大きくなる（マーカー付き）
CSS
/*文字が大きくなる（マーカー付き）*/
.ookikunaru-mozi7 {
display: inline-block; /*位置*/
transition: all .3s ease 0s; /*変化時間*/
text-decoration: none; /*文字の装飾なし*/
color: black; /*文字の色*/
background: linear-gradient(transparent 0%, yellow 100%); /*マーカー色*/
}
.ookikunaru-mozi7:hover {
cursor: default; /*マウスのカーソル設定*/
transform: scale(1.2); /*大きくなる大きさ*/
}
HTML
<span class="ookikunaru-mozi7">大きくなる文字（マーカー付き）</span>
記事をプレビュー表示したとき
大きくなる文字（マーカー付き）
文字が大きくなる（もっと大きく）
CSS
/*文字が大きくなる（もっと大きく）*/
.ookikunaru-mozi8 {
display: inline-block; /*位置*/
transition: all .3s ease 0s; /*変化時間*/
text-decoration: none; /*文字の装飾なし*/
color: black; /*文字の色*/
}
.ookikunaru-mozi8:hover {
cursor: default; /*マウスのカーソル設定*/
transform: scale(2.0); /*大きくなる大きさ*/
}
HTML
<span class="ookikunaru-mozi8">大きくなる文字（もっと大きく）</span>
記事をプレビュー表示したとき
大きくなる文字（もっと大きく）