アトリエ・エクレア

2DCG&3DCG, プログラミング, 日記などを掲載してます。

CSS

CSS

★ HTML テンプレート

  • HTMLに、外部CSSへのリンクを置くのが、現在は一般的。
  • CSS, Javascriptは、読み込んだ順に設定される。
  • ブラウザ間におけるレイアウトずれを防ぐためにリセット用のCSSを利用する。
    ※やりすぎると、ブラウザごとの味が無くなるので、必要最小限にする。
  <!DOCTYPE html>
  <html lang="ja">
  <head>
   <meta charset="UTF-8" />
   <title>htmlテンプレート</title>
   <link rel="stylesheet" href="my-reset.css" type="text/css" />
   <link rel="stylesheet" href="my-css.css" type="text/css" />
   <script src="my-javascript.js"></script>
  </head>
  <body>
   <p>テンプレートです。</p>
   <img src="img/test.jpg" />
  </body>
  </html>

★ コメント

HTMLのコメント

  <!-- HTMLの一行コメント -->
  
  <!-- HTMLの
  複数行のコメント -->

CSSのコメント

  /* CSSの一行コメント */

  /* CSSの
  複数行のコメント */

JavaScriptのコメント

  // JavaScriptの一行コメント ※改行まで有効

  /* JavaScriptの一行コメント */

  /* JavaScriptの
  複数行のコメント */

★ 文字コードの指定

CSSファイルの最初に定義する。

  @charset "utf-8";  /* utfは大文字でも小文字でもいい */

★ スタイルの基本的な書き方

セレクタ{プロパティ:値;}

  @charset "utf-8";                     /* 文字コード */

  h1{                                   /* セレクタ */
   background-color: rgb(255, 255, 0);  /* プロパティ:値; */
  }

★ idセレクタ, classセレクタ

 

★ 複数のセレクタ

 

★ 子孫セレクタ

 

★ 擬似クラス

※これらは一部

  • :link
    未訪問のリンク
  • :visited
    訪問済のリンク
  • :hover
    カーソルが乗っていて、アクティブではない
  • :active
    クリック中
  • :focus
    フォーカスされた(フォームのテキスト入力など)
  • :first-child
    最初の子要素
  • :last-child
    最後の子要素
  • :last-child
    最後の子要素
  • :nth-child(n)
    n番目の子要素

★ 相対単位

フォント関連

em   /* 当該要素のfont-sizeの計算値。
        font-sizeプロパティ自身で使用の場合、要素の継承されたフォントサイズの値を表す */
ex   /* 当該要素で用いられるfontのx-height。
        一般的に、フォントにおける小文字の高さに相当。
        多くのフォントで 1ex ≈ 0.5em */
ch   /* 現在のフォントの"0"(ゼロ)の幅 */
rem  /* ルート要素のfont-size。ルート要素で使うと初期値を表す */

ビューポート-パーセンテージ

vh    /* ビューポートの高さの 1/100 */
vw    /* ビューポートの幅の 1/100 */
vmin  /* ビューポートの高さまたは幅の、最小値の 1/100 */
vmax  /* ビューポートの高さまたは幅の、最大値の 1/100 */


★ 絶対単位

px   /* 表示しているデバイスによる。
        スクリーンディスプレイでは、通常はディスプレイの1デバイスピクセル(ドット)。
        プリンタや非常に高解像度のスクリーンでは、
        CSSの1ピクセルは複数のデバイスピクセルを含むため、ピクセル/インチは約96 */
mm   /* 1ミリメートル */
cm   /* 1センチメートル (10ミリメートル) */
in   /* 1インチ (2.54センチメートル) */
pt   /* 1ポイント (1インチの 1/72) */
pc   /* 1パイカ (12ポイント) */

★ borderプロパティ

/* まとめて設定 */
border: 1px solid #FF0000;
/* 個別に設定 */
border-top: 10px solid #000000;
border-right: 10px dashed blue;
border-bottom: 10px double rgb(150, 200, 255);
border-left: 10px dotted rgba(255, 200, 200, 0.8);

★ border-radiusプロパティ

borderの角を丸める

/* 正円の角丸 */
border-radius: 20px;                  /* 全て */
border-radius: 20px 10px;             /* (左上&右下) (右上&左下) */
border-radius: 20px 10px 30px;        /* (左上) (右上&左下) (右下) */
border-radius: 20px 10px 30px 40px;   /* (左上) (右上) (右下) (左下) */
/* 楕円の角丸 ※纏めることも可能 */
border-radius: 10px 20px 20px 30px / 20px 30px 10px 20px;  /* 水平方向の半径/垂直方向の半径 */
/* 個別に設定 */
border-top-left-radius: 20px 20px;     /* 正円(水平方向 垂直方向) */
border-top-right-radius: 20px 30px;    /* 楕円(水平方向 垂直方向) */
border-bottom-right-radius: 10px 20px;
border-bottom-left-radius: 30px 20px;

★ margin, paddingプロパティ

marginはボーダーの外側、paddingはボーダーの内側の、余白の幅を指定。
※いずれもボーダーの幅は含まず。

/* まとめて設定 */
margin: 20px;                  /* 全て */
margin: 20px 10px;             /* (左右) (上下) */
margin: 20px 10px 30px;        /* (上) (左右) (下) */
margin: 20px 10px 30px 40px;   /* (上) (右) (下) (左) */

margin: auto;     /* 自動 */
/* 個別に設定 */
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;

★ box-sizingプロパティ

 

★ background-colorプロパティ

背景色

background-color: rgb(100, 100, 255);
/* background-image と background-color を同時に設定した場合 */
background-image: url(img/test.jpg);  /* background-imageが優先される。透過ではbackground-colorが見える。 */
background-color: blue;

