CSS外付けのメリットとは?マンガでわかるCSS入門

manga_CSS3_resize

CSSは外付けのメリットって?

CSS外付けのメリットはこんなかんじ

HTML
CSS外付けは本当に便利!


HTML
HTMLに直書きすると、そのときはいいかもしれないけどあとで編集しようとおもったとき、ひとつひとつHTMLファイルを開いて編集しなきゃいけないから大変だね


HTML
その通り!CSSは外部ファイル化がテッパンだよ!


マンガでわかるWebデザインが書籍化しました

わかばちゃんと学ぶ Webサイト制作の基本
わかばちゃんと学ぶ Webサイト制作の基本 | C&R研究所

8割以上が書籍限定の内容となっております。
HTML5・CSS3のコーディングだけでなく、Webサイトの企画・運用(SEO・アクセス解析)についても解説しています。

アマゾンで冒頭を試し読みする

マンガでわかるGitも書籍化しました


C4XnLc6UoAAJNrS

「わかばちゃんと学ぶGit使い方入門」

Gitの使い方がマンガでわかる!
図解・マンガがたくさん載っているので、「デザイナーにもわかりやすい」と好評です!

マンガでGitをわかりやすく学ぼう 内容紹介1

マンガでGitをわかりやすく学ぼう 内容紹介3

マンガでGitをわかりやすく学ぼう 内容紹介2

アマゾンで冒頭を試し読みする

記事作成:湊川 あい
マンガ・イラスト:湊川 あい


CSSは外付け?直書き? マンガでわかるCSS入門

CSSは外付け?直書き?

CSS外付け 直書き

CSSは外付けがテッパン!

CSSでWebページを装飾するとき、CSSは外部ファイル化して、それをHTMLから読み込むのが一般的です。

CSSでWebページを飾る方法は3つある

という方法があります。

HTML

下に3つの具体的な方法を書いていくね!


1.HTMLタグに直書きする

Body内のHTMLタグに直書きする方法です。
四コマでは2コマ目ですね。HTMLちゃんのBody部分にごっちゃりとコードが書いてある状態です。

<p style="color:#000; 
font-size:12px; 
font-weight:bold; 
padding:10px 0px;">
とても読みづらいコードになっちゃうよ
</p>

HTML

これだと確かにコードを編集するときにミスしちゃいそうだよね。


HTML

そうだね。さらにSEO的にもあまりよくないんだ。コードがゴテゴテしていると、せっかく文章が書いてあっても、検索エンジンのクローラー的は「読みにくいんだよっ!」ということになってしまうよね。コードがシンプルであるほど、インデックスされやすい、つまり検索上位に上がりやすいと言われているよ。


2.head内に直書きする

二つ目はHTMLファイルのヘッダー内にスタイルを直書きする方法です。

<!doctype html>
<html>
<head>
<title>ページタイトル</title>
<style type="text/css">
<!--
.test {
color:#000;
font-size:12px;
font-weight:bold;
padding:10px 0px;
}
-->
</style> 
</head>
<body>
<p class="test">
testクラスのスタイルが適用されるよ
</p>
</body>
HTML

文章と装飾が分離されているから、さっきの直書きよりは大分マシな気がする


HTML

そうだね。でもこれだとスタイル指定をhead内に長々と書くことになっちゃうんだ。headが長ーくなっちゃうとクローラーも文章にたどり着きにくくなるよね。


HTML

次回の記事でまた詳しく説明するけど、もしこのheadに直書きする方法ですべてのページを作っちゃったら、あとになって「この文字色を一気に変えたいな」なんてときにHTMLファイルをひとつひとつ開いて編集するはめになるよ。


HTML

え〜!それは嫌だ!
じゃあどうすればいいの?


HTML

そこでCSS外付けだよ!


3.CSS外付け

HTML

まずはHTMLのheadタグ内にこう書くよ


<link href="sample.css" rel="stylesheet" type="text/css" />
HTML

次に、sample.cssというファイルを作ってその中にスタイルを書いていくよ


