【第14回】プログラミング初心者向けCSS3講座【ルールについて】

こんにちは、はるおです。これからHTMLとセットで使用される言語、CSS講座を始めます。CSSはHTMLで構成された文章を装飾する(文字色、文字サイズ、位置など)ための言語です。今回の記事から数回にわたって、現バージョンのCSS3について初心者向けに解説していこうと思います。

【HMTL5講座】

【第0回】プログラミング初心者向けHTML5講座

  

 

【前回記事】

【第13回】プログラミング初心者向けCSS3講座【表示について】

  

【次回記事】

【第15回】プログラミング初心者向けCSS3講座【ユーザインターフェース】

本記事では、下記の内容を解説します。

 

 

 

○この記事でわかること

・ルールについてわかる

  

この記事を書いている僕は、プログラミング学習歴8ヶ月。

基礎学習が終わり、最近はLP作成などの実績も少しずつ出してきております。

 

 

また、Twiiterも最近始めたのでこちらの方もフォローしていただけると嬉しいです。

 

Twitterアカウント @clearyou66

 

ルールについて

 

 

今回はCSSを書くときのルールについて解説していきます。今回説明していくプロパティにはすべて行頭に「@(アットマーク)」をつけます。注意しましょう。

 

@charset

外部のスタイルシートの文字コードを指定するプロパティとなります。HTMLでも<meta charset=”utf-8″>というものがありました。CSSでも文字コードを先頭行に指定します。指定方法については以下の通りです。

 

@charset “UTF-8”;

 

 

 

 

@counter-style

CSSのプロパティ、list-styleにおいて指定可能なリストスタイルとして、新しいスタイルを作成することができるプロパティとなります。指定方法については以下の通りです。

 

@counter-style スタイル名 {

system: リストのルールを指定します。

symbols: 文字自体を変える指定をします。

suffix: 文字のあとにつける区切りを指定します。

}

 

 

@font-face

Webフォントを使用可能にするためのプロパティとなります。このプロパティを使用することで、font-familyの値に「myfont」という名前のフォントを指定することができるようになります。使用方法については以下の通りです。

 

@font-face {

font-family: myfont;

src: url(URL) format(“フォント”);

}

 

また、format()のフォントの形式には以下の使用方法があります。

 

WOFF(Web Open Font Format)

EOT(Embedded Open Type)

OTF(Open Type Font)

TTF(True Type Font)

SVG(Scalable Vector Graphics)

SVGZ(Gzipped SVG)

 

 

@import

現在のスタイルシートから、他のスタイルシートのファイルを読み込むことができるようになります。使用方法は以下の通りとなります。

 

@import url(読み込みを指定するstyle/css);

 

このようにすることで現在のファイルから、他のファイルを読み込むことができるようになります。

 

@keyframes

animationプロパティの回でも出てきました。animationのアニメーションのフレームを適宜することができるプロパティとなります。こちらに指定された値と、animation-nameプロパティで指定する値を同じにすることで、アニメーションを適用することができます。

 

使用方法は以下の通りです。

 

@keyframes フレーム名 {

from {

color: red;

to {

color: blue;

}

}

 

 

@media

スタイルシートを適用する場合の、条件を指定することができるプロパティとなります。レスポンシブ対応させる際にスタイルシートを変更するのに使用することができます。使用方法は以下の通りです。

 

@media 〇〇 {

p  {  color:  red;  }

 

また、〇〇の部分には指定できる値がいくつかあります。その値にはそれぞれ意味があります。それらについて以下に記載します。

 

all 以下のすべてに対して指定します。

screen ディスプレイサイズの場合の指定をします。

print 印刷時の値を指定します。

aural 音声で読み上げを行います。

braile 点字の場合の表示をします。

handheld 携帯の場合の指定をします。

projection プロジェクタの場合の指定をします。

ttv TTVの指定をします。

tv TVの指定をします。

 

 

@namespace

ネームスペース(名前空間)を指定することができるプロパティとなります。

 

 

@page

印刷時のページに対するスタイルを指定します。指定できる値には、marginや、size、marksを指定できます。使用方法は以下の通りです。

 

@page  {  margin:  ○cm;  }

 

また、他にも条件を指定することができます。

 

@page:first { margin: ○cm } 最初のページ

@page:right{ margin: ○cm } 右のページ

@page:left { margin: ○cm } 左のページ

@page:blank { margin: ○cm } 白紙のページ

 

 

@supports

CSSがブラウザで対応されているかどうか次第で処理を分けることができるプロパティとなります。使用方法は以下の通りです。

@supports  (  display:  flexbox  )  {

//対応してる場合に適用したい処理

 

 

 

 

 

今回の宿題

 

今日の内容に関連のある簡単な宿題を出しますので、次回の講座までにやっておきましょう。

 

宿題:なし

 

ということで第14回のCSS3講座を終わります。

 

 

 

エディタについてはこちらの記事で説明しているので参考までにどうぞ。

【初心者必見】最強におすすめのエディタ「Atom」について徹底解説

 

 

僕の失敗=駆け出しエンジニア(プログラミング初心者)の失敗 だと思うので、僕の失敗談はすべてこれからの駆け出しエンジニアたちに還元していきたいというスタンスです。

 

また、本記事は超初心者向けに解説しているため、難しい単語や不要な説明は省略させていただいております。わからないことがあればコメント欄にて気軽にご質問ください。

 

僕のプロフィールついては以下の記事にまとめてありますので、時間がある方は見ていっていただけると嬉しいです。

 

 

WordPressで記事投稿をする方法を自己紹介で学習する【初投稿】

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です