RenojiStock IT 旅メモ Lifeメモ Diary AboutUs
ITメモ
CSS
リファレンス / Refarence
画像
CSSで画像の角度を替える方法 CSSで画像を切り替える方法 画像間の隙間をなくす方法 画像にテキストを回り込ませる方法
その他
ブロック要素を横並びにする方法(「float」の使い方) 引用符の指定 インライン要素をブロック要素にする テーブル以外のブロック要素で画像を中央配置する方法 テキストを自動的に改行させない方法 テーブルセルで、半角文字の長文を自動改行させて表示させる CSSの優先順位 【スマホ対策】文字の大きさを自動的に大きくされないようにする方法 【スマホ対策】モニターサイズによってCSSをかき分ける方法
CSSの書式
CSSをHTMLにリンクする方法 CSSコードの書き方 ヘッダーの書き方 CSSのコメント(CSSファイル) セレクターの指定方法 CSSで使用される単位 <a>タグ「リンク」のデザイン指定方法 position(ポジション)の使い方
color - テキストの色を指定 opacity - 透明度を指定
マージン
margin - マージン(境界線外側余白)の設定 margin-top - Topマージン(境界線外側余白)の設定 margin-right - Rightマージン(境界線外側余白)の設定 margin-bottom - Bottomマージン(境界線外側余白)の設定 margin-left - Leftマージン(境界線外側余白)の設定
パディング
padding - パディング(境界線内側余白)の設定 padding-top - Topパディング(境界線内側余白)の設定 padding-right - Rightパディング(境界線内側余白)の設定 padding-bottom - Bottomパディング(境界線内側余白)の設定 padding-left - Leftパディング(境界線内側余白)の設定
ボーダー
border - 境界線など、線の設定 border-top - ボーダートップの一括設定 border-right - ボーダーライトの一括設定 border-bottom - ボーダーボトムの一括設定 border-left - ボーダーレフトの一括設定 border-width - 境界線・線の太さ設定 border-top-width - ボーダートップの太さ設定 border-right-width - ボーダーライトの太さ設定 border-bottom-width - ボーダーボトムの太さ設定 border-left-width - ボーダーレフトの太さ設定 border-style - 境界線・線の線種設定 border-top-style - ボーダートップの線種設定 border-right-style - ボーダーライトの線種設定 border-bottom-style - ボーダーボトムの線種設定 border-left-style - ボーダーレフトの線種設定 border-color - 境界線・線のカラー設定 border-top-color - ボーダートップのカラー設定 border-right-color - ボーダーライトのカラー設定 border-bottom-color - ボーダーボトムのカラー設定 border-left-color - ボーダーレフトのカラー設定 border-spacing - テーブルセルの枠線間の距離を指定 border-radius - ブロック要素のコーナー設定プロパティ(ブロックの角を丸くする方法) border-top-left-radius - ブロックの角を丸くする方法 border-top-right-radius - ブロックの角を丸くする方法 border-bottom-left-radius - ブロックの角を丸くする方法 border-bottom-right-radius - ブロックの角を丸くする方法
アウトライン
outline - リンク・フォーム部品のフォーカス時のライン形式指定 outline-width - リンク・フォーム部品のフォーカス時のライン形式指定 outline-style - リンク・フォーム部品のフォーカス時のライン形式指定 outline-color - リンク・フォーム部品のフォーカス時のライン形式指定
レイアウト
float - ブロック要素・画像などの表示位置を指定 clear - floatの設定を解除 z-index - 要素同士の重なり順序を指定 box-shadow - ボーダーラインに影をつける overflow - コンテンツが要素エリアを超えた場合の処理 overflow-x - コンテンツが要素エリアを超えた場合の処理 overflow-y - コンテンツが要素エリアを超えた場合の処理 visibility - 要素を表示・非表示の切り替え display - 各要素の表示形式を変更 position - 要素のポジショニングを指定 top - 要素のTopポジションを指定 left - 要素のleftポジションを指定 bottom - 要素のbottomポジションを指定 right - 要素のrightポジションを指定
サイズ
width - 要素の横幅を指定 height - 要素の高さを指定 min-width - 最小の横幅を指定 min-height - 最小の高さを指定 max-width - 最大の横幅を指定 max-height - 最大の高さを指定 clip - 画像などの一部の矩形領域だけをクリップ(抜き出し)し、表示 box-sizing - height や width が対象とする領域を指定 vertical-align - 親要素に対する上下方向の配置を指定
コンテント作成
quotes - 引用符を指定 content - コンテンツ前後のCSSによる挿入 counter-reset - contentで挿入するカウンタをリセット counter-increment - contentで挿入するカウンタをカウントアップ
リスト
list-style - リストスタイルを一括指定 list-style-type - リストマーカーの種類を指定 list-style-image - リストマーカーのイメージを指定 list-style-position - リストマーカーの位置を指定
印刷
page-break-before - 印刷時に、要素直前で改ページ page-break-after - 印刷時に、要素直後で改ページ page-break-inside - 印刷時に、この要素の途中では改ページを禁止 size - 印刷時のページのサイズを指定 marks - 印刷時につけるトンボを指定 page - @pageで定義した名前を参照し、@page設定の内容を適用する orphans - 印刷時、ページ下部に最低限印字する行数を指定。 widows - 印刷時、ページ上部に最低限印字する行数を指定
背景
background - 背景色や背景画像を指定 background-color - 背景の色を指定 background-image - 背景画像を指定 background-repeat - 背景画像のリピート設定 background-attachment - スクロールバーがある場合の背景画像の対応を設定 background-position - 背景画像を表示する際の基準位置を指定 background-clip - 背景画像を表示する領域を指定 background-size - 背景画像のサイズを指定
フォント
font - フォントの一括指定 font-style - フォントスタイルを指定 font-variant - フォントの変換ルールを指定 font-weight - フォントの太さを指定 font-size - フォントサイズを指定 line-height - 行の高さを指定 font-family - フォントファミリを指定 font-stretch - フォントの横幅を指定 font-size-adjust - フォントの x-heightを指定
テキスト
text-indent - 段落の最初の 1行などをインデント(字下げ) text-align - テキストの配置を指定 text-decoration - 下線など、テキストの修飾を指定 text-underline-position - 下線の表示場所を指定 text-shadow - テキストに影をつける text-transform - テキストに影をつける white-space - 要素のテキストを自動改行、複数の空白をひとつの空白に置換、改行を空白に置換するかを指定 word-break - 自動改行の設定を指定する word-wrap - 英語の単語の途中で表示領域の横幅による自動改行を許可するか否かを指定
文字間隔
word-spacing - 単語間の隙間を指定 letter-spacing - 文字間の隙間を指定 text-justify - 文章右端空白にならないように、単語間・文字間のスペースを調整 text-autospace - 表意文字(漢字)と非表意文字(半角英数字)の隙間を指定 text-kashida-space - アラビア語などのテキスト配置を最善化 layout-grid - (IE独自仕様)行間・文字間のスペース調整 layout-grid-line - (IE独自仕様)行間スペースを指定 layout-grid-char - (IE独自仕様)文字間スペースを指定 layout-grid-mode - (IE独自仕様)行間(line)・文字間(char)のどちらのスペース調整をするか指定 layout-grid-type - (IE独自仕様)スペース調整の方式を指定
文書方向
writing-mode - 縦書きを指定 direction - unicode-bidi -
ルビ -
ruby-align - ルビテキストの右寄せ、左寄せ等の値を指定 ruby-overhang - ルビ対象文字の前後文字に覆いかぶさるかを指定 ruby-position - ルビテキスト配置位置を指定
テーブル
caption-side - テーブルのキャプション表示位置を指定 table-layout - テーブルのレイアウト方式を指定 border-collapse - 隣り合ったテーブルセルの枠線の描画方法を指定 border-spacing - 隣り合ったテーブルセルの枠線間の距離を指定 empty-cells - 空セルを表示するか指定
ユーザインタフェース
cursor - マウスカーソルの形状を指定 ime-mode - テキストフォームフォーカス時の日本語変換(IME)の動作 behavior: url() - ビヘイビア機能(動作を一括指定)
スクロールバー
scrollbar-base-color - スクロールバーの設定 scrollbar-track-color - スクロールバーの設定 scrollbar-face-color - スクロールバーの設定 scrollbar-shadow-color - スクロールバーの設定 scrollbar-darkshadow-color - スクロールバーの設定 scrollbar-highlight-color - スクロールバーの設定 scrollbar-3dlight-color - スクロールバーの設定 scrollbar-arrow-color - スクロールバーの設定
音声関連
volume - 音量を指定 voice-volume - 音量を指定 speak - 音声ユーザエージェントでの読み上げ方法を指定 pause - 音声ユーザエージェントで読み上げる際の間を指定 pause-before - 要素を読む前の間 pause-after - 要素を読む後の間 cue - 要素の前後で読み上げる音声を指定 cue-after - 要素の前で読み上げる音声を指定 cue-before - 要素の後で読み上げる音声を指定 play-during - 背景音を url(back.wav)で指定 azimuth - 音源の水平方向を -360deg~360deg の角度で指定 elevation - 音源の垂直方向を -90deg~90deg の角度で指定 speech-rate - 読み上げるスピードを指定 voice-family - 声の候補を指定 pitch - 声のピッチを指定 pitch-range - 声の抑揚 stress - アクセント部分の抑揚 richness - 声の通りやすさ speak-punctuation - セミコロンなどの区切り文字の読み方 speak-numeral - 数字の読み方を指定 speak-header - テーブル セル 読み上げ時にヘッダ情報を読むかを指定




CSS

リファレンス / Refarence
画像

その他



CSSの書式


マージン

パディング

ボーダー

アウトライン

レイアウト

サイズ

コンテント作成

リスト

印刷

背景

フォント

テキスト

文字間隔

文書方向

ルビ -

テーブル

ユーザインタフェース

スクロールバー

音声関連