@charset "utf-8";
.test {
color:#000;
font-size:12px;
font-weight:bold;
padding:10px 0px;
}
HTML

ちなみに、@charset “utf-8”;というのは、「UTF-8という文字コードで記述していますよ」と宣言しているだけだよ。


文章とスタイルが分離されてすっきり

<!doctype html>
<html>
<head>
<title>ページタイトル</title>
<link href="sample.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p class="test">
testクラスのスタイルが適用されるよ
</p>
</body>
</html>
HTML

CSSを外付けすることで文章とスタイルが分離されてすっきりしたね!


HTML

次回はCSSを外付けするとどんないいことがあるのか掘り下げていくよ!


初心者向け

[amazonjs asin=”B00VUS6WOE” locale=”JP” title=”スラスラわかるCSSデザインのきほん スラスラわかるきほんシリーズ”]
[amazonjs asin=”4839952221″ locale=”JP” title=”よくわかるHTML5+CSS3の教科書【第2版】”]

中級者向け

[amazonjs asin=”4844336355″ locale=”JP” title=”Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法”]

記事作成:湊川 あい
マンガ・イラスト:湊川 あい


CSSとは? 簡単解説!マンガでわかるCSS入門

CSS解説マンガ1

CSSとは?

CSSとは、Webページの見た目を担当する言語です。
「カスケーディングスタイルシート」の頭文字をとって、CSSと名付けられました。

CSSを使うと何ができるの?

CSSを使うと画像のレイアウトをしたり、文字や背景に色を付けたり等、思い通りにデザインすることができます。

CSSとHTMLは役割が違う

  • HTML:文書の意味や構造を定義するもの
  • CSS :Webページのデザインやレイアウトを定義するもの

HTMLは、見出しや段落などを定義するタグを使って、ページ内のコンテンツの構造をブラウザ等に知らせるための言語です。

HTMLは、そもそもデザインをするための言語ではないのですが、Web環境の発展に伴い、色やフォントの指定、画像のレイアウトといったデザイン要素までもが求められるようになり、HTMLに定義されるようになってきました。

HTML

文章の構造を知らせるためのHTMLコードに、見た目を定義するコードが入ってきたら、コードが読みづらくなっちゃうよね。コードを編集する人間にとっても、ブラウザやロボットなどにとっても不親切だね。


HTML

そうそう、だからW3Cという機関が、「文書構造の指定はHTMLに」「デザインの指定はCSSに」と役割を切り分けてくれたんだ。


HTML

(ふーん、だからHTMLちゃんは飾り気がないのか)


HTML

何かじろじろ見られている気がする…。
ちなみにHTMLって何?という方はこちらの記事をどうぞ。
HTMLって何?簡単解説!マンガでわかるHTML入門


※W3C(ダブリュースリーシー)とは、Webページの言語や標準規格を決めている非営利団体のことです。

CSSがあるときとないときを比較してみた

HTML

まぁ百聞は一見にしかずって言うし、CSSをくっつけた場合とCSSをとりはずした場合のWebページを比較してみようか


CSSがあるとき

css_on

HTML

おー!かっこいいページ!


CSSがないとき

css_off

HTML

え!?これさっきと同じページなの…?随分統一感がなくなっちゃったけど


HTML

そうだよ〜。CSSとHTMLを完全に分離させているから、CSSだけ取り外すことが可能なんだ。ほとんどのWebページはそうやってるんじゃないかな。CSSの書き方やくっつけ方についてはまた今度の記事で解説するよ


Thanks!
画像キャプチャのためにお借りしたフリーWebテンプレート:Obscura

記事作成:湊川 あい
マンガ・イラスト:湊川 あい


コーディング・画像編集だけじゃない!Webデザイナーの仕事内容って?

マンガでわかるWebデザイン 4

Webページ制作って具体的にどういうことをするの?

この記事を読んでくださっている方の中には、「Webページを作る仕事って、ちょっと興味あるんだよね!」という方が多いかもしれません。
もしくは、「突然、今年からWeb担当を任されてしまった!」という状況の方もいらっしゃるかもしれませんね。

