Cascading Style Sheets
ナビゲーションに移動
検索に移動
Cascading Style Sheets（カスケーディングスタイルシート、CSS）とは、HTMLの装飾に使う言語。スタイルシートとかシーエスエスと呼ばれる事もある。
概要[編集]
HTMLファイル内に<style>タグを利用して直接書く事もあるが、大抵は外部ファイルにして<link>タグで読み込む。
同じCSSでもブラウザによっては解釈が異なる部分があったりして、ブラウザが変わると描画される内容が異なる場合もあり、結構面倒だったりする。
仕様を決めているのは「W3C」と呼ばれる団体で、CSSのチェッカーがあったりする。
主な使い方[編集]
<div></div>タグや<span></span>タグで対象範囲を囲ってさまざまなスタイルを設定する事が多い。
- MediaWikiの記事内でも、「<div style="text-shadow: 2px 2px 2px gold;">文字列</div>」のように書くと、文字に影を付けたりできる。
- <div>で囲ったエリアはborderをつけると確認しやすい。
- <div>で囲ったエリア内の文字を装飾したり、borderで囲って影を付けたりもできる。
- <div>で囲ったエリアで間隔を開けるには margin を使う。margin-top: 20px; margin-bottom: 20px だとこのくらい。
width[編集]
幅の調整には width を使う。ここは width:50%; で、幅が半分のサイズになる。
ここは width:25%;
一つの width:80% の<div>の中に複数の<div>を入れ込むと、
入れ子1 width:50%;
入れ子2 width:80%
こんな感じになる。
中央揃えとか[編集]
- padding: 2px; とすると、<div>で囲った内側に2px分の空白を作れる。
text-align: center; とすると文字が中央に来る。
margin: auto; とすると<div>で囲った部分が中央に来る。
margin-left: auto; とすると<div>で囲った部分が右に来る。
さらにtext-align: right; とすると文字が右に来る。
flexとか[編集]
- display: flex; を使うと横並びに出来る。
1つめの内包したdiv要素
2つめの内包したdiv要素
3つめの内包したdiv要素
4つめの内包したdiv要素
drop-shadowとか[編集]
- box-shadowではPNGの透過設定など、そんなの関係ねぇという状態になる。
- drop-shadow()だと透過設定考えて影付けてくれるようだが、MediaWiki上ではうまく再現できない。ソース見ると<div style="/* insecure input */">（安全でない入力）となる。
- イメージ的には以下。
transform:rotate[編集]
- transform-originで回転軸の位置を指定し、transform:rotateで回転させる。これは右周り45度。
- 180度。
box-reflect[編集]
- 反射しているような効果もCSSで出来る。
- ENPEDIA
- しかしWebブラウザがChromeじゃないとうまく表示されなかったりする。
hover（ホバー）[編集]
- マウスカーソルを合わせると表示が変わる。なぜかインラインでは再現できない模様。
ドット絵[編集]
本来のCSSの役割とは違う使い方になる気がするが、「ドット絵」の作成に用いられる事がある[1]。
アニメーション[編集]
くるくる
その他[編集]
- 画像調整
- filter: saturate() とか contrast() 、brightness() などを使って画像のコントラストや彩度、明度などを調整可能だが、MediaWiki上ではうまく再現できない。
脚注[編集]
- ↑ “CSSでドット絵を描いてみよう”. Blogger (2016年9月1日). 2019年3月15日確認。
関連項目[編集]
外部リンク[編集]
- 『CSS Zenngarden』（https://csszengarden.com/）
- CSSリファレンス - とほほのWWW入門
- CSS: カスケーディングスタイルシート - Mozilla Developer Network (MDN)
- CSS Validation Service - W3CのCSS検証サービス