border / 枠線
- [ border 実例 ]
- solid (実線) dashed (破線) double (二重線)
- groove (凹線) ridge (凸線) inset (内側が凹線)
- outset (内側が凸線) dotted (玉線)
[ css 一覧 プロパティ border ]
cursor / カーソル
- [ cursor 実例 ]
- カーソルを上に置くとそれぞれの表示になります。
- crosshair (十字)、pointer (指)、move (十字矢印)、text (I)、wait (砂時計)、help (はてな・バルーン)
- e-resize・w-resize (左右矢印)、n-resize・s-resize (上下矢印)
- ne-resize・sw-resize (斜右上左下矢印)、nw-resize・se-resize (斜左上右下矢印)
[ css 一覧 プロパティ cursor ]
direction / 文字方向
- [ direction 実例 ]
- 下記は"direction: rtl; 右から左"と記述しています。
- direction: rtl; 右から左
[ css 一覧 プロパティ direction ]
font / フォント
- [ font 実例 ]
- 元文: それぞれ適用したcss(font)の変化をご覧ください。
- (font-variant: small-caps;)例: それぞれ適用したcss(font)の変化をご覧ください。
- (font-size-adjust .58;)例: それぞれ適用したcss(font)の変化をご覧ください。
- (font-stretch;)例: それぞれ適用したcss(font)の変化をご覧ください。
- [ font 補足 ]
- スモールキャップ(font-variant: small-caps;)はスモールキャピタル表示が適用されます。(英字部分をご覧ください。)
- font-size-adjust .58;は指定したfont-familyが適用されなかった場合に文字の大きさ(サイズ)を調整します。
- font-stretch: ultra-expanded;は縦長・横長を指定するcssですが、対応ブラウザが限られる為、ほとんどの方が変化なく表示されていると思います。
- * font-stretchはIE 6.0 / Mozilla Firefox 1.5 / Sleipnir 2.3 / Opera 9.1で使用不可能です。
[ css 一覧 プロパティ font ]
[ css サンプル一覧 ]
link(aタグ) / リンク関連
- [ link 実例 ]
- css一覧 link1: text-decoration: overline;をvisitedに適用。
- css一覧 link2: text-decoration: underline overline;をhoverに適用。
- css一覧 link3: text-decoration: underline;をactiveに適用。
[ css 一覧 プロパティ link ]
[ css サンプル一覧 ]
overflow / はみ出る部分の表示
- [ overflow 実例 ]
■overflow: auto;
overflowはブロック要素に使用可能なcss(スタイルシート)です。ブラウザに依存しています。■overflow: hidden;
overflowはブロック要素に使用可能なcss(スタイルシート)です。はみ出した部分は非表示になります。■overflow: scroll;
overflowはブロック要素に使用可能なcss(スタイルシート)です。スクロールで閲覧可能です。■overflow: visible;
overflowはブロック要素に使用可能なcss(スタイルシート)です。はみ出して表示されます。
[ css 一覧 プロパティ overflow ]
[ css サンプル一覧 ]
position / 相対配置、絶対配置
[ position 実例 ]
[ css 一覧 プロパティ position ]
[ css サンプル一覧 ]
table-layout / テーブル
- [ table 実例 ]
-
実例table_a ヘッダ ヘッダ データ データ データ 実例table_b ヘッダ ヘッダ データ
データデータ データ
[ css 一覧 プロパティ table ]
[ css サンプル一覧 ]
text / テキスト
- [ text 実例 ]
- line-height: 120%; 行間の調節
- letter-spacing: 10px; 文字間の間隔を指定
- text-transform: capitalize; 先頭文字を大文字に変換
- text-transform: uppercase; 全大文字に変換
- TExt-transform: lowercase; 全小文字に変換
- word-spacing: 0.5em; 単語の間隔を指定
- word-spacing: normal; 単語の間隔を指定
[ css 一覧 プロパティ text ]
[ css サンプル一覧 ]
ul,li / リスト・メニュー
- [ menu_yoko 実例 ]
[ css 一覧 プロパティ ul,li ]
[ css サンプル一覧 ]
visibility / 表示・非表示の指定
- [ visibility 実例 ]
- 下の段は実例table_aを参考に非表示(collapse)を左のヘッダに適用しています。
-
実例table_a ヘッダ ヘッダ データ データ データ - visibility: hidden; 非表示
- 下の段は非表示(hidden)を適用しています。
- visibility: hidden; 非表示
- 下の段は非表示(visible)を適用しています。
- visibility: visible; 表示あり
[ css 一覧 プロパティ visibility ]
[ css サンプル一覧 ]
cssのみで角丸
- [ cssのみで角丸 実例 ]
-
本文を入力します