Webページを作るには、

  • どういう内容を
  • どういう過程で

行うのかを、現役Webデザイナーが解説していきたいと思います。

Webページ制作過程の全体図はこれだ!

  1. マーケティング・企画
  2. デザイン
  3. コーディング
  4. テスト
  5. 運用・PDCA
HTML

Webデザイナーというと、「画像編集とコーディングをする仕事」というイメージがあるかもしれないね。


HTML

うん。それじゃ間違いなの?


HTML

半分正解かな。マーケティングの根本の部分を理解した上で、戦略に沿った施策として実行するのが「画像編集やコーディング」という行動の部分なんだ。


HTML

そして、ページが完成した後はどうする?


HTML

ん?お仕事完了じゃない?
ミッションコンプリートォォォ!!!


HTML

わかばちゃん?PDCAっていう言葉は知ってるかな?


HTML

(な、なんかHTMLちゃんの笑顔がコワイ)


マーケティング・企画

実はここが一番重要です!

「どんな市場に、どんなニーズがありそうなのか?」
「そのニーズを持っている人はどんな人?その人々に私たちは何を提供するのか?」
をひたすら考え抜いて戦略を練ります。

HTML

そもそもマーケティングって何なの?


HTML

いい質問だね!マーケティングとは、「自然にものが売れる仕組みを作る」ことだよ。「マーケティングとは○○である」っていう言葉はいろんな人が諸説唱えているんだけど、セリングって言う言葉と対比させるなら、僕はこの「自然にものが売れる仕組みを作る」っていう言葉がしっくり来ているよ。


HTML

せ、せりんぐ?


HTML

セリングっていうのは簡単に言うと「押し売り」ってことだよ。この記事を書いている人がマーケティングを勉強し始めたとき、愛読していたのがこれ!


[amazonjs asin=”4495589814″ locale=”JP” title=”図解 よくわかるこれからのマーケティング (なるほど! これでわかった) (DO BOOKS)”]

HTML

マーケティングの基本的なフレームワークが網羅されているよ。しかも図解で分かりやすい。感涙!


HTML

作るページの戦略を理解しているのと理解していないのとでは、効果が全然変わってくるからね。自社のページを作るにしろ、他社のページを作るにしろ、戦略を深く理解しておくことは必須なんだ!


デザイン

まずは表現したい情報を優先順位順に整理します。

そして、ラフ案を作り、優先順位が高いものを中心に配置していきます。

ラフ案が固まったら、Photoshopなどの画像編集ソフトで、ページの仕上がりイメージをカラーで作ってみます。

HTML

先ほど立てた戦略を常に意識しながらデザインしていくよ。例えば、値段よりも品質を重視するお客様を狙う高級化粧品の公式販売ページでは、価格は控えめに書いてあるべきだよね。でも、「今月はこの商品の売上を50万円達成させなきゃ!」と、目標だけを見てしまって戦略の意図を完全に忘れてしまうとどうなってしまうか…。赤と黄色の大きい文字で「今なら9980円!」とか書いちゃうわけ。


HTML

それってもともと狙おうとしていたお客様を逃がしてるよね。結局誰にも刺さらないページになっちゃうんじゃない?


HTML

その通り!わかばちゃん、いいこと言う!


コーディング

実際にHTMLやCSS、PHPなどを使ってWebページを作っていく段階です。

まさに、「Webデザイナー」という職種でイメージする作業がこの段階になります。

テスト

実際にそのシステムが動くかどうかを、お客様に見せる状態にする前に確認します。

運用・PDCA

実際にページを公開したら、効果を見ながら運用していきます。

PDCAサイクルとは

よりよい結果を出すために繰り返し行う行動の仕方のことです。

Plan(企画)
Do(実行)
Check(チェック)
Act(改善)
この頭文字をとって、「PDCAサイクル」と呼ばれています。

大事なのは、Actまで行ったらまたPlanに戻ること。
「なぜお客様が来てくれないんだろう?」「なぜこの商品は見てもらえないんだろう?」何度も何度も仮説を立て、実行、検証することで、より効果の高いWebページが出来上がるのです。

