overflowプロパティについて覚えたので備忘録 値は主に４つ 1. [visible] ボックスからはみ出した要素がそのまま表示される、初期値 2. [hidden] ボックスからはみ出した要素は表示されない 3. [scroll] ボックスからはみ出した要素は表示されないがスクロールすることで表示される 4. [auto] はみ出した要素の処理がブラウザに依存する、基本的にはスクロールすることで表示される 補足として 1. overflow-x: scroll; x軸（横方向）にのみスクロールさせる 2. overflow-y: scroll; y軸（縦方向）にのみスクロールさせる 文字列が横に長いが折り返しさせたくない ＋ 項目がボックス内に収まらない 上記のような場合に使用検討できる
overflowプロパティについて覚えたので備忘録
値は主に４つ 1. [visible] ボックスからはみ出した要素がそのまま表示される、初期値 2. [hidden] ボックスからはみ出した要素は表示されない 3. [scroll] ボックスからはみ出した要素は表示されないがスクロールすることで表示される 4. [auto] はみ出した要素の処理がブラウザに依存する、基本的にはスクロールすることで表示される
補足として 1. overflow-x: scroll; x軸（横方向）にのみスクロールさせる 2. overflow-y: scroll; y軸（縦方向）にのみスクロールさせる
文字列が横に長いが折り返しさせたくない ＋ 項目がボックス内に収まらない 上記のような場合に使用検討できる
はじめに こちらは 180日でWeb開発者になる方法(コンピューターサイエンスの学位なしで) を参考にSESエンジニアがWeb開発できるまでの備忘録です。 夏ですね。私は夏休み3日しか与えられないですがまあ頑張っていきます。 今回はHeadについてより知ることができたらと思います。 ソースは基本atomで書いています。 何を学べたか？ h1タグとtitleの違い 文字コードの設定（UTF-8とかありましたね） 作成者の記載を組み込む（SEOとかこれが該当していると知れました） ウェブページのソースを見ること（mata name以外にもリンク等大量にソースがあって参考になりました。） atomのブックマーク登録方法(ctrl+ALT+F2)とブックマーク表示(ctrl+F2)
こちらは 180日でWeb開発者になる方法(コンピューターサイエンスの学位なしで) を参考にSESエンジニアがWeb開発できるまでの備忘録です。 夏ですね。私は夏休み3日しか与えられないですがまあ頑張っていきます。 今回はHeadについてより知ることができたらと思います。 ソースは基本atomで書いています。
テキストがコンテンツ領域から溢れる際、 表示範囲に合わせて改行するか、単語の切れ目で改行するかなど、テキストの改行の仕方について指定できるプロパティword-bleak。 word-break: break-all;はテキストのどこでも（単語の途中でも）改行する指定ですが……… してない。 特定の半角記号ではword-break: break-all;が効いてくれない様です。 （感嘆符やコロン、スラッシュなど。Chromeで確認） word-break: break-word; で解決 word-break: break-word;の指定により半角記号も折り返しが適用されます。 しかしIEとEdgeが非対応。 IEはともかくEdgeも対応したいところです… 良い対応方法があったら続報出します。
テキストがコンテンツ領域から溢れる際、 表示範囲に合わせて改行するか、単語の切れ目で改行するかなど、テキストの改行の仕方について指定できるプロパティword-bleak。
word-bleak
word-break: break-all;はテキストのどこでも（単語の途中でも）改行する指定ですが………
word-break: break-all;
特定の半角記号ではword-break: break-all;が効いてくれない様です。 （感嘆符やコロン、スラッシュなど。Chromeで確認）
word-break: break-word;の指定により半角記号も折り返しが適用されます。
word-break: break-word;
しかしIEとEdgeが非対応。 IEはともかくEdgeも対応したいところです… 良い対応方法があったら続報出します。
Label 内で任意に改行したい！ Label 内で br タグを入れても改行されないので、改行する方法を調べたので忘備録として残しておきます。 css の white-space を使う https://developer.mozilla.org/ja/docs/Web/CSS/white-space pre-line と 改行コードで任意改行 label.br-label { white-space: pre-line; } <label class="br-label">改行を 含むラベル</label> CSS は便利ですね！ ブラウザーの互換性
Label 内で br タグを入れても改行されないので、改行する方法を調べたので忘備録として残しておきます。
https://developer.mozilla.org/ja/docs/Web/CSS/white-space
label.br-label { white-space: pre-line; }
<label class="br-label">改行を 含むラベル</label>
CSS は便利ですね！
復習 buttonタグ 新しタブへ index.html <button class="btn" onclick="window.open('リンク先')">ボタン</button> 同じタブ index.html <button class="btn" onclick="window.location.href='リンク先'">ボタン</button>
<button class="btn" onclick="window.open('リンク先')">ボタン</button>
<button class="btn" onclick="window.location.href='リンク先'">ボタン</button>
目的 ユーザーの入力値取得や表示ができるようになる。 今日やること getElementByIdやaddEventListenerやinnerHTMLについて理解を深める CSSでマウスホバーやセレクタを正しく選択できるようにする。 ゴールイメージ テキストエリアに自然数をいれるとわにさんがプールに放たれる。 HTML このような感じでつくってみました。 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>わにわにわにさん</title> <link rel="stylesheet" href="gators.css"> </head> <body> <form action="javascript:void(0)" method="post"> <p>わにさん何匹放つ？</p> <input type="text" id="number"> <input id = "id-submit" type="submit" value="Unleash gators"> </form> <div> <p id ="gatorPool" ></p> </div> <script src="gators.js"></script> </body> </html> 画面が一瞬消えるんだけど？（初見ホイホイ案件） 下記のようなコードの場合、submitした瞬間にaction="#"が呼ばれてしまう。 もう少し詳しくいうと、#はそのページの最上部を意味しているので、 index.htmlがリロードされ、その結果一瞬表示されるが最終的にはリフレッシュされた画面が表示される。 index.html ... <form action="#" method="post"> <p>わにさん何匹放つ？</p> <input type="text" id="number"> <input id = "id-submit" type="submit" value="Unleash gators"> </form> ... 解決① action="javascript:void(0)"とする void 演算子は式を評価し、評価した結果必ず undefind 値を返します。 action値に undefind 値を指定した場合には何も動作しません。 解決② event.preventDefault()とする ブラウザが持つデフォルトの動作をキャンセルします。 フォーム送信して送信先のページに遷移する動作がキャンセルされます。 でも、ブラウザのデフォルトの動作をキャンセルするなら逆に面倒かもしれない。 この辺りの使い分けはまだわかっていません。ごめんなさい。 Javascript このような感じでつくってみました。 gatorPool.js let sub = document.getElementById('id-submit') sub.addEventListener("click", () => { const numberOfGators = document.getElementById('number').value; if (isNaN(numberOfGators)) { alert('数字のみを入力してください'); } if(numberOfGators<=0 || Number.isInteger(numberOfGators)){ alert('自然数で入力してください') } let addGators = ""; for (let i = 0; i < numberOfGators; i++) { addGators += '?'; } document.getElementById("gatorPool").innerHTML = addGators }) にクリックイベントが発生した際の動作を作り、その中の処理を書いていきます。 1:イベント発火させる記述を作るために、<input id="submit"...>を取得 2-1:イベント発火時の処理を書く：ユーザーの入力値を取得 2-2:イベント発火時の処理を書く：値を表示 2-3:イベント発火時の処理を書く：ユーザーに正しい入力値を促す ユーザーのイベント発火時の操作を作る。 イベント発火はこちらを使います。 element.addEventListener(eventhadle,callback) addEventListenerメソッドは、特定のイベントが対象に配信されるたびに呼び出される関数を設定します。 対象としてよくあるものは Element, Document, Window ですが、イベントに対応したあらゆるオブジェクトが対象になることができます (XMLHttpRequestなど)。引用：MDN また、element:イベント発火するHTML要素を取得します。 eventhandle：どのイベント（ユーザーがWEB上でのクリックなどの操作）をしたときに反応するかを決めます。イベントハンドラの一覧はこちらを参考にしてみてください。 イベント発火するHTML要素を取得 イベントは<input id="submit"...>で起こるので、発火させるためにHTMLを取得します。 HTMLの取得は、document.getElementById("")を使います。 Document の getElementById() メソッドは、id プロパティが指定された文字列に一致する要素を表す Element オブジェクトを返します。要素の ID は指定されていれば固有であることが求められているため、特定の要素にすばやくアクセスするには便利な方法です。引用：MDN gatorPool.js let sub = document.getElementById('id-submit') このsubを使って、クリックイベントで発火する処理を書きます。 gatorPool.js let sub = document.getElementById('id-submit') sub.addEventListener("click", () => { //この中に、clickしたときの処理を書く } document.getElementByIdのNullの対処 解決① ID名は間違っていないか 指定されたIDが見つからなかった場合、Nullを返します。 解決② HTMLを見た時に、Jsファイルで扱うHTMLの前に、jsファイルを呼び込んでいないか JSファイルは置かれる前までのHTML要素を探すので、 指定したIDが<script src="gatorsPool.js"></script>の後ろにある場合、Nullを返します。 OK <input id = "submit"> ... <script src="gatorsPool.js"></script> //subは<input id = "submit"> NG <script src="gatorsPool.js"></script> //subがNull ... <input id = "submit"> イベント発火時の処理を書く ユーザー入力値の取得 クリックで発火する関数は作れたので、発火時の処理を書いていきましょう。 ユーザー入力値を取得するには、こちらを使います。 document.getElementById('id').value gatorPool.js let sub = document.getElementById('id-submit') sub.addEventListener("click", () => { const numberOfGators = document.getElementById('number').value; } 入力値によってわにを放つ数を変更したいので、入力値に応じたわにの文字列を作ります。 gatorPool.js let sub = document.getElementById('id-submit') sub.addEventListener("click", () => { const numberOfGators = document.getElementById('number').value; let addGators = ""; for (let i = 0; i < numberOfGators; i++) { addGators += '?'; } } 値を出力する 値をHTMLに出力するには、こちらを使います。 element.innerHTML こちらもgetElementByIdと同様に、書き換えたいHTML要素が必要なので取得して貼り付けます。 今回は、subのように分割せずに、document.getElementByIdで取得したHTML要素をinnerHTMLに渡しています。 gatorPool.js let sub = document.getElementById('id-submit') sub.addEventListener("click", () => { const numberOfGators = document.getElementById('number').value; let addGators = ""; for (let i = 0; i < numberOfGators; i++) { addGators += '?'; } document.getElementById("gatorPool").innerHTML = addGators }) ユーザに正しい入力を促す 残りは、正しい入力を促すための条件分岐を記載します。 ０以下、英文字は弾けますが、小数点に対応できていません?♂️ gatorPool.js let sub = document.getElementById('id-submit') sub.addEventListener("click", () => { const numberOfGators = document.getElementById('number').value; if (isNaN(numberOfGators)) { alert('数字のみを入力してください'); } if(numberOfGators<=0 || Number.isInteger(numberOfGators)){ alert('自然数で入力してください') } let addGators = ""; for (let i = 0; i < numberOfGators; i++) { addGators += '?'; } document.getElementById("gatorPool").innerHTML = addGators }) おつかれさまです！ Javascriptはこちらで終了です。 @vf8974 さまによりスマートな書き方を教えてきただきました！ ①ページ遷移しない場合は、inputではなく、buttonを使うとGOOD 変更前 <form action="javascript:void(0)" method="post"> <p>わにさん何匹放つ？</p> <input type="text" id="number"> <input id = "id-submit" type="submit" value="Unleash gators"> </form> 変更後 <form> <p>わにさん何匹放つ？</p> <input type="text" id="number"> <input id = "id-submit" type="button" value="Unleash gators"> </form> ②文字列の繰り返し処理は、 str.repeat(count)が便利！ 変更前 let addGators = ""; for (let i = 0; i < numberOfGators; i++) { addGators += '?'; } 変更後 const addGators = '?'.repeat(numberOfGators); おおー✨とてもシンプルで可読性が高いです！ CSS マウスを置いた際に表示を変えたい場合、:hoverを使います。 gatorPool.css form { /* display: flex; */ font-family:"游ゴシック","YuGothic"; margin: 0 auto; background-color:#6FB98F; width: 200px; height:200px; text-align: center; border-radius: 4px; } p{ padding:25px; } input{ font-family:"游ゴシック","YuGothic"; background-color:seashell; margin: 10px 0; border-bottom: solid 4px salmon; border-right: solid 4px sandybrown; border-radius: 4px; } input#id-submit:hover{ font-family:"游ゴシック","YuGothic"; background-color:snow; border-right:none; border-bottom: none; transform: translate3d(0, 3px, 0); border-radius: 4px; } div { margin: 0 auto; background-color:cornflowerblue; width: 300px; border-radius: 4px; } Tips 背景色を角丸にしてフォントを変えるとそれだけで画面にまとまりがでる気がします。 背景色角丸、フォント変更後 変更前
テキストエリアに自然数をいれるとわにさんがプールに放たれる。
このような感じでつくってみました。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>わにわにわにさん</title> <link rel="stylesheet" href="gators.css"> </head> <body> <form action="javascript:void(0)" method="post"> <p>わにさん何匹放つ？</p> <input type="text" id="number"> <input id = "id-submit" type="submit" value="Unleash gators"> </form> <div> <p id ="gatorPool" ></p> </div> <script src="gators.js"></script> </body> </html>
下記のようなコードの場合、submitした瞬間にaction="#"が呼ばれてしまう。
もう少し詳しくいうと、#はそのページの最上部を意味しているので、 index.htmlがリロードされ、その結果一瞬表示されるが最終的にはリフレッシュされた画面が表示される。
... <form action="#" method="post"> <p>わにさん何匹放つ？</p> <input type="text" id="number"> <input id = "id-submit" type="submit" value="Unleash gators"> </form> ...
ブラウザが持つデフォルトの動作をキャンセルします。
でも、ブラウザのデフォルトの動作をキャンセルするなら逆に面倒かもしれない。 この辺りの使い分けはまだわかっていません。ごめんなさい。
let sub = document.getElementById('id-submit') sub.addEventListener("click", () => { const numberOfGators = document.getElementById('number').value; if (isNaN(numberOfGators)) { alert('数字のみを入力してください'); } if(numberOfGators<=0 || Number.isInteger(numberOfGators)){ alert('自然数で入力してください') } let addGators = ""; for (let i = 0; i < numberOfGators; i++) { addGators += '?'; } document.getElementById("gatorPool").innerHTML = addGators })
にクリックイベントが発生した際の動作を作り、その中の処理を書いていきます。
1:イベント発火させる記述を作るために、<input id="submit"...>を取得 2-1:イベント発火時の処理を書く：ユーザーの入力値を取得 2-2:イベント発火時の処理を書く：値を表示 2-3:イベント発火時の処理を書く：ユーザーに正しい入力値を促す
<input id="submit"...>
イベント発火はこちらを使います。 element.addEventListener(eventhadle,callback)
addEventListenerメソッドは、特定のイベントが対象に配信されるたびに呼び出される関数を設定します。 対象としてよくあるものは Element, Document, Window ですが、イベントに対応したあらゆるオブジェクトが対象になることができます (XMLHttpRequestなど)。引用：MDN
また、element:イベント発火するHTML要素を取得します。 eventhandle：どのイベント（ユーザーがWEB上でのクリックなどの操作）をしたときに反応するかを決めます。イベントハンドラの一覧はこちらを参考にしてみてください。
イベントは<input id="submit"...>で起こるので、発火させるためにHTMLを取得します。 HTMLの取得は、document.getElementById("")を使います。
Document の getElementById() メソッドは、id プロパティが指定された文字列に一致する要素を表す Element オブジェクトを返します。要素の ID は指定されていれば固有であることが求められているため、特定の要素にすばやくアクセスするには便利な方法です。引用：MDN
let sub = document.getElementById('id-submit')
このsubを使って、クリックイベントで発火する処理を書きます。
let sub = document.getElementById('id-submit') sub.addEventListener("click", () => { //この中に、clickしたときの処理を書く }
指定されたIDが見つからなかった場合、Nullを返します。
JSファイルは置かれる前までのHTML要素を探すので、 指定したIDが<script src="gatorsPool.js"></script>の後ろにある場合、Nullを返します。
<script src="gatorsPool.js"></script>
<input id = "submit"> ... <script src="gatorsPool.js"></script> //subは<input id = "submit">
<script src="gatorsPool.js"></script> //subがNull ... <input id = "submit">
クリックで発火する関数は作れたので、発火時の処理を書いていきましょう。
ユーザー入力値を取得するには、こちらを使います。 document.getElementById('id').value
let sub = document.getElementById('id-submit') sub.addEventListener("click", () => { const numberOfGators = document.getElementById('number').value; }
入力値によってわにを放つ数を変更したいので、入力値に応じたわにの文字列を作ります。
let sub = document.getElementById('id-submit') sub.addEventListener("click", () => { const numberOfGators = document.getElementById('number').value; let addGators = ""; for (let i = 0; i < numberOfGators; i++) { addGators += '?'; } }
値をHTMLに出力するには、こちらを使います。 element.innerHTML こちらもgetElementByIdと同様に、書き換えたいHTML要素が必要なので取得して貼り付けます。 今回は、subのように分割せずに、document.getElementByIdで取得したHTML要素をinnerHTMLに渡しています。
let sub = document.getElementById('id-submit') sub.addEventListener("click", () => { const numberOfGators = document.getElementById('number').value; let addGators = ""; for (let i = 0; i < numberOfGators; i++) { addGators += '?'; } document.getElementById("gatorPool").innerHTML = addGators })
残りは、正しい入力を促すための条件分岐を記載します。 ０以下、英文字は弾けますが、小数点に対応できていません?♂️
おつかれさまです！ Javascriptはこちらで終了です。
<form action="javascript:void(0)" method="post"> <p>わにさん何匹放つ？</p> <input type="text" id="number"> <input id = "id-submit" type="submit" value="Unleash gators"> </form>
<form> <p>わにさん何匹放つ？</p> <input type="text" id="number"> <input id = "id-submit" type="button" value="Unleash gators"> </form>
let addGators = ""; for (let i = 0; i < numberOfGators; i++) { addGators += '?'; }
const addGators = '?'.repeat(numberOfGators);
おおー✨とてもシンプルで可読性が高いです！
マウスを置いた際に表示を変えたい場合、:hoverを使います。
:hover
form { /* display: flex; */ font-family:"游ゴシック","YuGothic"; margin: 0 auto; background-color:#6FB98F; width: 200px; height:200px; text-align: center; border-radius: 4px; } p{ padding:25px; } input{ font-family:"游ゴシック","YuGothic"; background-color:seashell; margin: 10px 0; border-bottom: solid 4px salmon; border-right: solid 4px sandybrown; border-radius: 4px; } input#id-submit:hover{ font-family:"游ゴシック","YuGothic"; background-color:snow; border-right:none; border-bottom: none; transform: translate3d(0, 3px, 0); border-radius: 4px; } div { margin: 0 auto; background-color:cornflowerblue; width: 300px; border-radius: 4px; }
背景色角丸、フォント変更後
変更前
どうも、7noteです。一般的なボタンの動きを実装していきます。 ホームぺージ制作ではボタンを実装することが多くあります。 その時にマウスカーソルが上に乗った時の動きが実装されてないと、ボタンかどうかわかりにくいので、 カーソルを重ねた時にボタンの色を少し薄くして、マウスカーソルの形を指のマークに変更します。 完成例 hover前 hover後 書き方 index.html <p>ボタン</p> style.css p { color: #FFF; /* 文字色は白 */ font-size: 20px; /* 文字サイズは20px */ width: 200px; /* ボタンの横幅を200pxに。 */ text-align: center; /* 文字は中央揃え */ background: #66F; /* ボタンの色を青っぽく */ padding: 10px 50px; /* 余白をつける */ } /*ここから下が、ホバーした時（マウスカーソルが要素の上に乗った時）のcss*/ p:hover { cursor: pointer; /* マウスカーソルを手の形にする */ opacity: 0.6; /* ボタンの透明度を60%にする */ } hover時の処理を書く時は、「:hover」と書きます。 例のように、pタグに書く場合は「p:hover」と書きますし、 何かのクラスに書く時も、「.abc:hover」と書きます。 まとめ 頻繁にhoverは使いますが、デザインデータにはhover時の処理について書かれていないこともあります。 そのときはホームページをコーディングする時に実装させなければなりません。 表面上だけみて、hover時のアクションを入れ忘れているなんてことはよくあることなので、 抜けないようにボタンには必ず今回のような動きをいれるのを忘れないようにしましょう！ おそまつ！ （コメント・質問・ソースの指摘等なんでもウェルカムです！初心者の方でも気軽に質問ください！）
ホームぺージ制作ではボタンを実装することが多くあります。 その時にマウスカーソルが上に乗った時の動きが実装されてないと、ボタンかどうかわかりにくいので、 カーソルを重ねた時にボタンの色を少し薄くして、マウスカーソルの形を指のマークに変更します。
hover前
hover後
<p>ボタン</p>
p { color: #FFF; /* 文字色は白 */ font-size: 20px; /* 文字サイズは20px */ width: 200px; /* ボタンの横幅を200pxに。 */ text-align: center; /* 文字は中央揃え */ background: #66F; /* ボタンの色を青っぽく */ padding: 10px 50px; /* 余白をつける */ } /*ここから下が、ホバーした時（マウスカーソルが要素の上に乗った時）のcss*/ p:hover { cursor: pointer; /* マウスカーソルを手の形にする */ opacity: 0.6; /* ボタンの透明度を60%にする */ }
hover時の処理を書く時は、「:hover」と書きます。 例のように、pタグに書く場合は「p:hover」と書きますし、 何かのクラスに書く時も、「.abc:hover」と書きます。
頻繁にhoverは使いますが、デザインデータにはhover時の処理について書かれていないこともあります。 そのときはホームページをコーディングする時に実装させなければなりません。 表面上だけみて、hover時のアクションを入れ忘れているなんてことはよくあることなので、 抜けないようにボタンには必ず今回のような動きをいれるのを忘れないようにしましょう！
（コメント・質問・ソースの指摘等なんでもウェルカムです！初心者の方でも気軽に質問ください！）
textarea、inputで値を取得して、表示させる時に改行を含めて表示させる方法です。 textareaで取得した値に改行が入らない 上記のようにデフォルトだと、textareに改行を入力しても、表示させる時に改行表示ができません。 white-space:pre-wrapを指定する <p style="white-space:pre-wrap;"></p> 表示させるHTMLにwhite-space:pre-wrapを指定することで、改行も表示させることができます。
textarea、inputで値を取得して、表示させる時に改行を含めて表示させる方法です。
上記のようにデフォルトだと、textareに改行を入力しても、表示させる時に改行表示ができません。
<p style="white-space:pre-wrap;"></p>
表示させるHTMLにwhite-space:pre-wrapを指定することで、改行も表示させることができます。
今回はHTMLの文字装飾方法の基礎9つについてまとめてみました。 HTMLの文字装飾方法の基礎9つ 文字の装飾は、基本的にはCSSでの記述で行いますのでそれぞれのCSSの書き方を解説していきます。 文字色を変更したい 文字色の指定は「color」プロパティを使用します。 セレクタ { color : 色; } 【例】pタグの文字色を赤色にする場合の指定方法 p { color : red; } また、色の指定方法は4つあります。 色名で指定 「red」「blue」「green」などの色の英語表記で指定ができます。 英語表記での指定可能なのは140種類あります。 HTMLリファレンス > WEBカラーリファレンス > カラーネーム140色 カラーコードで指定 「#」と6桁の16進数の組み合わせで各色に与えられたコードで指定します。 カラーコードが一目でわかるWEB色見本 原色大辞典 RGBで指定 赤、緑、青の3色を0〜255の数字で組み合わせて指定することができます。 RGBと16進数カラーコードの相互変換ツール peko-step RGBAで指定 RGBの指定方法に、さらに透過度を加えて指定することができます。 カラーコードを指定すると10種の透過度のRGBA形式に変換するジェネレーター rgba変換ジェネレーター 文字サイズを変更したい 文字色の指定は「font-size」プロパティを使用します。 セレクタ { font-size : 大きさ; } 【例】pタグの文字の大きさを24pxにする場合の指定方法 p { font-size : 24px; ) 文字の大きさの指定方法を4つご紹介します。 pxで指定 pxとは1ピクセルを1とする単位で指定することができます。 %で指定 親要素のfont-sizeに対して何%かで指定することができます。 emで指定 %と同じく親要素に対して相対的な大きさで指定することができます。 1em = 100% remで指定 emと同じく相対的な大きさで指定できるが、親要素ではなくルート（html）に対して相対的な大きさで指定することができる。 基本的にhtmlは16pxなので、1rem=16px となります。 html要素のサイズを変更すると1remの大きさも相対的に変わる。 フォントを変更したい 文字の太さの指定は「font-family」プロパティを使用します。 セレクタ { font-family : フォントの種類; } 【例】pタグのフォントをserifにする場合の指定方法 p { font-family : serif; ) フォントは複数指定する OSによって表示可能かどうかが異なるため、フォントは複数設定するのが一般的です。 また、複数設定した場合、前に書いたものが優先されます。 セレクタ { font-family : フォントA , フォントB , フォントC; } フォント間は「,」で区切ります。 「フォントA」がインストールされていたら「フォントA」で表示。 → なければ、次に「フォントB」がインストールされていたら「フォントB」で表示。 → それもなければ、次に「フォントC」がインストールされていたら「フォントC」で表示。 【例】実際の例です。前から優先されます。 p { font-family : "YuGothic","Yu Gothic","Meiryo","ヒラギノ角ゴ","sans-serif"; ) 最後に「総称ファミリー」を入れる 最後には必ず「総称ファミリー」を入れるようにしてください。 「総称ファミリー」とは、指定したフォントがいずれもインストールされていない場合に、どの系統のフォントで表示するかを指定してくれるフォントファミリーです。 serif ：明朝体系フォント sans-serif ：ゴシック体系フォント cursive ：筆記体系フォント fantasy ：装飾体系フォント monospace ： 等幅系フォント 太字にしたい 文字の太さの指定は「font-weight」プロパティを使用します。 セレクタ { font-weight : 太さ; } 【例】pタグの文字の太さを太字にする場合の指定方法 p { font-weight : bold; ) 文字の太さの指定方法も数値指定などの方法がいくつかありますが、細かく指定してもブラウザが対応していないこともあるためあまり使いません。 よく使われるのは以下の2つです。 bold font-weight : bold; で太文字になります。 normal font-weight : normal; で普通の太さになります。 斜体にしたい 文字の斜体指定は「font-style」プロパティを使用します。 セレクタ { font-style : italic; } 【例】pタグの文字を斜体にする場合の指定方法 p { font-style : italic; } 字間を変更したい 文字の間隔の指定は「letter-spacing」プロパティを使用します。 セレクタ { letter-spacing : 大きさ; } 【例】pタグの文字の間隔を10pxにする場合の指定方法 p { letter-spacing : 10px; } ここも大きさ指定は文字の大きさと同じくpx、em、remが使えます。 また、「-2px」のようにマイナスの数字を使うことで文字の間隔を狭めることも可能です。 下線を引きたい 文字に下線を引くには「text-decoration」プロパティを使用します。 セレクタ { text-decoration : underline; } 【例】pタグの文字に下線を引く場合の指定方法 p { text-decoration : underline; } この方法は基本的な下線の引き方ですので、下線の色は文字色と同じになります。 もし下線の色を変えたり、太さを変えたりしたい場合はborder-bottomプロパティを使うことで、そういった装飾が可能です。 取り消し線を引きたい 文字に取り消し線を引くには、同じく「text-decoration」プロパティを使用します。 セレクタ { text-decoration : line-through; } 【例】pタグの文字に取り消し線を引く場合の指定方法 p { text-decoration : line-through; } 線で囲みたい 文字に取り消し線を引くには「border」プロパティを使用します。 セレクタ { border : 線の太さ 線の種類 線の色; } 【例】pタグの文字に赤色で太さが3pxの実線で囲む場合の指定方法 p { border : 3px solid red; } 線の種類の中から、よく使われる4つをご紹介します。 ・solid 1本の実線で表示されます。 ・double 2本の実線で表示されます。 ・dashed 破線で表示されます。 ・dotted 点線で表示されます。 まとめ HTMLの文字装飾方法の基礎9つはHTML・CSSの学び始めでよく使いますので是非マスターしてください。 かずきち プログラミング学習サイト「ウェブカツ!!」の顧問。 不動産、保険の営業マンから、エンジニアへ転身。 「HTMLって何？」という状態から3ヶ月の独学のみでエンジニアへ転職し、１年で年収１千万を稼ぐエンジニアへ。 独学時代のプログラミング学習の分かりにくさや、「技術しか出来ずに稼げていないエンジニア」の現状を変えるため「ウェブカツ」を立ち上げ運営している。 【ウェブカツ公式WEBサイト】 https://webukatu.com/
今回はHTMLの文字装飾方法の基礎9つについてまとめてみました。
文字の装飾は、基本的にはCSSでの記述で行いますのでそれぞれのCSSの書き方を解説していきます。
文字色の指定は「color」プロパティを使用します。
セレクタ { color : 色; }
【例】pタグの文字色を赤色にする場合の指定方法
p { color : red; }
また、色の指定方法は4つあります。
「red」「blue」「green」などの色の英語表記で指定ができます。
英語表記での指定可能なのは140種類あります。 HTMLリファレンス > WEBカラーリファレンス > カラーネーム140色
英語表記での指定可能なのは140種類あります。
HTMLリファレンス > WEBカラーリファレンス > カラーネーム140色
「#」と6桁の16進数の組み合わせで各色に与えられたコードで指定します。
カラーコードが一目でわかるWEB色見本 原色大辞典
カラーコードが一目でわかるWEB色見本
原色大辞典
赤、緑、青の3色を0〜255の数字で組み合わせて指定することができます。
RGBと16進数カラーコードの相互変換ツール peko-step
RGBと16進数カラーコードの相互変換ツール
peko-step
RGBの指定方法に、さらに透過度を加えて指定することができます。
カラーコードを指定すると10種の透過度のRGBA形式に変換するジェネレーター rgba変換ジェネレーター
カラーコードを指定すると10種の透過度のRGBA形式に変換するジェネレーター
rgba変換ジェネレーター
文字色の指定は「font-size」プロパティを使用します。
セレクタ { font-size : 大きさ; }
【例】pタグの文字の大きさを24pxにする場合の指定方法
p { font-size : 24px; )
文字の大きさの指定方法を4つご紹介します。
pxとは1ピクセルを1とする単位で指定することができます。
親要素のfont-sizeに対して何%かで指定することができます。
%と同じく親要素に対して相対的な大きさで指定することができます。
1em = 100%
emと同じく相対的な大きさで指定できるが、親要素ではなくルート（html）に対して相対的な大きさで指定することができる。
基本的にhtmlは16pxなので、1rem=16px となります。 html要素のサイズを変更すると1remの大きさも相対的に変わる。
基本的にhtmlは16pxなので、1rem=16px となります。
html要素のサイズを変更すると1remの大きさも相対的に変わる。
文字の太さの指定は「font-family」プロパティを使用します。
セレクタ { font-family : フォントの種類; }
【例】pタグのフォントをserifにする場合の指定方法
p { font-family : serif; )
OSによって表示可能かどうかが異なるため、フォントは複数設定するのが一般的です。 また、複数設定した場合、前に書いたものが優先されます。
セレクタ { font-family : フォントA , フォントB , フォントC; }
フォント間は「,」で区切ります。 「フォントA」がインストールされていたら「フォントA」で表示。 → なければ、次に「フォントB」がインストールされていたら「フォントB」で表示。 → それもなければ、次に「フォントC」がインストールされていたら「フォントC」で表示。
【例】実際の例です。前から優先されます。
p { font-family : "YuGothic","Yu Gothic","Meiryo","ヒラギノ角ゴ","sans-serif"; )
最後には必ず「総称ファミリー」を入れるようにしてください。 「総称ファミリー」とは、指定したフォントがいずれもインストールされていない場合に、どの系統のフォントで表示するかを指定してくれるフォントファミリーです。
文字の太さの指定は「font-weight」プロパティを使用します。
セレクタ { font-weight : 太さ; }
【例】pタグの文字の太さを太字にする場合の指定方法
p { font-weight : bold; )
文字の太さの指定方法も数値指定などの方法がいくつかありますが、細かく指定してもブラウザが対応していないこともあるためあまり使いません。 よく使われるのは以下の2つです。
font-weight : bold; で太文字になります。
font-weight : normal; で普通の太さになります。
文字の斜体指定は「font-style」プロパティを使用します。
セレクタ { font-style : italic; }
【例】pタグの文字を斜体にする場合の指定方法
p { font-style : italic; }
文字の間隔の指定は「letter-spacing」プロパティを使用します。
セレクタ { letter-spacing : 大きさ; }
【例】pタグの文字の間隔を10pxにする場合の指定方法
p { letter-spacing : 10px; }
ここも大きさ指定は文字の大きさと同じくpx、em、remが使えます。 また、「-2px」のようにマイナスの数字を使うことで文字の間隔を狭めることも可能です。
文字に下線を引くには「text-decoration」プロパティを使用します。
セレクタ { text-decoration : underline; }
【例】pタグの文字に下線を引く場合の指定方法
p { text-decoration : underline; }
この方法は基本的な下線の引き方ですので、下線の色は文字色と同じになります。 もし下線の色を変えたり、太さを変えたりしたい場合はborder-bottomプロパティを使うことで、そういった装飾が可能です。
文字に取り消し線を引くには、同じく「text-decoration」プロパティを使用します。
セレクタ { text-decoration : line-through; }
【例】pタグの文字に取り消し線を引く場合の指定方法
p { text-decoration : line-through; }
文字に取り消し線を引くには「border」プロパティを使用します。
セレクタ { border : 線の太さ 線の種類 線の色; }
【例】pタグの文字に赤色で太さが3pxの実線で囲む場合の指定方法
p { border : 3px solid red; }
1本の実線で表示されます。
2本の実線で表示されます。
破線で表示されます。
点線で表示されます。
HTMLの文字装飾方法の基礎9つはHTML・CSSの学び始めでよく使いますので是非マスターしてください。
プログラミング学習サイト「ウェブカツ!!」の顧問。 不動産、保険の営業マンから、エンジニアへ転身。 「HTMLって何？」という状態から3ヶ月の独学のみでエンジニアへ転職し、１年で年収１千万を稼ぐエンジニアへ。 独学時代のプログラミング学習の分かりにくさや、「技術しか出来ずに稼げていないエンジニア」の現状を変えるため「ウェブカツ」を立ち上げ運営している。
【ウェブカツ公式WEBサイト】 https://webukatu.com/
