• Home
  • Category
    • Simple
    • Stylish
    • Cute
    • wafuu
    • Illust
    • Pop
    • Other
  • Color
    • White
    • Black
    • Red
    • Blue
    • Yellow
    • Green
    • Purple
    • Brown
    • Pink
    • Colorful
  • Xux Column
  • About
  • Contact

Copyright © 2023 Xux Webzine. All Rights Reserved.

コラム【WEB編】

Xux Column
css3とは

CSSとは?

CSS3のご説明の前に、まずCSSとは何かをご説明します。

CSSとはホームページの文字の色や大きさ、背景、配置といったスタイル(見た目)を設定する言語です。

読み方は「シーエスエス」です。

一般的にWebサイトはHTML(エイチティーエムエル)という言語で書かれており、これにスタイルシートを記述する言語であるCSSを適用することで、普段見ているホームページが構成されています。

HTMLファイルにスタイル(CSSの記述)を含めることも可能ですが、そうしないのはホームページの文字や背景などを、ページ内で統一するためです。

例えば、あるホームページにトップページとお問い合わせページがあったとします。

このとき、それぞれのページでHTMLを記述しますが、同じような見た目にしたい場合、2つのHTMLファイルに、デザインに関する同様の記述をする必要があり、余分な手間がかかります。

そこで見た目に関する共通の記述をCSSファイルとして記述し、それをHTMLに適用することで、複数のHTMLファイルに一貫したデザインを適用できます。

こうすることで、記述したソースコードが読みやすくなりますし、デザインを修正・変更したくなったときに、一括でメンテナンスができるようになります。


CSSのタグとは?

HTMLは「< >」で囲まれた、「タグ」と呼ばれる部品が集まって構成されています。 タグは「/」を入れたタグとペアとなっており、それぞれ「開始タグ」「終了タグ」といいます。

タグで挟まれた部分を「要素」といい、要素をタグで挟みます。

下記に一般的によく使うタグの一部を紹介いたします。

h1~h5タグ(見出しタグ)

h〇というのは見出しタグとして使われます。

よく使うのはh1からh4くらいまでを使う事が多いかと思います。

使い方はいずれも同じですので、難しいことはありません。ただどこで使うかという要所をおさえることは大切となります。

divダグ(ブロックで扱うためのタグ)

divも頻出のタグです。

div自体が非常に重要な意味を持ち、divを設定したからと言って、大きくどうなるというものではありません。

divはブロックのような意味合いがあり「ここからここまでに対して・・・」という形で使います。

全体を一気に作成するのではなく、ブロックごとやっていけばいいと思えると少しWEBページ作成が楽になると思います。

WEBページを閲覧している時も、どこからどこのブロックになっているんだろう?と調べてみるのも良いと思います。

pタグ(段落として使うタグ)

このpタグも頻出です。

これは段落を扱うタグとして使います。

この記事の文章も基本はpタグで書かれています。

普通に文章打ちたいなと考えたらpタグを使うというイメージでよいでしょう。

spanタグ(段落の一部の書式を変えるタグ)

こちらもpタグ同様文章を打ちたいなと考えた際使うタグです。しかし、ちょっと違うのは、pタグは設定すると段落になり2行になります。

pタグは段落として扱われるので、改行されてしまいます。

しかし、spanタグを使うと、2行にはなりません。

spanタグは単体で使うことも当然ありますが、pタグの中にspanを入れて文字の一部の書式を変えるというときによく使います。

span自体が書式を持っているわけではありませんので、上記のように赤くしたり太くしたりという書式をつけるのは、CSSでの設定となります。

imgタグ(画像を表示させるタグ)

画像を表示させるときに使うのがimgタグです。

特段難しいことはありませんが、参照先の設定をしっかりやらないと、画像が表示されなくなります。

プログラミング学習を始めた間もないころは、結構このミスが発生すると思います。

画像がうまく表示できないときには2つを考えましょう。

1つは参照先の指示の出し方が間違っていないか。

もう一つは画像のファイル名が間違っていないか。