HTML

一口にWebデザイナーと言っても、ひとつのWebページを作成・運用するのにはこんなに考えるべきことがあるんだね!マーケティングやPDCAについては今後の記事でもっと詳しく解説していくよ!お楽しみに!


記事作成:湊川 あい
マンガ・イラスト:湊川 あい


HTMLの基本構造を簡単解説 マンガでわかるHTML入門

HTML基礎がマンガでわかる

HTMLちゃんはなぜ混乱しているの?

Webデザイン初心者わかば

HTMLちゃん、どうしたの!?
突然混乱して。


HTML

混乱するとも!
このメモの書き方じゃ文書の構造がわからないんだもん。


Webデザイン初心者わかば

このメモの書き方でも、私にはわかるけどな。
HTMLちゃんにわかるように書き換えてあげなくちゃ。


HTMLちゃんに構造を教えてあげよう

Webデザイン初心者わかば

そういえばこの前の記事「HTMLって何?簡単解説!」のマンガの中で、HTMLの基本形を教えてもらったわね。
まずはHTMLの基本形を書こうかしら。


HTMLの基本形

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>●●のページ</title>
  </head>
  <body>
    文章
  </body>
</html>

初めて見るタグが出てきましたね。

!doctipe htmlは、「これはHTMLファイルですよ」という宣言をしています。

meta charsetというタグは、HTML文書の文字のエンコーディングを指定しています。
ここでは「UTF-8という文字コードを使いますよ」という宣言をしています。

普段使っているニュースサイト、ネットショップ、チケット予約サイト、すべてのWebページは大方この基本構造で表示されています。

ためしに、どこかのWebページ上で、「右クリック→ソースを見る」をしてみよう。

上の基本形に比べて、中身がたくさん詰まっていてわかりにくいかもしれませんが、headタグがあって、bodyタグがあって、それらがhtmlタグでくるまれているという構造は同じはずですよ。

body要素の中にコンテンツを入れこんでいこう

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>おやつの場所のメモページ</title>
  </head>
  <body>
    おやつの場所

    甘いおやつ
    ドーナツ
    机の上にあります
    ケーキ
    冷蔵庫にあります

    からいおやつ
    おせんべい
    引き出しにあります 
  </body>
</html>
Webデザイン初心者わかば

HTMLの基本形の中に、文章を入れてみたよ!
これでどう?完璧でしょ?


HTML

わかばちゃん、自信があるのはいいんだけど、文章がどういう構造になっているのか、まださっぱりわからないよ。
Webページだとそのコードがどう表示されるか見てみてくれ〜!
こちらの記事で紹介したWebページ用テキストエディタ、なければパソコンにもともとついているメモ帳にそのコードを貼り付けてごらん


HTML基本1

Webデザイン初心者わかば

ファイル名の後ろに拡張子「.html」をつけて保存だね。


HTML基本2

Webデザイン初心者わかば

HTMLファイルを保存できたよ!


HTML

ばっちりだね!次はブラウザでそのファイルを開いてみよう。


Webデザイン初心者わかば

ぶ、ぶらうざって何…?


HTML

ブラウザっていうのは、一言でいうと「インターネット上のページを閲覧するためのソフト」だよ。

代表的なものに、Google Chrome、Firefox、Safari、Internet Explorerなどがあるよ。
Webで調べ物をしたり、ネット通販をしたりと、君もよく使ってると思うよ!


Webデザイン初心者わかば

そういうことね。私はFirefoxを使ってるよ。


HTML

そしたら、さっき作ったHTMLファイルの上で「右クリック→このアプリケーションで開く→Firefox(任意のブラウザ)」を開いてみてね。
Windowsのパソコンだと「右クリック→このプログラムで開く→任意のブラウザ」だったかな?Windowsの操作方法についてはまた確認して追記するね。


HTML基本3

HTML基本4

Webデザイン初心者わかば

