Category Archives: CSS

CSSをさらに詳しく!&ちょっと便利なブラウザ機能

こんにちは。クリエイターズアカデミーの事務員です。

前回はCSSについても簡単に説明していきだきました。基本的なCSSの書き方はご理解いただけたでしょうか?しかし形だけ知っていても実際に使ってみるととにかく色々な事を考えなければなりませんので、今回は前回からもう少し突っ込んだCSSの解説をしていきたいと思います。

実際のCSSを見ながら構造を理解しよう!

CSSは一から自分で書くこともあれば、既にどこかで使ったCSSを改変して使う事もあります。(毎回全てを書いていると量が膨大すぎて時間がかかりますからね)ですからCSSは書けるだけでなく書いてあるものを読む力も必要です。今回は実際のCSSを見ながらどんな内容になっているのかを解説していきます。
例として昨日紹介しましたCSSのボタンジェネレーターが作るCSSを見てみましょう。

sample21
(CSS3 Button Generator:http://css3button.net/136846)

今回このボタンのHTMLとCSSについて解説していきたいと思います。
このジェネレーターは左側のボタンの下に表示されている色や数値をいじると表示されているボタンに内容が反映され、右側にその装飾に必要なHTMLとCSSが表示されるようになっています。(色々遊んでみると結構楽しいと思いますので時間がある時にでもいじってみてください)
今回私は青いボタンを作ってみました。そのボタンのHTMLとCSSはこちら。

sample22

これを見てみるとHTMLはたったの1行です。それに比べてCSSは34行!!ここからもHTMLとCSSを分ける理由が分かるかと思います。(こんな長い設定をHTMLの中で書いてしまったら最早何が本文で何がCSSなのか分からなくなって更新作業なんて出来ません)

ここで注目していただきたいのはHTML、ボタンのタグの中に「class=”css3button”」と入っている事です。

<button></button>のタグはこの間に挟んだテキストをボタンにして表示します。
sample23
<button>の後に入っている「type=”buttom”」は特にメールフォーム等のフォームとよばれるものとセットで使われます。何かを送信する機能を持たせる時には「type=”submit”」、フォームの内容をリセットするときには「type=”reset”」と入れます。WEBサイト内で特にフォームとセットで使わない、ただのリンクボタンとして使う場合には「type=”button”」を入力しましょう。(<button>タグの初期設定がtype=”button”なので入力しなくても実はtype=”button”になっています。しかし入れておいた方がHTMLだけを見たときにボタンの機能が判断しやすいので入力しておくことをお勧めします)
これは特に見かけには影響しません。
さらに「name=””」と「value=””」についてですが、これは特に「type=”submit”」の時に活躍します。フォームの内容を送信するときに「name=””」はボタンの名前(どのボタンが押されたのか判別するときに使用)、「value=””」は初期値を表します。(フォームに入力欄がない、というものもありますのでその時に送信される値です。たとえば通販サイトや銀行のWEBサービス等、のログインボタンや同意しますか?と確認するボタンなどで使われています)

「class=”css3button”」はCSSを設定するときの目印となります。たとえばいくつも<button>タグがあった場合に、この
「class=”css3button”」がついているボタンだけ装飾するという事が可能になるのです。

それでは実際にCSSを見てみましょう。
CSSにはしっかりセレクタ部分に「button.css3button」と入っています。これは<button>タグのclass=”css3button”にこの
装飾をしますという意味です。
次に、実際の装飾の内容を見ていきましょう。装飾の内容は「{}」の中に書かれています。
このボタンではとにかくたくさんの設定がされています。簡単に何の設定をしているかを説明するとこうなります。

・font-family …ボタンに表示されているフォントの種類
・font-size  …ボタンに表示されている文字の大きさ
・color    …ボタンに表示されている文字の色
・padding   …ボタンの輪郭から文字までの距離
・background
└background: -moz-linear-gradient  …firefox向けの背景グラデーションの指定
└background: -webkit-gradient    …Google Chrome、Safari向けの背景グラデーションの指定
※指定している内容は一緒ですが、ブラウザ別に少し書き方が違う事があるので、どのブラウザでも表示できるようにせっていする事があります。
※-moz-はfirefox、-webkit-はChrome、Safari、その他にも-o-はOpera、-ms-はInternetExplorer向けという意味です。
・border-radius …ボタンの角を丸くする指定
・border     …ボタンの輪郭線の指定
・box-shadow   …ボタンを立体的に見せる影の指定。特にinsetの場合はボタンの内側につく影
・text-shadow  …ボタンに表示されている文字の影

随分と細かく設定されていますね。こんなに書かなければならないなら画像にした方が早いと思われるかもしれませんが、たとえばこれを赤いボタンにしたいとき、もう一度画像を作りなおすよりはCSSで色を変える方がはるかに速いです。また、画像のようにページの容量を重くしたりするリスクも少ないですし、何よりディスプレイの大きさによって画質が変わらないメリットがあります。(画像の場合は拡大してしまうと荒く見えてしまったり、小さ過ぎてつぶれてしまうという事もありますが、CSSで設定すれば画面の大きさに合わせてボタンを表示してくれるのでそのような心配はありません)

CSSを使いこなせばただのボタンでもここまで綺麗に作ることが出来るのです。
是非皆さんにCSSを使いこなしてほしいと思います!

知っておくと便利なブラウザ機能!

ここでCSSを使いこなしていく上で一つ便利なブラウザの機能をご紹介します。
Google Chromeの「要素を検証」という機能です。
前にご紹介した機能、「ソースを確認」では通常HTMLしか見ることができません。ちょっとかっこいいデザインがあってもどんなCSSが書かれているのかわからないことがほとんどです。しかしこの「要素を検証」という機能は何とCSSを見ることが出来るんです!
sample24
要素の検証をクリックするとブラウザの下、もしくは別窓にHTMLとCSSの内容が表示されます。左側がHTML、右がCSSです。HTMLはタグに囲われている内容はたたまれているのでHTMLの構造がどうなっているかもわかりやすいと思います。
sample25
取り消し線のついているCSSは機能していないCSSです。このブラウザはChromeなのでfirefox向けの-moz-がついたCSSが機能していないことも確認できますね。
また指定されているカラーコードがどんな色をしているかも確認できます。

さて、この要素の検証の利点はもう一つあります。それは直接CSSをいじる事が出来るのです!
分かりやすいように<body>を装飾しているCSSを編集してみます。

sample26

※分かりやすいように別ページに移動しています。

背景色(background-color)が現在は「#fff(白)」と指定されています。
※カラーコードは基本的に6ケタで指定しますが、#994422など2ケタずつ揃っているものは#942と省略する事が出来ます。しかし#944229を#9429と書くことはできませんのでご注意ください。
これを#994422(赤茶)に変更してみます。すると実際のWEBページの背景色も変更されます。
sample27

この要素を検証で変更したCSSは実際には保存されません。自分が見ているブラウザで一時的にしか変更できないので、更新してしまうと元に戻ります。自分で書いたCSSがしっかり機能しているか、または見栄えのいいカラーコードを探したり、実際の画面を見ながら文字の大きさを調整したりなど、お試し感覚で色々変更してみましょう。どのプロパティがどんな効果を持っているのかがとてもわかりやすいでしょう!
いいデザインが見つかったらコピーして保存しておけばいつでも自分のWEBページで利用する事が出来ます。

いかがでしょう。CSSは奥が深いですが、その面白さは今回伝わったでしょうか?まだまだ出来るようになると楽しくなるHTMLやCSSです。こんな感じでその奥深さを楽しんでもらえればと思います。

CSSを書いてみよう

こんにちは。クリエイターズアカデミーの事務員です。
前回WEBページの構造についてご説明しました。なかなかややこしい内容だったのではないかと思います。
他のHTMLの解説サイト等も参考にしていただければ、私の説明では分からなかったところが分かるかもしれませんので、合わせてチェックしていただけるとありがたいです。
しかし、仕事としてWEB制作を行う上でファイルが整理されていないWEBサイトはありえないので、今からきちんと理解しておきたいところです。

さて、HTMLやWEBサイトの構造を簡単にご説明してきましたが、次はCSSについても簡単に説明していきたいと思います。前回、前々回の記事ではCSSを使っていても書き方については解説していませんでしたので、今回CSSを理解してWEBページを一気におしゃれなものへしていって頂ければと思います。

・改めてCSSって何?

CSSとはCascading Style Sheets(カスケーディング・スタイル・シート)の略称で、WEBページの装飾を指定するための言語です。WEBページの装飾とはなんかのかと言えば、WEBページの背景に色や画像を置いたりグラデーションにしたり、もう10年くらい前ですがスクロールバーを装飾するのもはやりました。最近ではスマートフォンのアプリボタンのようなデザインをCSSで作ってしまう事が多いです。
sample02
ボタンのCSSデザインを作るジェネレーターもいくつかあるので、試しにいじってみながらこんなボタンがCSSで作れるのかと体感してみるのもいいと思います。(制作したボタンのCSSはコピー可能なので、作ったボタンを自分のページで使う事が可能です)
CSSボタンジェネレーターサイト:http://css3button.net/
※サイトロゴの近くにある「>SHOWCASE」のリンクをクリックすると既に出来上がっているボタンが並んでいるので、気に入ったボタンのCSSをもらってくることも可能です。

 

・CSSが必要な理由

そもそもCSSがなかった時にはHTMLや・画像だけでWEBページの装飾を行っていました。しかしそれは、もともとWEBページに表示する全てのテキストや画像を指示するHTMLの内容をさらに膨大なものにさせ、管理者の編集作業を困難にさせてしまいます。またHTMLで指定する装飾はごく一部を限定的に変更するものなので、同じ装飾をいくつも指定しなければならないこともありました。これは編集者がどこの装飾を編集しているのかを分かりづらくし、編集ミスにもつながります。
こうした編集、更新の不便さを改善し、内容と装飾を分離して管理する事を目的として活用されるようになりました。

ですからWEB制作をするうえでHTMLはもちろん、CSSも切り離せない要素としてWEB制作・WEBデザイナーへ求められるスキルとなっています。

・CSSの書き方は?

さて、CSSの具体的な書き方です。HTMLは実際に表示する内容とタグを区別するために「< >」を使って記述していきますが、CSSでは本文と区別する必要がないので「< >」は使用しません。
それとは別に、いくつかの規則がありますのでそちらを覚えていきましょう。

①CSSの基本的な形
CSSは全て下記の形で記述します。

セレクタ {プロパティ:値;}

このセレクタとはHTMLのタグやタグの中に含まれるid、classの事で(idとclassについてはまた別途ご説明します)、何に装飾をくわえるのか、装飾をする対象を指します。

次にプロパティは装飾をする対象・セレクタにどんな装飾をくわえるのかを指定します。色を変える場合はcolorになったり、フォントの種類を変えたい場合にはfont-familyとなります。

最後にですが、これは具体的にどのくらい変えるのかという内容を示します。たとえばプロパティがcolorであるなら値には色の名前やカラーコードが入ります。

※カラーコードとは「#」を頭につけた6ケタの英数字で色を表すやり方です。色の名前はOSなどによって再現される色が異なり増す。そうすると制作者が制作段階で見ている色とユーザーが見る色が異なってしまい、デザインが崩れてしまう事があります。それを防ぐため、より正確な色を再現するために用いられます。カラーコードはネットで検索すればすぐに一覧サイトが出てくるので使いたい色のカラーコードをチェックする事が可能です。

②複数のセレクタを同時に指定する、または一部のセレクタを指定する
セレクタ毎に一つずつプロパティや値を指定してもいいのですが、中にはセレクタが違うだけでプロパティと値が同じ場合があります。そんな時には複数のセレクタを指定してしまって、プロパティと値の入力を1度で済ませてしまう事も出来ます。

セレクタ,セレクタ,セレクタ{プロパティ:値;}

セレクタ名を「,(カンマ)」でつないでいきます。つなぐ数に制限はないので、同じプロパティと値を入力するものは追加していくといいでしょう。

また、WEBページ内にいくつも登場するセレクタ(タグ)の中でごく一部だけを指定したい場合にはidやclassを利用して装飾することが可能です。

セレクタ#id名{プロパティ:値;}
セレクタ.class名{プロパティ:値;}

これはHTMLの説明の時に少しだけ触れた<div>タグで多く利用されます(もちろん他のタグでも使用されます)。HTMLに同じタグが複数登場する場合、それぞれを区別するためにidやclassを良く使います。それぞれHTMLの中でidで指定された名前、classで指定された名前を目印に、CSSでは装飾を行う事が可能です。

例)HTML:
┌<div>
│  あいうえお