基本はこの2点で解決することが多いです。

aタグ(リンクタグ)

自分のページから外部のページへリンクさせたり、自分の他のページにリンクさせたりする際に使うのがaタグです。

aタグは「○○をクリックしたらリンク先に飛ぶ」となるので、「○○」にあたる文字や画像を囲ってあげる形で利用します。


CSS3とは?

CSS3は上記でご説明したスタイルシートの新しい規格(バージョン)のことを指します。

W3Cが仕様書を公開していて、1994年に創設されたW3Cが、CSSの仕様書(TR)を公開しています。

このW3Cが草案から技術をテストしているということです。

そして、全てのテストが終了して国際的に信頼性が高いと認められた技術文書が完成した時に勧告という形で「このCSS3は完成しました」と発表します。

CSS3は3番目のスタイルシートとして、他にも下記のものがあります。

・CSS1:1996年12月に勧告
・CSS2:1998年5月に勧告
・CSS2.1:CSS2の改訂版。2011年6月に勧告

ここまで説明してきたことをひっくり返すことになりますが、正確には「CSS3」という規格は存在しません。

CSSは「level」という段階を持っており、CSS1なら「Cascading Style Sheets, level 1」。

CSS2なら「Cascading Style Sheets, level 2」という総称があります。

上の例で理解頂けるとおり、CSS3は「Cascading Style Sheets, level 3」というのが正式な名前となります。

同じようにlevelという記載をされているCSSですが、CSS3は前のlevelとは1点だけ違う部分があります。

CSS3から機能(モジュール)単位でテストされるようになった点です。

CSS3は新しい機能の追加・改良を小さな部位に分けて実装しています。

そのため、モジュールによって勧告されていたり、まだ勧告には至っていなかったり……草案段階というものもあったりとバラつきが見られます。


CSS3の特徴と従来との違い

CSS3では要素を立体的に浮き上がる様に見せたり、要素の位置を自由自在に指定したり、時間軸を利用することにより動きをつけたりといった様にCSS1やCSS2に比べより自由度が高まりました。

また、元々存在するCSSとCSS3の違いは、前のlevel(レベル)には存在しない新たな仕様が加えられているところです。

今まで使い勝手が悪かったところが便利に使えるようになっています。

特徴としては、CSS3ソースはCSS1やCSS2などのソースと基本的なところに違いはなく、下位互換性(前バージョンとの互換性)があります。

そのため、前規格の記述方法でもそのまま使うことができます。

既存ソースにそのままCSS3ソースを使用可能なので、全部を書き換える必要がないのは非常に強いメリットといえます。

また、CSS3はHTML5のみで使うわけではないことを理解しておきましょう。

セットにされることが多い両者ですが、CSS3はHTML5以外のwebページ(XTML1.0やHTML4.01など)もデザインすることが可能です。


CSS3で使える機能

CSS3で使える機能(プロパティ)の中でも特に注目したい機能をご紹介します。

linear gradients

線形にグラデーションさせる機能です。複数の色を指定することができます。

radial gradients

円形にグラデーションさせる機能です。複数の色を指定することができます。

animation

要素の色相・彩度、明度や透明度を操作する機能です。

opacity

要素の透明度を操作する機能です。完全に透明・不透明にしたり、好みの透明度を指定できます。

Multi-column

マルチカラムレイアウトが可能です。文章の段組を作れます。段数と段幅を指定することができます。

border-radius(角丸)

角を丸くできる機能。ボックス要素に角丸を付加できます。4つの角を全て丸くするだけでなく、指定箇所のみ角を丸くすることも可能です。

text shadow

テキスト(文章)に陰影をつけることができます。水平・垂直(x,y)方向の距離、ぼかしの半径や影の色などの指定も可能。

text stroke

文字の輪郭線について指定できる機能です。

selection color

ユーザーが選択したテキストの背景・文字の色を指定することができます。

word wrap

単語の途中で改行するかを指定できます。

この指定がない場合、文字列が長すぎるとボックスから文字がはみ出して表示されてしまいます。