おお〜、ブラウザ上で表示された!
って、なんじゃこりゃあ〜!たしかにこれじゃどこが見出しか・どこが段落かわからないわね


見出しと段落をHTMLでマークアップしよう

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>おやつの場所のメモページ</title>
  </head>
  <body>
    <h1>おやつの場所</h1>
	
    <h2>甘いおやつ<h2>
    <h3>ドーナツ</h3>
    <p>机の上にあります</p>
    <h3>ケーキ</h3>
    <p>冷蔵庫にあります</p>

    <h2>からいおやつ</h2>
    <h3>おせんべい</h3>
    <p>引き出しにあります</p> 
  </body>
</html>
Webデザイン初心者わかば

HTMLちゃん、これでどうかしら?


HTML基本5

HTML

わかる、わかるぞ!
わかばちゃん、文書構造をマークアップしてくれてありがとう!Webにこのファイルをアップしたときに、閲覧者・プログラム双方にとって親切なマークアップになったね。


Webデザイン初心者わかば

自分で作っといてなんだけど、簡素な仕上がりよね。Webデザイナーを目指すなら、見た目をもっと強化したいわ。もっとババーンとした、ぐぉんぐぉん動くような、おしゃれなページを作りたいんだけど。


HTML

わかばちゃん、見た目だけに捉われていてはいいWebサイトを作れないんだよ。
HTMLを正しく書く事は、SEO(検索エンジン最適化)っていうものにも関わってくるんだから、あなどれないのだよ。


HTML

次回は他のHTMLタグも学んでいくよ!


記事作成:湊川 あい
マンガ・イラスト:湊川 あい


HTMLって何?簡単解説!マンガでわかるHTML入門

HTML入門マンガ1

HTML入門マンガ2

HTMLとは?

「自分でWebページを作るぞ!」となったときに、まず最初に必要なのがHTMLです。
でも「HTML」ってそもそも何なんでしょう?

HTML

HTMLとは、
Webページ上の文章を書くための言語のことだよ


Webデザイン初心者 わかば

HTMLのことを調べてみたら、「HTMLはマークアップ言語だ」って書いてあったよ。

マークアップ言語って初めて聞く言葉だなぁ。
なんだか難しそうね


HTML

全然難しくないよ!
HTMLは、素直で単純な言語なんだ。
人間である閲覧者に対して、そしてブラウザや検索エンジンのロボットに対して、文章の構造をよりわかりやすく見せてあげることが、HTMLの役目なんだよ。

例えば、わかばちゃんが書いた文章が、使うパソコンやブラウザによって、わかばちゃんの意図と違った構造で表示されたとしたら、どう思う?


Webデザイン初心者 わかば

う〜ん、それは困るなぁ


HTML

そうだね。
どのパソコン・どのブラウザで見ても、文章の構造がちゃんとわかったほうがいいよね!
そのために、文章にルール化された印をつけてあげて、人にもプログラムにも優しい形にすることがHTMLの目的なんだ。


HTMLとは、「ハイパー テキスト マークアップ ランゲージ」の頭文字から名付けられました。

「マークアップ」とは、「文章に目印をつける」という解釈でOKです。

HTMLを使うことで、「ここからここまでは見出し部分」「ここからここまでは段落部分」というように、範囲を指定することができます。

HTMLの基本のかたち

HTMLファイルには二つの部分がある

ひとつのHTMLファイル(マイクロソフトオフィスでいう、ひとつのWordファイルのようなもの)には、2つの部分があります。

  1. HTML文書全体の情報記述する部分
  2. HTML文書の内容を記述する部分

1.HTML文書全体の情報記述する、head要素

head要素内には、ページのタイトル名や、関連付けたい外部ファイル(スタイルシートなど)を記述します。

ブラウザ上の見た目では、ブラウザ上部のタブにタイトル名が表示されます。

2.HTML文書の内容を記述する、body要素

body要素内には、Webページ上に表示させたいコンテンツを書いていきます。ブラウザ上で、Webページのコンテンツとなって見える部分です。閲覧者が見る画像や文章を書いていくのはこのbody要素内です。

