CSSで使うボーダー(線)の種類【実線・点線・破線・二重線】

ボーダーの種類

実線 solid


点線 dotted


破線 dashed


二重線 double


立体的にくぼむ groove


立体的に盛り上がる ridge


くぼませる inset


盛り上げる outset




スタイルシートで使うボーダー種類一覧です。サンプルでは分かりやすいようにボックス表示で表現しています。ボーダーの太さは8pxとなっています。

ちなみにボーダー表示させない場合は「none」となります。


カテゴリ | CSS | このブログの読者になる | 更新情報をチェックする

リストマークのスタイルを指定するプロパティ

リストマークスタイル

list-style-typeプロパティ

list-style-type:種類


list-style-typeプロパティではリストマーク種類を指定できます。リストマーク種類には以下のようなものがあります。

続きを読む
カテゴリ | CSS | このブログの読者になる | 更新情報をチェックする

CSSスタイルシートによるホームページレイアウト

CSSレイアウト

ホームページの装飾、レイアウトCSSスタイルシートを使って設定します。

div要素コンテナボックス)をうまく使いCSSでサイズやマージン、ボーダーを決めていきます。


CSSレイアウトといってもHTMLタグでの設定もある程度必要となります。HTMLの各まとまりに分ける必要があります。


続きを読む
カテゴリ | CSS | このブログの読者になる | 更新情報をチェックする

CSSファイルの文字宣言の仕方【スタイルシートの文字コード】

CSSファイル文字宣言

@charset "文字コード";

(例)
@charset "UTF-8";



CSSファイル文字宣言について解説します。CSSファイル(拡張子.css)の先頭に『@charset "文字コード";』記載します。

続きを読む
カテゴリ | CSS | このブログの読者になる | 更新情報をチェックする

first-line・first-letter擬似要素 始めの行と1文字目

first-line・first-letter擬似要素

ファーストライン・レター擬似要素は、指定した要素の始めの行と1番目の文字を対象にすることが出来ます。

first-line擬似要素
要素名:first-line{宣言}

first-line擬似要素
要素名:first-letter{宣言}



ファーストライン擬似要素は、指定した要素の1行目に適応され、ファーストレター擬似要素1文字目に適応されます。


1行目を目立たしたり、1文字目を強調したい時などに使えそうです。


カテゴリ | CSS | このブログの読者になる | 更新情報をチェックする

before・after擬似要素 要素の始めと終わりに挿入する方法

before・after擬似要素

ビフォー・アフター擬似要素は、指定した要素の始めと終わりに文字列画像スタイルシートから挿入することが出来ます。

before擬似要素
要素名:before{content:値}

after擬似要素
要素名:after{content:値}


beforeafter擬似要素ではcontentプロパティを使用して使います。before擬似要素は指定した要素の始まりに、after擬似要素は指定した要素の終わりに、それぞれ文字列や画像を挿入します。

続きを読む
カテゴリ | CSS | このブログの読者になる | 更新情報をチェックする

first-child擬似クラス ある親要素の一番初めの子要素を指定

first-child擬似クラス

ファーストチャイルド(つまり一番初めの子要素)の状態を指定してスタイルを変更します。

子孫セレクタを使用する
親要素 最初の要素名:first-child{宣言}

子供セレクタを使用する
親要素 > 最初の要素名:first-child{宣言}


ファーストチャイルド擬似クラスは、指定した親要素の最初の子要素を指定しますので、2回目以降出てくる同じ子要素には適応されません。ファーストチャイルド擬似クラス子孫セレクタ子供セレクタ等利用して使用します。


カテゴリ | CSS | このブログの読者になる | 更新情報をチェックする

focus擬似クラス フォームが選択された時の要素の状態

focus擬似クラス

フォーカスフォーム)が選択された時の要素状態を指定してスタイルを変更します。

要素:focus{宣言}


フォーカス擬似クラスは、HTMLの中に入力フォームがある場合に使用する事ができます。フォームが選択された時の要素の効果(スタイル)を指定する事ができます。

続きを読む
カテゴリ | CSS | このブログの読者になる | 更新情報をチェックする

擬似クラスとは?リンクの状態で表示方法を変える!

擬似クラスとは?

要素状態を指定してスタイルを変更します。

a:link リンクが未訪問の状態
a:visited リンクが訪問済み状態
要素名:hover カーソルが乗っている状態
要素名:active クリックされた状態


一番簡単で分かりやすいのは、リンク状態かと思います。リンクの文字色状態には、未訪問の文字色、マウスが上にのっかている状態、選択したときの状態、訪問済みの状態がありますよね。

続きを読む
カテゴリ | CSS | このブログの読者になる | 更新情報をチェックする

属性セレクタの記述方法と使い方【CSSスタイルシート】

属性セレクタ

要素[属性]{宣言}
この要素にこの属性が使われている場所が対象

要素[属性="値"]{宣言}
値まで完全に一致している場所が対象



属性セレクタは、ある要素ある属性が含まれている場所にスタイルを適応したいときに使います。

続きを読む
カテゴリ | CSS | このブログの読者になる | 更新情報をチェックする

About Site(サイト案内) 概要

アクセスアップ方法・アクセスアップツールを中心に紹介しています。出来るだけ易しいサイト作りを目指したいと思います。まだまだコンテンツが少ないですが確実なアクセスアップ方法を紹介しますのでどうぞ宜しくお願いします。アクセスアップ記事以外にもWeb製作のことやiPhoneのこと。ニュースなども取り上げていきます。


◆リンク
http://secretaccess.seesaa.net/
タイトルは『Digital Life -デジタルライフ-
(テキストリンクのみです)
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。