【CSS】コード一覧

めっちゃ作りかけです期待しないでください

コメントアウト【/*  */】

【/*    */】この記号で囲まれた部分はコードへの影響がでません。日本語で説明文を挿入したい時に活躍します。php編集時にも使えます。

 

表示方法【display】

【display: inline;】横に並べて表示
【display: block;】縦に積むように表示
【display: inline-block;】両方の特性を併せ持つ
【display: none;】非表示

コンテンツの表示方式には大きく【inline】【block】【inline-block】という物があります(まだあるけどよく使うのはこの3つ)詳しくしりたいならばこちらの検索結果を参照【CSS display inline block】

 

テキスト関連

文字の大きさを指定【font-size】

文字デフォルト値
100% = 16px =1.0em = 1.0rem =  12pt

【font-size:100%;】 親要素からの相対指定
【font-size: 16px; 】絶対値で指定
【font-size: 1.0em;】親要素からの相対指定
【font-size: 1.0rem;】HTMLからの相対指定
【font-size: 1.0vw;】ビューポートの幅に対する相対指定
【font-size: 1.0vh;】ビューポートの高さに対する相対指定

 

文字を太文字に【font-weight】

【font-weight: bold;】文字の太さを指定

太さを変える命令は色々ありますが基本的に『bold』しか使いません。

 

テキストに線【text-decoration】

【text-decoration: none;】(ライン非表示)
【text-decoration: underline;】(下線)
【text-decoration: line-through;】(打消し線)
【text-decoration: blink;】(文字点滅)[/box]

テキストにアンダーラインや打ち消し線を与える時に使用します。もしくは『テキストリンクへ自動的に与えられるアンダーラインを消す』という使い方もできます。

 

文字色の変更【color】

【color: black;】文字の色を指定

 

余白関連

コンテンツ境界外の余白【margin】

【margin: 10px;】コンテンツの境界から外の空間を調節

 

コンテンツ境界内の余白【padding】

【padding: 10px;】コンテンツの境界の内側の空間を調節

 

背景の装飾【background】

【background: black;】背景色を指定

 

ボーダーライン【border】

【border: 2px solid black;】コンテンツの境界にボーダーラインを引きます。数値は線の太さ 【solid】は線の種類 【black】は色を指定します。線の種類も色々なコードがあります。

【border-radius: 5px;】四隅を丸める命令。値にゼロを入力すれば完全な四角形になります。値が大きくなるほど角が丸まります。

 

状態変化の秒数を指定【transition】

【transition: 0s;】『通常時からマウスオン時に変わるまでの時間』もしくは『マウスオン時から通常にへ戻るまでの時間』を指定するので基本的には『hover』との連携で使う事になる。値がそのまま変化にかかる秒数となり、アニメーション化する。【transition-duration】という記述でも同様の効果が得られる。

 

画像を拡大【transform】

【transform: scale(1.0);】値1.0で100%表示。マウスオン時に画像を少し拡大させる時などに使用します。

 

画像を横幅いっぱいに表示【cover】

background-size:cover!important;

 

マウスオン時を指定【hover】

【○○○ a hover{】○○○で指定した要素にマウスが乗った状態に起こす変化を作る事ができます。

 

透明度を指定【opacity】

opacity:1;

マウスオン時の透明度を指定します。値をゼロにすれば完全な透明になり、1にすれば完全な不透明になります。半透明にしたければ『0.5』を与えてください。

 

背景だけに透明度を指定【rgba】

rgba(255,255,255,1)一番右の値が透明度

 

画像をグラデーションで白くする【linear-gradient】

linear-gradient(rgba(255,255,255,0) 0,rgba(255,255,255,1) 50%,rgba(255,255,255,1) 100%);

 

影を付ける【shadow】

box-shadow: 5px 5px 5px #848484;

 

角を丸める【border-radius】

border-radius: 10px 10px 10px 10px;

 

絶対命令【!important】

!important

 

僕の味覚がシュミテクトに破壊されました