- 投稿日：2021-08-27T14:50:07+09:00
CSS実践(8) 「利用頻度の高いテキストスタイル設定」
本記事は筆者の独学のメモ書きのようなものなので、 読者の皆様は参考にしないで下さい。 あくまで、筆者の復習用です。 目次 1.はじめに 2.color 3.font-size 4.font-weight 5.text-align 6.text-decoration 7.おわりに 1. はじめに 本記事では、CSSの「利用頻度の高いテキストスタイル設定」について記載する。 なお、以下例題に対し、HTMLファイルは共通して以下を使用する。 【サンプル】 index.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>初めてのCSS</title> <link rel="stylesheet" href="css/style.css" /> </head> <body> <h1>テキストのスタイル</h1> <p> 残暑きびしい日々が続いておりますが、いかがお過ごしでしょうか。<br />体調に気を配り、お過ごしください。 </p> </body> </html> 【表示例】 2. color ・文字色を指定する際に使用する。 ・#000000などの記述やカラーネームで色指定する。 背景色を指定する際はbackground-colorなので、colorと混同しないこと。 【サンプル】 styles.css h1 { color: blue; } p { color: #6495e6; } 【表示例】 3. font-size フォントのサイズを指定する際に使用する。 使用凡例 数値で指定 ・数値にpxやemやexなどの単位をつけて指定する。 ・pxとは1ピクセルを1とする単位で、実際に表示されるサイズは72dpiや96dpiといったモニタの解像度により変化する。 ・emとはフォントの高さを1とする単位。 ・exとは小文字の｢x｣の高さを1とする単位。 ・数値には負の値は指定できません。 ％で指定 ％値で指定する。 キーワードで指定 ・xx-small、x-small、small、medium、large、x-large、xx-largeの7段階があり、mediumが標準サイズ。 ・1段階上がると1.2倍のサイズになる。 ・smaller、largerを指定すると大きさが1段階上下する。 【サンプル】 styles.css h1 { font-size: 64px; } p { font-size: 20px; } 【表示例】 <サイズ変更前> <サイズ変更後> 4. font-weight フォントの太さを指定する際に使用する。 使用凡例 数値で指定 ・100、200、300、400、500、600、700、800、900でフォントの太さを指定する。 ・太さが9種類用意されているフォントはあまりないため、数値を上下させても太さが変化しないことがある。 ・標準の太さは400で、数値が小さくなるほど細く、大きくなるほど太くなる。 キーワードで指定 normal …… 標準の太さ。（数値で400を指定した場合と同じ） bold …… 一般的な太字の太さ。（数値で700を指定した場合と同じ） lighter …… 相対的に一段階細くする。 bolder …… 相対的に一段階太くする。 【サンプル】 styles.css p { font-weight: bold; } 【表示例】 <変更前> <変更後> 5. text-align ブロックコンテナ内の行の揃え位置・均等割付を指定する際に使用する。 【サンプル】 styles.css h1 { text-align: right; } p { text-align: left; } 【表示例】 <変更前> <変更後> 中央揃えにしたい際は、text-align: center;とする。 6. text-decoration テキスト傍線のつけ方・色・スタイルをまとめて指定する際に使用する。 使用凡例 text-decoration-line テキストに傍線をつける際に使用する。 none 何もしない。テキストへの傍線について生成も禁止もしない（初期値） underline 行に下線を引く。 overline 行に上線を引く。 line-through 行の中央を通る線を引く。 blink テキストが点滅する。 ext-decoration-lineのサンプル ※noneは初期値なので省略。また、Chromeではblinkはサポートされていないようなので未記載 【underline】 styles.css h1 { text-decoration-line: underline; } 【表示例】 【overline】 styles.css h1 { text-decoration-line: overline; } 【表示例】 【line-through】 styles.css h1 { text-decoration-line: line-through; } 【表示例】 text-decoration-style text-decoration-lineプロパティでテキストにつけた傍線のスタイルを指定する際に使用する。 solid:実線（初期値） double:二重線 dotted:点線 dashed:破線 wavy:波線 text-decoration-lineのサンプル ※今回は”text-decoration-lineプロパティ”はunderlineで記載 【solid】 styles.css h1 { text-decoration-line: underline; text-decoration-style: solid; } 【表示例】 【double】 styles.css h1 { text-decoration-line: underline; text-decoration-style: double; } 【表示例】 【dotted】 styles.css h1 { text-decoration-line: underline; text-decoration-style: dotted; } 【表示例】 【dashed】 styles.css h1 { text-decoration-line: underline; text-decoration-style: dashed; } 【表示例】 【wavy】 styles.css h1 { text-decoration-line: underline; text-decoration-style: wavy; } 【表示例】 text-decoration-color text-decoration-lineプロパティでテキストにつけた傍線の色を指定する際に使用する。 #000000（完全な黒）～#ffffff（完全な白）、 カラーネーム、 RGB などで色を指定。 【カラーネーム】 styles.css h1 { text-decoration-line: underline; text-decoration-color: red; } 【表示例】 【RGB】 styles.css h1 { text-decoration-line: underline; text-decoration-color: #649564; } 【表示例】 7. おわりに 本記事で説明不足な点もあると思うので、以下MDN参照リンクあり。 MDNのリンク:https://developer.mozilla.org/ja/
- 投稿日：2021-08-27T12:35:25+09:00
CSSアニメーションでPC-98の文字点滅を再現する
社内の面倒くさいことを処理するシステムをちょこちょこ書いているとき、なぜか「ここは点滅したほうがいいな」などとレトロなことを考えたりするものである。 文字が点滅するなんて表現、今どきなかなかお目にかかることはない。業務情報に（権限さえあれば）外出先でスマホで見れるレシポンシブWebサイトでありながら画面上で文字が点滅する、この違和感は圧倒的なものだ。否応なしに注目させることができる。だからエラー表示にはちょうどいい、と、こういうわけだ。 そしてどうせなら、自分がプログラミングを始めた頃の、昔懐かしいA寝台、もとい国民機PC-9801の点滅を再現してみよう、と考えるのは、オッサンとしては当然の成り行きだろう。 PC-9801では文字カーソルが0.5秒ごとに点、滅、点、滅、を繰り返す。 文字点滅は、カーソルが点、滅、点のあとの滅のタイミングで文字が消え、次の点のタイミングで文字も表示される。この繰り返しだ。富士通FMシリーズの点滅と比べるとかなりゆったりしている。 つまり全体が2秒で、1.5秒から2.0秒までの0.5秒間だけ文字が消える、この繰り返しの表現をすればいい。 これをCSSで表現するのはなにも難しいことはない。 style.css .blink { animation: blink 2s step-end infinite; } @keyframes blink { 0% { opacity: 1 } 75% { opacity: 0 } } index.html <html> <body> <span class="blink">この文字は点滅します</span> </body> </html> 以上だ。必要に応じて文字色を変えてやればいいだろう。 ただし背景色の扱いについては少し疑問が残っている。 このCSSで background-color を指定すると、背景色も含めて点滅するのだが、PC-9801ではどうだっただろうか。私の記憶では背景色は表示されたまま文字だけ点滅が正しい動きだったと思うが、さすがに PC-9801 の実機は手元にないので確認できていない。
- 投稿日：2021-08-27T09:58:12+09:00
cssで要素を下から上に表示させる
cssで要素を下から上に表示させる方法になります。 各記述した内容の、解説もしております！ 記述を変えれば、表示させる開始時間など変えられます。 例)コード 太郎を下から上に表示させます。 こちらは ・最初は表示されていない ・1秒後にアニメーション開始 ・下から上に0.5秒で表示させる HTML <p class="name">太郎<p> css .name { opacity:0; animation-name:anime; animation-duration:0.5s; animation-delay: 1s; animation-iteration-count: 1; animation-fill-mode: forwards; } @keyframes anime { 0% { opacity: 0; transform: translateY(30px); } 100%{ opacity: 1; transform: translateY(0); } } 解説 css name { opacity:0; #要素の不透明度を設定.0は透明 animation-name:anime; #@keyframesと同じ名前の必要あり animation-duration: 0.5s; #アニメーション周期が完了するまでの所要時間を設定します。0.5だと素早くで画面に表示されます。5sだと５秒かけてゆっくり表示されます。 animation-delay: 1ｓ; #アニメーションが起動するまでの時間。5sにすると画面更新5秒後にアニメーションが開始する。 animation-iteration-count: 1; #アニメーションが再生される回数を指定します。 animation-fill-mode: forwards; #アニメーション再生中・再生後のスタイルを指定します。こちらは、再生後、最後のキーフレーム（100%）のスタイルが適用される。 } @keyframes anime { #@animation-nameと同じ名前の必要あり、今回は「anime」 0% { opacity: 0; transform: translateY(30px); #0%なので、アニメーション始まった際に、transform: translateY(30px);の場所にアイテムが配置される } 100%{ opacity: 1; transform: translateY(0); #100%なので、アニメーション終わった際に、transform: translateY(０0x);の場所にアイテムが配置される } }