★ background-imageプロパティ

背景画像

background-image: url(img/test.jpg);
/* background-image と background-color を同時に設定した場合 */
background-image: url(img/test.jpg);  /* background-imageが優先される。透過ではbackground-colorが見える。 */
background-color: blue;

★ box-shadowプロパティ

要素に影をつける

box-shadow: 0px 0px 20px 10px rgba(0,0,0,0.5);   /* 水平距離(正負) 垂直距離(正負) ぼかし距離(正のみ) 広がり距離(正負) 色 */
box-shadow: 0px 0px 20px 10px rgba(0,0,0,0.5) inset;  /* insetで内側へ */

★ text-shadowプロパティ

テキストに影をつける

a

★ colorプロパティ

文字色

color: blue;
color: #0000FF;

★ opacityプロパティ

半透明度(範囲:0~1)

opacity: 0.7;

★ font-familyプロパティ

複数の候補を並べることが可能。すべて無い場合はブラウザのシステムフォントになる。

  • sans-serif
    ゴシック系のフォント
  • serif
    明朝系のフォント
  • cursive
    筆記体。草書・行書体のフォント
  • fantasy
    装飾的なフォント
  • monospace
    等幅フォント
font-family: "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, Arial, sans-serif;

★ font-sizeプロパティ

文字の大きさ

font-size: 20px;

★ font-styleプロパティ

文字のスタイル
※日本人は、イタリック体と斜体を同一視する場合があるが、厳密には別物。

font-style: normal;   /* 標準フォント :初期値 */
font-style: italic;   /* イタリック体 :筆記体に似た装飾が特徴 */
font-style: oblique;  /* 斜体 */

★ text-alignプロパティ

行揃えの位置

text-align: left;
text-align: right;
text-align: center;
text-align: justify;  /* 両端揃え */

★ letter-spacingプロパティ

字間を調整

letter-spacing: 1em;

★ line-heightプロパティ

行の高さ(行送り)  ※横書きの場合、文字の高さに行間を足したもの

line-height: 15px;

★ vertical-alignプロパティ

縦方向の揃え位置(テキストや画像など)

vertical-align: top;
vertical-align: middle;
vertical-align: bottom;
vertical-align: 4px;

★ floatプロパティ

ul{
	overflow: auto;
}

ul li{
	float: left;
}

floatを解除するには、後続の要素に以下を指定する。

  • clear: both;
  • clear: left;
  • clear: right;

★ overflowプロパティ

  • overflow: visible
    デフォルト。コンテンツはクリップされず、ボックスより外側に描画される可能性あり。
  • overflow: hidden
    コンテンツはクリップされる。スクロールバーなし。
  • overflow: scroll
    コンテンツはクリップされ、スクロールバーを表示。
  • overflow: auto
    ユーザエージェントに依存する。※heightなどの指定でスクロールバー表示になる場合がある。

★ positionプロパティ

  • static
    初期値。特に配置方法を指定しない。
  • relative
    相対位置を指定。staticを指定した場合の表示位置が基準となる。
  • absolute
    絶対位置を指定。
    親要素のpositionプロパティに、static以外の値が指定されている場合、親要素の左上が基準位置となる。
    親要素のpositionプロパティに、static以外の値が指定されていない場合、ウィンドウの左上が基準位置となる。
    ※static以外の値が指定された親要素がない場合、その親、さらに親へと遡る。
  • fixed
    絶対位置を指定。スクロールしても位置が固定されたまま。
div{             /* この例ではimgの親要素 */
	width: 500px;
	height: 300px;
	margin: 100px;
	/* topとleftを設定していないので、結果的にstaticと同じ位置 */
	position: relative;  /* static以外の値 */
}

div img{
	position: absolute;  /* static以外の値を設定した親(この例ではdiv要素)の左上が基準 */
	top: 50px;
	left: 100px;
}

(親になる要素にposition: relative;を指定せずに) position: relative;の場合は、
その要素を含有するボックスの大きさもそれに追随する。
(親になる要素にposition: relative;を指定して) position: absolute;の場合は、
その要素を含有するボックスの大きさはそれに追随せず、フロートしたような状態になる。


★ linear-gradient関数

線形のグラデーション

/* 方向, 色 始点の位置, (色 途中点の位置), 色 終点の位置 */
background: linear-gradient(to top right, blue 0%, white 50%, green 100%);

/* 始点と終点の位置を省略した場合、始点が0%、終点が100% */
background: linear-gradient(45deg, rgba(200,100,255,0.5), rgba(150,100,100,0.5));

★ displayプロパティ

ボックスの種類を指定する。※表示・非表示を兼ねる。

display: none;    /* 非表示。 */
display: inline;  /* インラインボックスとして表示 */
display: block;   /* ブロックボックスとして表示 */

★ top, left プロパティ

a

a


コメントの投稿

非公開コメント

マイブログへようこそ♪
PLEASANT_DRAGON

2DCG&3DCG,プログラミング,
日記などを掲載中☆

(*´▽`*)コメント大歓迎です☆

最新記事
記事一覧

全ての記事を表示する

カテゴリ
SAI (0)
mi (2)
C (1)
C++ (1)
C# (0)
VBA (0)
月別アーカイブ
最新コメント
RSSリンクの表示
リンク
FC2ブログランキング

FC2Blog Ranking

ピックアップ商品1♪










カレンダー
10 | 2017/11 | 12
- - - 1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 - -
ブログ内検索フォーム
プロフィール

エクレア

Author:エクレア


  • 2DCG&3DCGの創作活動をしています。

  • SF系のメカが大好物。

アクセスカウンター
Twitter
ピックアップ商品2♪