「word wrap」を使用することで、はみ出すことなく文字を表示することが可能です。


ブラウザの対応状況

まだ全てのブラザに完全に対応している訳ではないので、プロパティによっては、独自のプロパティを用意する必要がある場合があります。

現在の対応しているブラウザ
・Internet Explorer 9/10/11
・Firefox 29
・Google Chrome 34
・Safari 5
・Opera 12

となります。


まとめ

CSSとはホームページの文字の色や大きさ、背景、配置といったスタイル(見た目)を設定する言語で、CSS3とは新しい規格(バージョン)のことを指します。

CSS3には、まだまだ便利な使い方が出来ますので、興味のある方は是非調べてみてください!

Share This Post
Facebook Twitter Linkedin

Pickup Webdesign

おすすめのウェブデザインをご紹介します
大人顔負けのスイムウエアコレクション。 | Pick Up | グローバルワーク(GLOBAL WORK) オフィシャルブランドサイト

globalwork

Blue, Pop 2023/01

大人顔負けのスイムウエアコレクション。 ひと足先にスイムウエアがお目見え。 キッズらし…

See More Information
おへそグループ | 佐賀市 おへそ保育園・おへそこども園・おへそつながり・おへそこども学園・おへそ学道場

おへそグループ

Blue, Cute 2023/01

佐賀市の白山にある小規模認可園おへそ保育園 教育施設が多く立ち並ぶ、佐賀市のおへそ水ヶ…

See More Information
GRIN | はみだした生き方も悪くない、と笑える世界。

GRIN

Black, Stylish 2023/02

自分の生き方で世界を生き抜く一歩を踏み出すクリエイティブマガジンです。 はみだした生き…

See More Information
全50色以上、260万通り以上の組み合わせから、あなたにぴったりなメイクパレットがみつかるセルフメイクアップブランド「MN」

MN

Cute, Yellow 2022/12

わたしをメイクするのはわたし だれのものでもない だれのためでもない わたしは わたし…

See More Information
ジブリパークは「愛・地球博記念公園(モリコロパーク)」内に、 森と相談しながらつくっているスタジオジブリの世界を表現した公園です。

ジブリパーク

Illust, White 2022/12

ジブリパークとは ジブリパークは愛地球博記念公園モリコロパーク内に、森と相談しながらつくっ…

See More Information
星野源『恋』 - 特設サイト

星野源

Simple, Yellow 2023/01

恋 1年4ヶ月ぶりのニューシングルは自身出演のドラマ「逃げるは恥だが役に立つ」の主題歌…

See More Information
映画『すずめの戸締まり』公式サイト

すずめの戸締まり

Blue, Illust 2022/11

扉の向こうには、すべての時間があった。 国境や世代の垣根を超え、世界中を魅了し続けるア…

See More Information
the weekend short trip 鎌倉編 | BEAMS BOY

BEAMS BOY

Pop, White 2023/01

わざわざ行きたい鎌倉 カーテンを開けると太陽の光が差し込んで外には青空が広がっている。…

See More Information
はじめてのいわぎん|岩手銀行

岩手銀行

Cute, Green 2022/11

はじめてのいわぎん。 はじめてのアルバイトや就職で「お金」と関わる機会が増え、不安や心…

See More Information
ドロップトーキョーは、東京のストリートファッションを中心に、国内外に発信するオンラインマガジン。

Droptokyo

Colorful, Other 2022/11

東京のストリートファッションを中心に、国内外に発信するオンラインマガジン。 最新ニュー…

See More Information
CHANEL リヴィエラへ、心の旅をする | SPUR

SPUR

Green, Stylish 2023/01

シャネルリヴィエラへ心の旅をする ガブリエルシャネルが愛したヴィララパウザ。 今もそこ…

See More Information
ごとうちクリップ studio CLIP × 全国のパン屋さんとのコラボグッズが登場!

ごとうちクリップ

Brown, Cute 2022/03

全国のパン屋さんとのコラボグッズが発売! 日本各地で地元の人から愛されている12軒のパ…

See More Information

Follow Me