HTMLメモ
ブログ用HTMLメモ。自分用なので説明が不十分です。画像無、テキストのみなので見て楽しい物ではない(;´Д｀)
基本的にはCSSで設定されているので個別に変えたいときなど用に。詳しくやるならとても1ページでは収まりきらないのでリファレンス等はリンクを張り付けておく。
ブログ用メモ
hidden属性
要素のdisplayステータスをnoneに切り替える display:none が設定される
<p hidden="" >非表示</p> <p hidden >非表示</p>
css方が優先されるみたいなのでcssでdisplayのステータスを指定しているならそちらが反映される。
記事一覧のサムネの横の記事の紹介続きを読むの部分は記事の一番最初から指定された文字数を表示させているが記事全体の容量をカウントしているのか・・・文字の間に画像などの容量が高いものが挟まっているのか容量が大きいと記事一覧の表示数を10にしてても2とか3しか表示されないことがある。なので↓のタグをつけてカウントする容量を抑える/p>
<!--more-->
このタグ以降の容量をカウントしなくなる
記事の紹介文だけhiddenなどで書いてmMoreタグをつける。
非表示にする
style="display: none"
1番最初の画像がサムネになるので任意の画像にしたいときなどに。
cssでソースコードのレイアウト指定しているが違うのにしたいときなどに
<pre style="background-color: rgb(250, 250, 250);box-sizing:border-box; color: rgb(10, 10, 10); font-family:Meiryo;font-size:80% font-weight: 400; letter-spacing: normal;overflow:auto;margin-right:50px;padding:10px; overflow-wrap: normal;width:90%;line-hight:normal; overflow-wrap: normal;white-space:pre;"><code>ここにコード</code></pre>
背景黒文字白スクロールする
<pre style="background-color: rgb(250, 250, 250);box-sizing:border-box; color: rgb(10, 10, 10); font-family:Meiryo;font-size:80% font-weight: 400; letter-spacing: normal;overflow:auto;margin-right:50px;padding:10px; overflow-wrap: normal;width:90%;line-hight:normal; overflow-wrap: normal;white-space:pre;"><code>ここにコード</code></pre>
ここではYouTube挿入機能があるがYouTubeをブログに張り付ける
<iframe allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" height="360" src="https://www.youtube.com/YouTubeのURL" width="640"></iframe>
エディタが少し不便なのでhtmlモードでブログ作成。vscodeと併用する、プレビュー画面とエディタ画面のウィンドウを並べて表示させて作業
HTML
HyperText Markup Languageの略でHTML。タグを使用して構造や装飾されたテキストをコンピューターが情報を読めるようにしているもの。
<要素名 属性名="属性値"> のように[<]から[>]までが1つのタグ。
<p style="color:red;">が1つのタグ。pの部分が要素名 sytleの部分が属性名 ""の間に属性の値を入れる。属性名="属性値"がセットで属性。
<img src="http:example.com/example.jpg">の様に1つで完結するタグと<h1></h1>の様に開始タグと終了タグがあるものがある。
<p>要素内容</p>全体が要素
タグは入れ子に出来る(ネスト)
マークアップ(印付け)はテキストの羅列に意味を持つタグをつけてコンピューターが情報を読めるようにしたり、クローラーに情報を正しく認識させたり音声読み上げソフトなどを正確に機能させるためにするもの。htmlのファイルであることやページの構成、タイトル等々ページの基盤や改行や段落、見出しなど。装飾に関してはスタイルシートで一括で指定する
htmlの要素名などは大文字と小文字の区別はない。URL、文字コード名、スクリプト名、javascriptなどは大小の区別あり。要素名を大文字、属性を小文字と分けてもよいが面倒なので全部小文字。
絶対パス あるファイルの位置を全体から見て1番元になる位置から階層構造を順番に辿って記述するhttp://www.example.co.jp/index.htm 他のサイトのページや画像を指定するときに使う。
相対パス ファイルの位置を基準とするファイルから見てどこにあるか相対的に記述する。同じフォルダ内 ファイル名 同じフォルダの中の下位フォルダ内 下位フォルダ名/ファイル名 別フォルダにあるファイル ../../同位フォルダ名/ファイル名など。
マークアップ<タグ>
必要なタグとあまり使わないタグもある。装飾などは基本的にはCSSとかstyleで変える。CSSが優先されるのでタグでは装飾などが変えられないものもある。（文字の色やフォントの種類をCSSで設定している場合は<font>タグを使用しても反映されない）部分的に装飾を変更したい場合はstyle属性でstyleシートを埋め込むとstyle属性の優位性が高いので反映される。太文字にするとか強調するとかのタグはcssで特に設定していない限りは普通に反映される
| <要素> | 属性 | 値 | 概要 |
| <p></p> | align="" | left right center | 段落 |
| <br> | 改行 | ||
| <nobr></nobr> | 改行させないで表示 | ||
| <a></a> | href="" | URL | anchor href属性でリンク先を指定 |
| <img> | src | URL | 画像の表示 |
| alt | Text | 画像替わりのText | |
| <div></div> | align="" | left right center | 囲まれた範囲のグループ化 |
| <h1></h1> | align="" | left right center | メインの見出し |
| <h2></h2> | サブ見出し | ||
| <h3></h3> | |||
| <h4></h4> | |||
| <h5></h5> | |||
| <h6></h6> | |||
| <font></font> | color="" | #rrggbb colorname | |
| size | 1～7 ± | 1~7は絶対値±は相対値 | |
| face | フォント名 | ||
| <b></b> | 太文字 | ||
| <i></i> | 斜体 | ||
| <strike></strike> | 抹消線 | ||
| <tt></tt> | 等幅 | ||
| <u></u> | 下線 | ||
| <sup></sup> | 上付き文字 | ||
| <sub></sub> | 下付き文字 | ||
| <big></big> | 大きめの文字 | ||
| <small></small> | 小さめの文字 | ||
| <em></em> | 強調 | ||
| <strong></strong> | より強い協調 | ||
| <abbr></abbr> | title | 省略しないText | 略語 |
| <acronym></acronym> | title | 省略しないText | 頭字語 |
| <ul><li></li></ul> | type | disc circle square | 非順序リスト |
| <ol><li></li></ol> | type | 1 a A i I | 順序リスト |
| start | 開始番号 | ||
| value | 開始番号 | ||
| <table></table> | 表 | ||
| <tr></tr> | 行(横一列) | ||
| <td></td> | セル | ||
| <th></th> | 表の見出し | ||
| <hr> | 横罫線 | ||
| size="" | px | 横罫線の太さ | |
| width="" | px % | 横罫線の幅 | |
| align="" | left right center | 横罫線の位置 | |
| noshade | 横罫線の影無 | ||
| color="" | #rrggbb colorname | 横罫線の色 | |
| <spacer> | type="" | horizontal vertical block | 横スペース 縦スペース box |
| size="" | px | スペースの大きさ | |
| width="" | px | 幅 | |
| height="" | 高さ | ||
| align="" | left right top middle bottom | box状のスペースの位置 | |
| <multicol></multicol> | cols="" | 段数 | 段組 |
| gutter="" | px | 段組の間隔 | |
| width="" | px | 段組の横幅 | |
| <cenrer></center> | センタリング | ||
| <pre></pre> | 入力した通りに表示 | ||
| <code></code> | code | ||
| <blockquote></blockquote> | 長い文章の引用 | ||
| <blink></blink> | Textの点滅 | ||
| <marquee></marquee> | Textのスクロール | ||
| height | px % | マーキーの高さ | |
| width | px % | 幅 | |
| hspace | px % | 左右の余白 | |
| vspace | px % | 上下の余白 | |
| behavior | scroll alternate slide | 動き方 | |
| direction | left right | 方向 | |
| loop | 回数 | スクロール回数 | |
| scrolldelay | 秒数 | 再スクロール時間間隔 | |
| scrollamount | px | 再スクロールまでの距離 | |
| truespeed | |||
| bgcolor | #rrggbb colorname | 色 | |
特殊文字・エスケープ
| 表示文字 | &Keyword; | &#ASCIIcode; |
| & | & | & |
| < | < | < |
| > | > | > |
| ; | ; | ; |
| : | : | : |
| , | , | , |
| . | . | . |
| space | |   |
| " | " | " |
| ' | ' | ' |
| { | { | { |
| } | } | } |
| # | # | # |
| \ | \ | \ |
| / | / | / |
| ¥ | ¥ | ¥ |
| _ | _ | _ |
| ¦ | ¦ | ¦ |
| ( | ( | ( |
| ) | ) | ) |
| [ | [ | [ |
| ] | ] | &93; |
| @ | @ | @ |
| % | % | % |
| ? | ? | ? |
| ! | ! | ! |
| $ | $ | $ |
| ˆ | ˆ | ˆ |
| ˜ | ˜ | ˜ |
| ∼ | ∼ | ∼ |
| ~ | ~ | |
リスト
リスト・箇条書き CSSで設定してあるのでulタグとliタグとolタグで囲えばCSSで指定したレイアウトになる。個別に変えたいときには指定をstyle属性などで変える。
type属性で指定
type属性で指定 リストのマークだけ変えたいときなど
<ul> <li></li> <li></li> <li></li> </ul>
<ul type="circle"> <li type="disc"></li> <li type="square"></li> <li type="none"></li> </ul>
ulの後につけるとリスト全体。liの後につけるとその行だけに影響する。
disc(黒丸) circle(白丸) square(黒四角) none(マーク無)
<ol> <li></li> <li></li> <li></li> </ol>
<ol type="a"> <li type="A"></li> <li></li> <li></li> </ol>
olの後につけるとリスト全体。liの後につけるとその行だけに影響する。style属性と違って種類が少ない？
1(アラビア数字) a(小文字アルファベット) A(大文字アルファベット) i(小文字ローマ数字) I(大文字ローマ数字)
<ol type="a" start="3"> <li></li> <li></li> <li></li> </ol>
開始番号だけ変えたいときはstart属性だけ指定する。start="開始番号"3を指定すると3、4、5と番号が続く
<ol> <li></li> <li value="5"></li> <li></li> </ol>
連番だけ変えたいときはvalue属性だけ指定する。liタグにvalue="開始番号"5を指定すると指定したliタグの行から5，6，7と番号が続く
用語の定義をリスト表示
<dl> <dt></dt> <dd></dd> <dt></dt> <dd></dd> <dt></dt> <dd></dd> </dl>
- タイトル1
- 内容文～～～～～～～～～
- タイトル2
- 内容文～～～～～～～～～
- タイトル3
- 内容文～～～～～～～～～
- タイトル1
- 内容文～～～～～～～～～
- 内容文～～～～～～～～～
- 内容文～～～～～～～～～
style属性で指定
styleをインラインで埋め込む
<タグ style="スタイルの設定"></タグ>
<ul style="list-style-type:decimal; color:red; font-family:cursive; font-size:18px line-height:normal; text-align:center; "> <li></li> <li style="background-color:aqua;"></li> <li></li> </ul>
ulの後につけるとリスト全体。liの後につけるとその行だけに影響する。
style属性ではいっぺんに色々設定できる。list-style-type:マークや番号の種類名;番号もしていできるのでolタグはなくulタグ。
none(なし) disc(黒丸 指定なしだとこれになる) circle(白丸) square(黒四角) decimal(アラビア数字) lower-alpha(小文字アルファベット) upper-alpha(大文字アルファベット) lower-roman(小文字ローマ数字) upper-roman(大文字ローマ数字) cjk-ideographic(漢数字)以降環境による。 hiragana(ひらがな) katakana(カタカナ) hiragana-iroha(いろは) katakana-iroha(イロハ) decimal-leading-zero(01などゼロ付き数字) lower-greek(小文字ギリシャ文字)
style="プロパティ:値;"
同じプロパティでまとめる時の例 style="font:italic normal bold 18px /14px serif;" color:色指定; (テキストの色) font-family:フォント名; (フォントの種類) font-size:数値; (フォントサイズ) background-color:色指定; (背景色） line-height:; border-style:全方共通; (枠線のスタイル) border-style:上下 左右; (枠線のスタイル) border-style:上 左右 下; (枠線のスタイル) border-style:上 右 下 左; (枠線のスタイル) solid(実線)double(二重線)dotted(点線)dashed(破線) none groove ridge inset outset border-width:全方共通; (枠線の太さ) border-width:上下 左右; (枠線の太さ) border-width:上 左右 下; (枠線の太さ) border-width:上 右 下 左; (枠線の太さ) border-color:全方共通;(枠線の色） border-color:上下 左右;(枠線の色） border-color:上 左右 下;(枠線の色） border-color:上 右 下 左;(枠線の色） borderプロパティをまとめて設定 border:線の種類の値 太さの値 色 border-top:線の上側の設定; border-left:線の左側の設定; border-right:線の右側の設定; border-bottom:線の下側の設定; border-radius:;(ボックスの四隅に丸みを付ける 単位 % px) border-radius:左上 右上 右下 左下; margin:全方向共通;(ボックスの外回りの間隔) margin:上下 左右; margin上 左右 下:; margin:上 右 下 左; margin-top:; margin-left:; margin-right:; margin-bottom:; padding:;(ボックスとテキストの間隔) padding:; padding:; padding:; width:;(横幅) list-style-type:マークの種類;(リストのマーク) list-style-image:url("画像ファイル名");(リストのマークに画像を使う) list-style-position:inside;(マークの位置を本文中に埋め込む） text-align:;(テキストの配置) left(左寄せ)center(中央寄せ)right(右寄せ) box-shadow:;
テーブル
テーブル作成ツールのサイト様
有難くつかわせていただいております_(._.)_
タグにstyleを埋め込むのでもいいしCSSにしてもいいし・・・面倒なので無料のツールを使わせていただくのが一番だけども
テーブルは表のこと。表の装飾はcssでした方がいいがstyle属性で個別に変えることも出来る。装飾指定が無ければ罫線も何もない表になる。
<table></table> テーブルタグの開始タグ～終了タグまでの間が表全体
<caption>タイトル</caption>
<thead></thead>開始タグ～終了タグまでの間が見出し行。この間に見出しセルを入れる。
<th見出しセル></th>
<tbody></tbody> 表全体のタグ。開始タグ～終了タグの間に行タグとセルタグを入れる。
<tr></tr> 行タグ 開始タグ～終了タグの間にセルタグを入れる
<td>セルの内容</td>セルタグ
ツールを使わせてもらうと楽だけど自分のデザインでしたい場合は自分でテンプレートを作ってもいいと思う。
<table>
<tr><th></th><th>1列目</th><th>2列目</th><th>3列目</th></tr><!-- 1行目 -->
<tr><th>1行目</th><td>100</td><td>aaa</td><td>あああ</td></tr><!-- 2行目 -->
<tr><th>2行目</th><td>200</td><td>bbb</td><td>いいい</td></tr><!-- 3行目 -->
<tr><th>3行目</th><td>300</td><td>ccc</td><td>ううう</td></tr><!-- 4行目 -->
<tr><th>4行目</th><td>400</td><td>ddd</td><td>えええ</td></tr><!-- 5行目 -->
</table>
| 1列目 | 2列目 | 3列目 | |
|---|---|---|---|
| 1行目 | 100 | aaa | あああ |
| 2行目 | 200 | bbb | いいい |
| 3行目 | 300 | ccc | ううう |
| 4行目 | 400 | ddd | えええ |
装飾なしだと↑みたいになる
<style scoped>
table.tabb
{
padding:10px;
margin:auto;
border-collapse:collapse;border-spacing:0;table-layout:fixed;
}
.tabb th
{
width:10%;
border:3px solid #4da5ac;padding:5px;
white-space:nowrap;
background-color:transparent;
}
.tabb td
{
width:30%;
font-size:18px;
padding:5px;
text-align:center;
white-space:nowrap;
border:3px solid #4da5ac;padding:5px;
background-color:transparent;
}
</style>
<table class="tabb">
<tr><th></th><th>1列目</th><th>2列目</th><th>3列目</th></tr><!-- 1行目 -->
<tr><th>1行目</th><td>100</td><td>aaa</td><td>あああ</td></tr><!-- 2行目 -->
<tr><th>2行目</th><td>200</td><td>bbb</td><td>いいい</td></tr><!-- 3行目 -->
<tr><th>3行目</th><td>300</td><td>ccc</td><td>ううう</td></tr><!-- 4行目 -->
<tr><th>4行目</th><td>400</td><td>ddd</td><td>えええ</td></tr><!-- 5行目 -->
</table>
| 1列目 | 2列目 | 3列目 | |
|---|---|---|---|
| 1行目 | 100 | aaa | あああ |
| 2行目 | 200 | bbb | いいい |
| 3行目 | 300 | ccc | ううう |
| 4行目 | 400 | ddd | えええ |
装飾在りだと↑みたいになる。style属性やタグで記述がない分は元のcssが反映される。セレクタの部分がいまいち書き方がよくわからん(;´Д｀)
<div class="div用クラス名(呼び出し)"><style scoped>
/*div(要素名.クラス名)*/
div.div用クラス名
{
margin:5px;
}/*div(要素名.クラス名)*/
/*div(要素名.クラス名(親・先祖) 半角スペース(子孫結合子) 要素名.テーブル用divのクラス名(子孫セレクタ) table(子孫セレクタ)*/
/*div.クラス名要素の中のdiv.tbl用クラス名要素の中のtable要素のセレクタ*/
div.div用クラス名 div.tbl用クラス名 table
{
width:100%;/*表の横幅とセンタリング*/
}
div.div用クラス名 div.tbl用クラス名 th.nowrap,
div.div用クラス名 div.tbl用クラス名 td.nowrap
{
white-space:nowrap;/*自動改行を無くす*/
}
div.div用クラス名
{
padding:0px;
}
div.div用クラス名 div.tbl用クラス名 th,
div.div用クラス名 div.tbl用クラス名 td
{
border:3px solid #4da5ac;padding:5px;/*罫線*/
}
div.div用クラス名 div.tbl用クラス名 th,
div.div用クラス名 div.tbl用クラス名 td
{
background-color:transparent;/*背景を透明にすることでどんな背景にも対応させる*/
}
div.div用クラス名
{
background-color:transparent;
}
div.div用クラス名 div.tbl用クラス名 table
{
border-collapse:collapse;border-spacing:0;table-layout:fixed;/*セル間のスペースを無くす*/
}
div.div用クラス名 div.tbl用クラス名,
div.div用クラス名 div.tbl用クラス名 a
{
color:#2d656d;
}
div.div用クラス名 div.tbl用クラス名
{
font-size:14px;text-align:center;
}
div.div用クラス名 div.tbl用クラス名 th,
div.div用クラス名 div.tbl用クラス名 th a
{
color:#16265b;
}
div.div用クラス名 div.tbl用クラス名 th
{
font-weight:bold;text-align:center;/*見出しの文字を太字にしてセンタリング*/
}
</style><div class="tbl用クラス名(呼び出し)">
<table><caption>タイトル</caption>
<tr><td>1行1列</td><td>1行2列</td><td>1行3列</td></tr>
<tr><td>2行1列</td><td>2行2列</td><td>2行3列</td></tr>
<tr><td>3行1列</td><td>3行2列</td><td>3行3列</td></tr>
</table></div></div>
リンク
<a href="リンク先のアドレスもしくはID名等"></a>
画像
<img src="ファイルの場所">
styleシート
css
cssはカスケーディングスタイルシートの略cascadingが上から下に流れていく滝のことらしく継承していくという意味になるらしい。Cascading Style Sheets の頭文字をとってCSS。ページ全体のレイアウトや見栄え、記事の内容などのレイアウトや見栄えをCSSで一括で指定し部分的な変更などはstyle属性で指定など使い分けることが出来る。
cssの詳細は1ページにはとても収まらないので基本的なことを少しとよく使う物だけをさらりと。
別のファイルに記述したものを読み込む。 htmlのheadタグの中に入れる。 <html> <head> <!--htmlのコメントアウト--> <!--head内にコンピューター向けの情報の入力。画面には表示されない--> <meta charset="UTF-8"> <!--後からの方が先を上書きするのでリセットcssファイルを 読み込む際は先にリセットファイルを記述する--> <!--ブラウザのデフォルトCSSで自分のCSSが思い道理に 反映されないことを防ぐためにリセットする--> <!--リセットは2通りあってファイルをダウンロードするか 自分でファイルを作成するかしたのを読み込ませるかする方法と CDNのURLをコピペするか。--> <link rel="stylesheet" href"リセットファイルの場所ファイル名.css"> <link href='https://use.fontawesome.com/releases/v5.6.1/css/all.css' rel='stylesheet'/> <link rel="stylesheet" href"ファイルの場所ファイル名.css"> <title>ページタイトル</title> </head> <body> <!--画面に表示される部分--> </body> </html> htmlに直に書き込む <html> <head> <!--htmlのコメントアウト--> <!--head内にコンピューター向けの情報の入力。画面には表示されない--> <!--文字コードの指定--> <meta charset="UTF-8"> <style> styleタグの中に記述する。 head内はページ全体の設定 </style> <title>ページタイトル</title> </head> <body> <!--画面に表示される部分--> <style scoped> styleタグの中に記述する。 テーブルやリスト等部分的に変えたいときなどに。 </style> </body> </html> CSSの書き方 CSSのファイルを別に作成するときはファイル名.cssと拡張子をcssにする。 ブログ全体のcssは大抵は設定済みなはずなので全体を変えたいときは そちらの方を変える。bloggerはテーマ→html編集の所で全体の設定を しているのでそちらで変更などをする。 /*文字コードの指定 cssファイルで記述する。*/ @charset "UTF-8"; 基本的なCSSの書き方は セレクタ(どこの) { プロパティ名(何を): 値(どうする); } p{color:red;} p(段落の){color(文字の色を):red(赤にする);} 見やすい様にインデントを付ける span{ color: red; font-size: 14px; display: block; width: 100%; background: #bbf1ef; } カンマ区切りでセレクタをリストに出来る。 1つでもミスがあると全部が無効になる。 p, h2, .test { color: red; } pとh2とclass="test"がプロパティを指定したものに 反映される。pとh2とclassを指定した要素の文字の色が 赤色になる セレクタ 要素セレクタ spanなどhtmlのタグの要素 p { clor:#red; font-size:18px; } <p></p>p要素を全部に適用される IDセレクタ 指定されたhtmlページでは同一の名前は使えない。 #ID名 { プロパティ:値; } <p id="id名(cssで指定したidの呼び出し)"</p> ></p>指定されたIDを持つ要素。 IDを指定した要素だけ適用 <a id="id名(cssで指定したidの呼び出し)"</a> クラスセレクタ .クラス名 { プロパティ:値; } <p class="クラス名(cssで設定したクラスの呼び出し)"></p> 指定されたクラスを持つ要素 1つのページに？このへんよくわからんけどクラスなのでインスタンスが 生成されるっぽい。クラスなのでこちらもたぶん名前かぶりはだめ よくわからんけど元のcssファイルはともかく突発で入れる場合は 多用している気がするIDはcssよりはanchorで使うくらい・・ 属性セレクタ 要素名[属性名] { プロパティ:値; } 説明がしづらいけど・・・要素だけだと反映されなくて 属性を付けたときに反映される。 <img"></img> 反映無 <img src"画像ファイル">属性の部分画像ファイルに影響する 疑似クラスセレクタ 指定された要素が指定された状態にあるとき 要素:疑似クラス名 a:hover { } <a>ここの部分をマウスポインタが指したとき</a> 疑似要素 セレクタに付加するキーワード 要素の特定の部分にスタイル付け 出来るようになる pre.クラス名::before { color:#090f3d; position: relative; content: attr(ti); display:block; padding:8px; background: #ddf0ed; color: #090f3d; font-size:16px; font-family: Consolas, Menlo, sans-serif; } beforeは最初の子要素として疑似要素を生成する 規定でインラインである よくcontentプロパティで要素を装飾する際に用いられる attr(引数)は要素の属性値を文字列で返す htmlで<pre class="クラス名" string="ここの文字が返る"> <code>ソースコードの内容</code></pre> とやると ↓の装飾とタイトルみたいなことができる コードのタイトルみたいなことがしたいときなど コードの時はjavascriptも合わさっているのでcssだけだと ただ装飾と文字列を入れられるだけだけど。
タグにstyle属性で記述
styleをインラインで埋め込むやり方は<p>タグがあるとしたら属性名をstyleにして属性値にcssのプロパティを入れる。部分的に装飾を変えたりしたいときに等に用いる。優先度が一番高くなっているようでcssで設定しているものでもこちらの方が反映される。効果範囲は開始タグから終了タグ迄の要素の内容である。文の中で強調したい部分だけに背景色を付けたり文字の大きさを変えたり色を変えたりできる。
<p style="background:#e4f2ec; color:red; font:bold 18px meiryo;">ここの内容に反映される</p>
ここの内容に反映される
<span>タグ
spanタグは意味を持たないタグでpタグでstyleを指定すると段落全てに影響するけどspanタグを使うとspanの開始タグ～終了タグ迄の範囲にしか影響を及ぼさないので文面の一部だけ変えたいときに使う。
主にテキストの一部にスタイルを適用するときに使うタグでインラインボックスを生成。
style属性だけではなくclassも入れられるのでcssでspanの記述をしたあと呼び出すことも出来る。
<p>タグにネストして<span style="color:blue; font-size:18px;">spanタグに囲まれた部分だけ</span>styleを指定できる。</p>
タグにネストしてspanタグに囲まれた部分だけstyleを指定できる。
<div>タグ
divタグは複数ブロックグループ化するときに使う。ブロックボックスを生成する。
ひとまとまり全体のスタイルを指定したいとき
divタグはstyle属性でひとまとまりのスタイルを指定できるがcssなどでclassを生成したものを呼び出す方が多い気がする。
<div style="background:#fef4f4; text-align:center; color:green;"> <p>divタグで囲われた範囲全部が1つのブロック(1つの箱みたいなもの)とみなされる</p> <p><span style="color:red; text-align:left;">spanタグでスタイルが変えられるものとdivのが優先されるものがある</span></p> <p>なので範囲内全ての要素に適用される。</p> </div>
divタグで囲われた範囲全部が1つのブロック(1つの箱みたいなもの)とみなされる
spanタグでスタイルが変えられるものとdivのが優先されるものがある
なので範囲内全ての要素に適用される。
colorとsizeとfont
color
カラー選択ツールはGoogleさんのを利用させていただいております。Googleさんのツールは便利。他のツールもあるGoogle依存は進むばかり。
rgb(186, 245, 244) rgb(redの色味の値 greenの色味の値 blueの色味の値)
数値は0～255。blackがrgb(0,0,0)whiteがrgb(255,255,255)
#rrggbb #(ナンバーの記号)の後に16進数で指定 red00～ffgreen00～ffblue00～ff
blackが#000000whiteが#ffffffとなっている。
色名(英名)で指定する
black silver gray white red purple green yellow blue等々
transparent は透明
| #cbf2ed | #2d656d | #16265b | #4da5ac | #fef4f4 |
| #e4f2ec | #008080 | #008b8b | #00a0de | #dddddd |
| #666666 | #444444 | #c1e0ff | #999999 | #daede8 |
| #7badb0 | #99b5c9 | #65baaf | #7bcabf | #132f54 |
| #8dd6cc | #090f3d | #bee0ce | #76ded4 | #65cab9 |
| #2d656d | #4da5ac | #a8edde | #a8edde | #134f5c |
| #053635 | #c9f5ed | #baf5f4 | #e8faf9 | #84bab7 |
| #14302c | #ddf0ed | #325e58 | #d8f2ee | #8ca7cf |
大きさや長さの指定
px % em が主で数値や大きさの名前を入れる場合もある
絶対値
mm cm in pt pc
mmはミリメートルcmはセンチメートルinはインチptはポイント(文字の大きさなど)pcは12ptを1とする単位
相対値 絶対値で指定すると画面の環境によってはバランスの悪いデザインとなるので全体のバランスを考えると相対値で指定する方が多い。
em ex px %
emは要素内の大文字のMの高さを基準として1とする。exは要素内の小文字のxの高さが基準となる。pxは画面上の1ピクセル。画面の大きさによって大きさが異なる。%は属性やプロパティによって扱えるかどうかがあるし何を基準にするかにもよるので注意。
font
JavaScript
ブログの最初の基盤の作成や変更、追加するとき以外は滅多にブログの個別記事に埋め込むことは無い。様々なプログラミング言語があるが基本的なことはどの言語でも割と共通しているので言語の記述の仕方さえ把握すれば大体同じ。
<script></script> タグを使用する <head>headタグの間ならどこに記述しても良い <script language="JavaScript"> <!-- scriptタグを解釈できないブラウザ用に ここにscriptを記述する //-- > </script> </head>
<script src="ファイルの場所ファイル名.js"></script>
コメント
0 件のコメント :
コメントを投稿