Cascading Style Sheets

出典: 謎の百科事典もどき『エンペディア(Enpedia)』
Jump to navigation Jump to search

Cascading Style Sheets(カスケーディングスタイルシート、CSS)とは、HTMLの装飾に使う言語。スタイルシートとかシーエスエスと呼ばれる事もある。

概要[編集]

HTMLファイル内に書く事もあるが、大抵は外部ファイルにして<link>タグで読み込む。

同じCSSでもブラウザによっては解釈が異なる部分があったりして、ブラウザが変わると描画される内容が異なる場合もあり、結構面倒だったりする。

仕様を決めているのは「W3C」と呼ばれる団体で、CSSのチェッカーがあったりする。

主な使い方[編集]

<div></div>タグで対象範囲を囲ってさまざまなスタイルを設定する事が多い。

  • 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とか[編集]

Enpedia Logo.png

  • drop-shadow()だと透過設定考えて影付けてくれるようだが、MediaWiki上ではうまく再現できない。ソース見ると<div style="/* insecure input */">(安全でない入力)となる。
Enpedia Logo.png
  • イメージ的には以下。
Enpedia Logo shadow.png

transform:rotate[編集]

  • transform-originで回転軸の位置を指定し、transform:rotateで回転させる。これは右周り45度。

Enpedia Logo.png


  • 180度。

Enpedia Logo.png

box-reflect[編集]

  • 反射しているような効果もCSSで出来る。
ENPEDIA
  • しかしWebブラウザがChromeじゃないとうまく表示されなかったりする。

hover(ホバー)[編集]

  • マウスカーソルを合わせると表示が変わる。なぜかインラインでは再現できない模様。

ドット絵[編集]

本来のCSSの役割とは違う使い方になる気がするが、「ドット絵」の作成に用いられる事がある[1]

脚注[編集]

  1. CSSでドット絵を描いてみよう”. Blogger (2016年9月1日). 2019年3月15日確認。

関連項目[編集]

外部リンク[編集]

他事典リンク¦ウィキペディア ¦ニコニコ大百科 ¦コトバンク