│ <div id=”content”>かきくけこ</div>

│  さしすせそ
└</div>

CSS:
div#content{font-color:#ff0000;}

表示:
あいうえお
かきくけこ
さしすせそ

※この例ではHTMLにdivが二つ存在します。divの中のid=”content”のみを指定したい場合にはセクションは「div#content」となります。

③セレクタに特定の条件をくわえる
セレクタの中でも特に○○の条件の時を指定してプロパティと値を設定したい場合は「セレクタ:特定の条件{プロパティ:値;}」で設定します。これは良くリンクの装飾を行う場合に多くみられ、ただのリンク、リンク機能の付いたテキストにカーソルを合わせたとき、既に訪問済のリンクなどに別々のプロパティや値をする事があります。
例)
a:link {color:#0000ff;}     …ただのリンクの文字色を指定
a:visited {color:#00ccff;}   …既に一度クリックしているリンクの文字色を指定
a:hover {color:#ffffff;
     background:#0000cc;}   …カーソルをリンクに乗せたときの文字色を指定
a:active {color:#ffff00;}    …クリックした瞬間のリンクの文字色を指定

④セレクタに対して複数のプロパティと値を指定する事も可能
③のリンクのCSSで一瞬登場しましたが、一つのセレクタに対して複数のプロパティと値を指定することも出来ます。その場合は「{ }」の中にプロパティ:値;を繰り返すだけでOKです。

例)
a:hover {color:#ffffff;
background:#0000cc;}
「a(リンク)」の「hover(カーソルを乗せた時)」に「color:#ffffff(文字色は白)」かつ、「 background:#0000cc;(テキストの背景は#0000cc)」になるようにという指定です。

このような形でCSSは書いていきます。他にもWEBページのデザインが複雑であればある程CSSの書き方は変化していきますが、基本的に①の書き方さえ覚えていれば大丈夫です。セレクタの指定の仕方やプロパティにも膨大な種類があるので、それらはWEBの情報サイトやCSSについてまとめてある書籍を見てみてみるといいと思います。

※ちなみにCSSをHTML内に直接書く方法はありますが、将来的に使わなくなる、推奨されなくなる流れにあるのであえて解説は致しません。

いかかでしょうか?ここまで出来るようになる作れるWEBサイトの幅が広がってきます。是非色々なタグやcssに挑戦していってほしいと思います。

WEBページを作ってみよう!

こんにちは。クリエイターズアカデミーの事務員です。
前回はWEB制作、WEBデザインをするなら知っておかなければならない、知っておくべきHTML
についてお話ししましたが。しかし、そもそもHTMLやCSS、JavaScriptデータの作り方を知ら
なければタグを知っていても意味がないので、今回はHTMLとCSSデータの作り方をご説明しま
す。
※JavaScriptの作り方も基本的に一緒です。

まずWEBサイトを作るのに特別なソフトは必要ありません。Windowsで言えばメモ帳というプログラムで作ることが可能です。(Macであるとテキストエディットというものが該当するようなのですが、私が主に使用しているのがWindowsなのでWindowsメインの説明をさせていただきます。)
WEBサイトに表示する画像を作るにはさすがにソフトがないと不便ですのでphotoshopやillustratorを用意したいところです。

①メモ帳にHTMLを入力していく
まずHTMLファイルを作っていきましょう。
メモ帳を開いたらとにかくHTMLを入力していきます。前々回ご説明したような<html><head><body>タグを書いていきましょう。
sample07
これだけだと<body>の中に何もないので、一応前回お話したタグや適当な文章も入れておきましょう。
sample08

②ファイル名に「.html」をつける
①で書いたような内容が出来上がったらhtmlファイルとして保存します。
ここでの注意点は普段のwordや画像の保存とは違い、拡張子を自分で入力することになります。保存形式の候補には出てきませんので必ず自分で入力してください。
sample09
ファイルを保存した場所にブラウザのアイコンがついたファイルが出来ていたら完成です!
sample10

③HTMLファイルが出来ました!
完成したファイルをダブルクリックするとブラウザにWEBサイトとして表示されます。
入力したタグは見えなくなり、リンクタグや画像の表示タグも機能しています。
※この段階ではリンク先のページは作っていませんので押してもページが見つかりませんのエラーが出ます。
※画像は簡単なものを用意しました。
sample14
brのタグが機能しているかもしっかりと確認できるのではないでしょうか。

さて、これでHTMLファイルは完成です。とても簡単ですよね?
次はCSSファイルを作っていきます。

①CSSもメモ帳で作成します
HTMLと同様にメモ帳に入力していきます。しかしCSSはHTMLよりさらに簡単で、最初からCSSの設定を書いていきます。
※CSSの実際の書き方については後日またご説明しますので今はこんな感じなのか程度でお願いします。
sample11

②CSSはファイル名の拡張子も「.css」にする
HTMLファイルと同様に拡張子を自分で入力して保存します。ちなみにJavaScriptもメモ帳で作成する事ができますが、保存するときは「.js」の拡張子にして保存します。
※先程のHTMLで「style.css」のCSSファイルを読み込む設定をしたので、そのファイル名に合わせています。
sample12

③CSSファイルも完成!
CSSファイルが完成したら先程作ったHTMLファイルをもう一度開いてみます。
すると背景にCSSファイルで設定したグラデーションが適応されているのがお分かりいただけるかと思います。
sample13

これでCSSファイルも完成です。
あとはHTMLもCSSもタグや設定の書き方を覚えてしまえばもっと複雑なものを作ることが可能です。使ってみたいタグや設定を見つけたら、このような方法でサンプルページを作って試してみましょう。

※注意点※
HTMLファイルや画像、CSSは全て同じフォルダに保存しましょう。フォルダの中にさらにフォルダを作ってファイルの整理…なんて事をすると画像が表示されなくなったりCSSが適応されなくなったりします。
データの整理の仕方にも方法があるのでこれも後日ご説明したいと思います。

いかがでしょうか?画像については今回説明しておりませんがhtmlやcssのファイルだけでもすぐに作ることが出来ました。ここがWEB制作・WEBデザインの入口です。
「こんなに簡単にできるならちょっと作ってみたいな」
「他にはどんなことが出来るタグがあるの?」
「あのサイトのあのデザインはどうやって作ってるんだろう?」
と思った方!是非WEB制作について学んでみませんか?きっと今よりももっと楽しいと思うはずです。そんな楽しい事をさらに仕事にできたら…
そんな皆さんのWEB制作・WEBデザイナーへの道を応援するのが我々クリエイターズアカデミーです。一緒にWEB制作・WEBデザイナーを目指してみませんか?