ReferencesWebを生業とするための覚え書きテキストのスタイルテキストのスタイルを紹介します。text-alignプロパティテキストの水平方向の位置を指定します。指定方法は以下のとおりです。left左揃えcenter中央揃えright右揃えjustify両端揃え(欧文のみ対応)単語間隔を調整し、左右を揃えます。(最終行を除く)text-decorationプロパティテキストの文字装飾を指定します。指定方法は以下のとおりです。underline下線を引くoverline上線を引くline-through取消線を引くnone線なしtext-indentプロパティテキストのインデント(字下げ)を指定します。指定方法は以下のとおりです。単位には、「px(ピクセル)」「em(エム)」などが良く使われます。数値+%数値をパーセントで指定します。vertical-alignプロパティボックス内のコンテンツの垂直方向位置を指定します。指定方法は以下のとおりです。段落等の場合baseline(デフォルト)ベースラインに沿って配置します。text-top文字の上部分に沿って配置します。text-bottom文字の下部分に沿って配置します。super上付き文字の位置に表示します。sub下付き文字の位置に表示します。「super」や「sub」は位置だけの指定で文字サイズはそのままです。上付き文字や下付き文字には文字サイズも調整される「SUPタグ」「SUBタグ」を使用することをおすすめします。テーブルのセル等topセルの上部に沿って配置します。middle(デフォルト)セルの上下中央に沿って配置します。bottomセルの下部に沿って配置します。letter-spacingプロパティ文字間隔を指定します。指定方法は以下のとおりです。単位には「px(ピクセル)」「em(エム)」などが良く使われます。数値+%フォントサイズに対する割合をパーセントで指定します。word-spacingプロパティ単語間隔(欧文)を指定します。指定方法は以下のとおりです。単位には「px(ピクセル)」「em(エム)」などが良く使われます。数値+%フォントサイズに対する割合をパーセントで指定します。word-spacingプロパティテキストのスタイルにコメントフォントのスタイルフォントに関するスタイルを紹介します。font-sizeプロパティフォントサイズを指定します。指定方法は以下のとおりです。単位には、「px(ピクセル)」「pt(ポイント)」「em(エム)」などが良く使われます。数値+%親要素に対するパーセントで指定します。キーワードフォントサイズを指定するキーワードを使用します。xx-small/x-small/small/medium/large/x-large/xx-largefont-weightプロパティフォントの太さを指定します。指定方法は以下のとおりです。normal通常の太さで表示します。bold太字で表示します。bolder1段階太く表示します。lighter1段階細く表示します。font-styleプロパティフォントのスタイルを指定します。指定方法は以下のとおりです。normal通常のスタイルで表示します。italicイタリック体で表示します。oblique斜体で表示します。日本語フォントの場合はイタリック書体がありませんので、通常の書体を斜めにした「斜体」で表示されます。イタリック書体が用意されている欧文フォントでは、筆記体に近い「イタリック体」で表示されるようです。font-familyプロパティフォントの種類を指定します。指定方法は以下のとおりです。“フォント名”フォント名そのものを指定します。フォント名にスペースを含む場合はダブルクォーテーション「”」でくくるのが必須ですが、スペースを含まなくてもくくっておくと、間違いがありません。フォントグループ名フォントグループ(系統)を指定します。serif(明朝系、セリフ体)sans-serif(ゴシック系、サンセリフ体)cursive(筆記体系)fantasy(装飾系)monospace(等幅)複数のフォント名やフォントグループ名をカンマ「,」で区切って指定ですると、前にあるものが優先的に適用されるため、主に「Win用のフォント,Mac用のフォント,フォントグループ名」という形式で指定されます。環境によってはフォント名をアルファベットで表記しないと適用されないこともあるので注意が必要です。Gothic”;line-heightプロパティ行の高さを指定します。フォントサイズ(font-size)と同じ値にすると、行間が0になります。指定の方法は以下のとおりです。数値+%高さをパーセントで指定します。「2」=「200%」ということになります。単位は「px(ピクセル)」「pt(ポイント)」「em(エム)」など、フォントサイズに合わせた単位が良く使われます。normal(デフォルト)「100%」と同じです。日本語の場合デフォルトの100%では、行間が詰まって見えるため、段落などでは1.5~2倍の行間をあけると文章が読みやすくなります。「数値+単位」を使用する場合、フォントサイズより小さくすると行が重なってしまうので注意しましょう。line-heightプロパティフォントのスタイルにコメントテーブルのスタイルテーブル(表)に関するスタイルを紹介します。border-collapseテーブルのボーダーを表示する方法を指定します。指定方法は以下のとおりです。collapse隣接するセル、またはテーブルのボーダーを重ねて表示します。separate(デフォルト)隣接するセル、またはテーブルのボーダーを間隔をあけて表示します。border-spacingプロパティセル間、またはテーブルとセルの間隔を指定します。指定方法は以下のとおりです。単位には、「px(ピクセル)」などが良く使われます。table-layoutプロパティテーブルのレイアウト方法を指定します。指定方法は以下のとおりです。auto(デフォルト)テーブルの幅や高さは、セルの中身に応じて広がります。fixedテーブルの幅は100%、各セルの列幅は均等となります。table-layoutプロパティテーブルのスタイルにコメント表示と配置のスタイル要素の表示や配置に関するスタイルを紹介します。displayプロパティボックスの表示形式を変更します。表示形式は以下のとおりです。block(ブロックレベル要素のデフォルト)ブロックレベル形式で表示します。inline(インライン要素のデフォルト)インライン形式で表示します。inline-blockインラインブロックレベル形式で表示します。none存在しないものとして処理します。overflowプロパティボックスの内容があふれた場合の処理方法を指定します。処理方法は以下のとおりです。visible(デフォルト)高さ、幅の指定を無視してすべて表示します。hidden高さ、幅の指定により範囲内のみ表示します。回り込み(float)の親要素に指定して、回り込みを解除します。scrollスクロールバーを表示します。autoブラウザーの処理に任せます。(ブラウザにより異なる)overflow-xプロパティボックスの幅の内容があふれた場合の処理方法を指定します。処理方法は以下のとおりです。visible(デフォルト)幅の指定を無視してすべて表示します。hidden幅の指定により範囲内のみ表示します。回り込み(float)の親要素に指定して、回り込みを解除します。scrollスクロールバーを表示します。autoブラウザーの処理に任せます。(ブラウザにより異なる)overflow-yプロパティボックスの高さの内容があふれた場合の処理方法を指定します。処理方法は以下のとおりです。visible(デフォルト)高さの指定を無視してすべて表示する。hidden高さの指定により範囲内のみ表示。回り込み(float)の親要素に指定して、回り込みを解除する。scrollスクロールバーを表示autoブラウザーの処理に任せます。(ブラウザにより異なる)positionプロパティ要素の配置方法を指定します。配置方法は以下のとおりです。static(デフォルト)通常通りの配置をします。relative通常通りの位置からの相対的な位置で指定します。絶対位置指定(absolute)の親要素に指定して、位置の基準とします。absolute親要素に対して絶対的な位置で指定をします。(left/right/top/bottomプロパティを使用)fixed位置を固定して配置します。leftプロパティ左からの位置を指定します。指定方法は以下のとおりです。単位には、「px(ピクセル)」「em(エム)」などが良く使われます。数値+%位置をパーセントで指定します。rightプロパティ右からの位置を指定します。指定方法は以下のとおりです。単位には、「px(ピクセル)」「em(エム)」などが良く使われます。数値+%位置をパーセントで指定します。topプロパティ上からの位置を指定します。指定方法は以下のとおりです。単位には、「px(ピクセル)」「em(エム)」などが良く使われます。数値+%位置をパーセントで指定します。bottomプロパティ下からの位置を指定します。指定方法は以下のとおりです。単位には、「px(ピクセル)」「em(エム)」などが良く使われます。数値+%位置をパーセントで指定します。z-indexプロパティ絶対位置指定(absolute)するときの、要素の重ね順を指定します。整数で指定し、値が大きいほうが上(手前)に表示され、値が小さい方が下(奥)に表示され、上のものに隠れます。floatプロパティ画像やボックスをフロートさせ、寄せて配置し、後続するボックスを回りこませます。フロートの種類は以下のとおりです。left左に寄せて、下の要素を右に回りこませます。right右に寄せて、下の要素を左に回りこませます。none(デフォルト)フロートしません。下の要素も回りこみません。clearプロパティfloatプロパティにより設定された、フロートを解除します。解除の種類は以下のとおりです。left左のフロートのみ解除します。right右のフロートのみ解除します。both両方のフロートを解除します。z-indexプロパティ表示と配置のスタイルにコメントボックスのスタイル主にブロックレベル要素に適用する、ボックスのスタイルを紹介します。widthプロパティボックスの幅を指定します。幅の指定方法は以下のとおりです。単位には、「px(ピクセル)」「em(エム)」などが良く使われます。数値+%幅をパーセントで指定します。auto中身にあわせて自動で広がります。heightプロパティボックスの高さを指定します。高さの指定方法は以下のとおりです。単位には、「px(ピクセル)」「em(エム)」などが良く使われます。数値+%高さをパーセントで指定します。auto中身にあわせて自動で広がります。max-widthプロパティボックスの最大の幅を指定します。幅の指定方法は以下のとおりです。単位には、「px(ピクセル)」「em(エム)」などが良く使われます。数値+%最大幅をパーセントで指定します。none(デフォルト)幅を指定しません。max-heightプロパティボックスの最大の高さを指定します。高さの指定方法は以下のとおりです。単位には、「px(ピクセル)」「em(エム)」などが良く使われます。数値+%最大高さをパーセントで指定します。none(デフォルト)幅を指定しません。min-widthプロパティボックスの最小の幅を指定します。幅の指定方法は以下のとおりです。単位には、「px(ピクセル)」「em(エム)」などが良く使われます。数値+%最小幅をパーセントで指定します。min-heightプロパティボックスの最小の高さを指定します。高さの指定方法は以下のとおりです。単位には、「px(ピクセル)」「em(エム)」などが良く使われます。数値+%最小高さをパーセントで指定します。widthプロパティボックスのスタイルにコメントリストのスタイルリストのスタイルを紹介します。list-style-typeプロパティリストマークの種類をキーワードで指定します。ULタグ用の記号とOLタグ用の番号がありますが、いずれにも使用することができます。disc(ULのデフォルト)黒丸circle白丸square黒四角noneリストマークなしdecimal(OLのデフォルト)数字upper-alphaアルファベット大文字lower-alphaアルファベット小文字upper-romanローマ数字大文字lower-romanローマ数字小文字list-style-imageプロパティリストマークを画像にします。構文は、「url(画像のパス)」となります。list-style-positionプロパティリストマークの表示位置を指定します。outside(デフォルト)リストマークをボックスの外側に表示します。文字列の1行目と2行目以降がそろいます。insideリストマークをボックスの内側に表示します。リストマークと文字列の2行目以降がそろいます。list-style-typeプロパティリストのスタイルにコメント余白のスタイル余白のスタイルを紹介します。枠線(ボーダー)の外側にある余白がマージン、内側にある余白がパディングといいます。marginプロパティ他の要素との間隔、つまり外側の余白を指定します。要素が上下に並んでいる場合、大きいマージンが優先されます。上下左右個別に指定する場合は、「margin-top」「margin-left」「margin-right」「margin-bottom」プロパティを使用します。paddingプロパティ枠線と内容との間隔、つまり内側の余白を指定します。上下左右個別に指定する場合は、「padding-top」「padding-left」「padding-right」「padding-bottom」プロパティを使用します。設定する値の数により、以下のようになります。値が1つ上下左右同じ値となります。paddingプロパティ余白のスタイルにコメント枠線のスタイル枠線(ボーダー)のスタイルを紹介します。border-styleプロパティ枠線の種類を指定します。枠線の種類は以下のとおりです。solid実線double二重線groove溝線ridge稜線inset領域がくぼんで見えるoutset領域が浮き出て見えるnone(デフォルト)枠線なしhidden枠線を表示しない(太さは適用される)dashed破線dotted点線また、上下左右個別に指定する場合は、「border-top-style」「border-left-style」「border-right-style」「border-bottom-style」プロパティを使用します。border-widthプロパティ枠線の太さを指定します。数値+単位、またはキーワードで指定されます。thin細線medium通常の太さの線thick太線また、上下左右個別に指定する場合は、「border-top-width」「border-left-width」「border-right-width」「border-bottom-width」プロパティを使用します。border-colorプロパティ枠線の色を指定します。色はカラーネーム、カラーコード(16進数)、カラーコード(10進数)で指定します。上下左右個別に指定する場合は、「border-top-color」「border-left-color」「border-right-color」「border-bottom-color」プロパティを使用します。borderプロパティ枠線のスタイル(線種、太さ、色)を半角スペースで区切り、まとめて指定します。上下左右個別に指定する場合は、「border-top」「border-left」「border-right」「border-bottom」プロパティを使用します。borderプロパティ枠線のスタイルにコメント背景のスタイル背景のスタイルを紹介します。background-colorプロパティ背景色を指定します。色はカラーネーム、カラーコード(16進数)、カラーコード(10進数)で指定します。background-imageプロパティ背景画像を指定します。構文は、「url(画像のパス)」となります。background-repeatプロパティ背景画像の繰り返し方法を指定します。repeat(デフォルト)上下・左右に繰り返します。repeat-x左右にのみ繰り返します。repeat-y上下にのみ繰り返します。no-repeat繰り返さず1つのみ表示します。background-positionプロパティ背景画像の位置を指定します。位置は、ピクセル(px)やパーセント(%)の数値、またはleft/center/right(横方向)、top/center/bottom(縦方向)で指定します。background-attachmentプロパティ背景画像のスクロール方法を指定します。scroll(デフォルト)ページのスクロールにあわせてスクロールします。fixedページをスクロールしても、背景画像は固定されたままとなります。background-repeatプロパティ背景のスタイルにコメント文字色のスタイル文字色のスタイルを紹介します。colorプロパティ文字色を指定します。色の指定はカラーネーム、カラーコード(16進数、10進数)があります。基本的な色は英語で簡単に指定できます。「#」+「赤の値2桁」+「緑の値2桁」+「青の値2桁」で指定します。ちなみに16進数とは「0123456789ABCDEF」で0が最小、Fが最大となります。「rgb()」の()内に、「赤の値」+「緑の値」+「青の値」で指定します。10進数の範囲は0~255で、これは16進数の00~FFに該当します。class="green">カラーコード(10進数)による指定</p></body></html>Webブラウザで表示すると、以下のようになります。