HTMLでは文書を構成するパーツを「要素」と呼んでいます。
例えば、「このHTMLファイルに関する情報を記述していますよ」という部分は「head要素」で囲います。
「ここからここまでがHTMLファイルの内容だよ」という部分は「body要素」で囲います。
このように、いろいろな要素を組み合わせていくことでWebページを作ることができます。

文章に目印をつけてあげる方法

閲覧者やプログラムにとって、「ここからここまでがこの要素だ」ということが分かりやすいように、文中にタグという目印をつけましょう。

Webデザイン初心者 わかば

タグが1つだと、「ここからここまで」という範囲指定ができないよね?


HTML

その通り!範囲を指定するときは、「開始タグ」「終了タグ」をセットで使うんだよ。
例えばこんな感じだね。


body要素をマークアップしてみよう

    <body>ボディ要素の内容</body>
HTML

こうやって要素を組み合わせてページを作っていくんだ。
次回の記事では、今日学んだ要素を使って、HTMLで1ページ作ってみよう!


HTML おすすめの本

HTML5の基本を優しく学べる本です。初心者の方だけでなく、「もう一度基本に立ち戻って学んでみたい・HTML5って今までのHTMLと具体的に何が変わったの?」という方にもおすすめです。

[amazonjs asin=”4798126179″ locale=”JP” title=”HTML5の絵本”]

記事作成:湊川 あい
マンガ・イラスト:湊川 あい


Webデザイン独学でも挫折しない3つのポイント

マンガでわかるWebデザイン1

「初めてのWebデザイン」の巻

マンガでわかるWebデザイン1

マンガでわかるWebデザイン2

挫折してしまうのは勿体ない!

「よし、これからWebデザインを勉強するぞ!」と思っても、初めてだから分からない事だらけ。
「参考書を買ってみたものの難しいし、私にはもう無理かも…」
そうなってしまうのはとっても勿体ないと思います。

Webデザイン初心者でも挫折しない3つのポイント

その1 最初から全部わかろうとしなくてOK

ソースコードは全部英語。出てくる用語は初めて聞くようなものばかり。
Webページ制作に触れ始めるときは、「ひとつひとつ理解していかなきゃ!」というように考えてしまいがちです。

でも、初めのうちはいきなり全てを理解する必要はないと思います。

Webデザイン初心者 わかば

「こう書いたら画像が表示されるんだ!」
「こう書いたら字の色が変わった!」
「この記述を消したら、文字がずれてしまって見た目がわるくなっちゃった」


楽しみつつその繰り返しを行っていく事で、自然と「どう書いたらどうなるのかがわかる力」身に付いてきますので、ご安心ください。

その2 いいなと思ったサイトはソースコードを見る

「素敵だな、こんなサイト作ってみたいな」と思うWebページを見つけたら、ブックマークするだけじゃなく、ソースコードを見てみましょう。

HTMLちゃん

ソースコードは、
「Webページ上で右クリック」→「ソースコードを表示」で見る事ができます。


いきなり暗号みたいなものが出てきてびっくりするかもしれません。
今は「ふーん、こういう記号の羅列でWebページって表示されているんだなぁ」と思いながら眺めるだけで十分です!

その3 作る事、見てもらうことを楽しもう

Webデザインは実際に手を動かすことで上達します。
逆に言うと、本をめくるだけで何も作らなければ上達しません。

さらに言えば、
「自分の撮った写真をギャラリーにしてネット上で見てもらいたい」
「友達のバンドのホームページを作ってあげたい」
何かしらの目的を持ったWebページを作るのが、一番上達が速いと思います。

HTMLちゃん

楽しもうという姿勢でいれば、自然とWebページを作れるようになっています!


ラクに構えて、この「マンガでわかるWebデザイン」でWebページを作る過程を楽しみましょう!

[amazonjs asin=”4839948879″ locale=”JP” title=”これからの「標準」を身につける HTML+CSSデザインレシピ (Web Designing Books)”]

記事作成:湊川 あい
マンガ・イラスト:湊川 あい