OrenoHP

自己紹介
たにゃん(@_signaless)
グラフィックデザイナー（紙系）。 
Webは勉強中。
ブログやったり
WordCampKansai2014の実行委員
やったりしています。 
実質はニートです。
大丈夫です、私も初心者です

アジェンダ
ホームページの仕組みを見てみよう
デザインしてみよう
HTMLで骨組みを書いてみよう
CSSで装飾しよう
※質疑応答は別の猛者が答えてくれます
制作中の私のホームページがモデルです

今回は
ホームページを
作ったことがない人向けに、
基本的な作り方と、
骨組み言語であるHTMLやCSS、
デザインについて
説明していきます。

いるもの
テキストエディタ 
（私はBrackets使ってます。HTMLやCSSを書くのに便利な機能がつ
いています。無料） 
Dreamweaverとかの、ホームページ制作ソフトも可。
画像加工ソフト 
（Photoshopとか。ない人はPixlrというオンライン上の編集ソフト
があるみたいです。無料） 
いらないもの
雑念 
大好きなセーラーヴィーナスのことは考えません(´；ω；｀)ﾌﾞﾜｯ

ホームページって
どうやって出来てるの？

• こんな、文字と画像少しづつで出来
たページでも、ページ（文字と画像）
をインターネット上で出力するため
に、そこそこの量のプログラム
（HTML言語）を書き、 
画像を読み込ませています。

• WordやPowerPointのように、 
ページに画像や文字を入力して 
作っていく
• ゲームのように、C言語とか 
なんかよく分からない言語で 
プログラミングして 
文字と画像を出力する
感覚的にはこっちが近いです

では実際に
作っていきましょう

設計とデザインをしよう
どんなページにしたいか、設計とデザインを考えます。
考えたら、Photoshopなどでそのデザインと全く同じように画像を配置
し、色をつけて、一枚の絵を作っていきます。
Photoshopなど専門のソフトを持っていなかったり、操作方法が分から
なかったり、デザインなんてしたことなかったり、なーんも思いつかなかっ
た時は、とりあえず使いたい画像だけでも用意しておくと良いです。 
デザインなどは、無料のテンプレートなどがネット上で配布されています
ので、それを使うのもアリです。
一般的なホームページは、横幅960px（ピクセル）で作られています。
画像はなるべくその範囲内の大きさで準備しましょう。 
（画像編集ソフトなどで、大きさを確認することができます）

• 設計図を作る方法は色々ありますが、 
まずは紙に描いてみるのがおすすめです。 
このトップページは、左のラフ画を元に作っています。 
（汚いラフですみません…）これならみんなできるよね。

部品
• 設計ができたら、次はデザインです。 
使う写真や文字（部品）を、実際のページと同じように配置して 
デザインしていきます（この辺はWordやパワポに似てるかも）
Photoshopの画面

部品
• 配置が終わると、使った写真やイラストなどを、ホームページの
部品として最適な形に切り分けます（スライス作業という）。 
これで、ホームページを作る画像素材の完成です。
部品を切り分ける

デザインやスライス（画像の切り分け）作業は専門的なも
のなので、ソフト等が使えないと作業が厳しいかもしれま
せん。だからWebデザイナーなんて職業が成り立つんです
ね(・∀・)！
これは1から作っていく場合なので、既存のホームページや
テンプレートをカスタムする場合は、使う写真等の用意だ
けでOKです。 
ただ、自分が考えたデザインで1からホームページを作りた
い場合は、やり方は色々あれど、こういう作業は必須にな
ります。
ホームページに使う画像の形式はJPEG、PNG、GIFが望まし
いです。（画像を切り分けた時に、この形式で保存します）
わっ…わからねぇ…

ホームページテンプレートのWEB
MAGIC  
http://www.webmagic.jp/index.html
プロが作る無料のホームページテンプレー
トデザインなう！ 
http://www.designnow.net/ 
 
デザインなんてできねぇ…って人は、 
色んなサイトでテンプレート配布されて
いるようなので、参考までに。

次はページの骨組みを作る
考えたデザイン通りに表現できるよう、まずはページ
の骨組みを書いていきます（簡単なプログラミング）
使う言語はHTMLです。ここではHTML5と呼ばれてい
るものを使います。HTML5の詳しい説明は省きます
が、これを使うのが主流になってきているので、これ
使っとけばいい感じ。
骨組みとは、元になる文章を、簡単なプログラミング
を交えて書くということです。ただひたすらつらつら
と。

• <!doctype html>
• <html lang="ja">
• <head>
• <meta charset="UTF-8">
• <title>signaless-design シグナレスデザイン| 兵庫県篠山市</title>
• <link rel="stylesheet" href="normalize.css">
• 
• <link href='http://fonts.googleapis.com/css?family=Gilda+Display|Rochester'
rel='stylesheet' type='text/css'>
• </head>
• <body>
•
• <div id="container">
• <article>
• <section>
• <div id="indexlogo">
• <img src="images/signalessdesign-textlogo.png" width="500px" height="324px"
なんか見えたね

• どの文章や画像を、（上から）どの順番に表示するか、 
どの部分が見出しなのか、メニューなのか…ということを、 
HTML言語を使って指示します。 
このページを骨組みだけ表示させると、こうなります。 
背景の色とか一部の写真とか、ページを飾っているものが 
なくなりましたが、これが骨組みです。
骨組みとは？

<img src="images/
signalessdesign-textlogo.png" >
「signalessdesign-textlogo.png」と
いう画像ファイルを読み込んでね
<p>Graphic & Web</p>
Graphic&Webっていう文字を出してね
<ul>
<li>About</li>
<li>Contact</li>
</ul>
About、Contact
という文字を 
リスト形式で 
出してね
• こんな感じでHTMLを書いています。 
HTML（<>で囲まれた命令文）は形が決まっており、 
その間に好きな文字や画像ファイル名を書き込んでいきます。

そんな感じでページまるっと
1つ書いたらこうなった。
↓まだ続く

Q.あのアルファベット達は
全部自分で書かないといけないんですか？
A.YES(・ω<)☆

最近は書かなくても 
良くなりつつあります、が
ホームページビルダーやDreamweaverなど、Wordやパワ
ポの操作感と似たような感じで文章や画像貼り付けをして、
それをHTMLに自動で書き起こしてくれるソフトもありま
す。
が、細かいデザイン調整や、SEO（Googleなどで検索した
時に、自分のページが上位に表示されるようにする）を気
にするのであれば、HTMLを覚えて、つらつら書いていく作
業は必須になります。 
自分のページを検索結果で上位に表示させるためには、正
しい骨組みを作って、検索ロボットに情報を読み取っても
らう必要があるのです…！

でも怖いことはないんだよ
HTMLは英語がベースになった言語です。 
簡単な英語が分かれば、なんとなく意味が理解できます。
命令文は決まっているので、よく使う命令文（タグという）
を覚えておけば、ある程度できます。
タグ辞典や、ネット上にリファレンスなどもあるので、最初
はそういうの見ながら書いていくと良いです。
HTMLを書くために作られたテキストエディタ(Bracketsとか)
は、頭文字を打つと、タグを予測して入力してくれます。 
Web制作者は、こういったエディタを使って効率よく書いて
います。

よく使うタグ
<h1>●●●</h1>
文章の見出しを意味する（新聞の見出しみ
たいなもん）。Headingの意。 
<h1> </h1>で囲まれた文字（●●●）は自
動的に大きく、太い文字になる。 
<h2> <h3>…などもあり、数字が大きくな
ると、見出しの大きさが小さくなる（小見
出しになる）
消費税増税
４月から８%に
今後、少子高齢化により、現
役世代が急なスピードで減って
いく一方で、高齢者は増えてい
きます。社会保険料など、現役
世代の負担が既に年々高まり
つつある中で…(財務省HPより
抜粋）
<h1>
<h2>
<p>●●●</p>
本文。<p> </p>で囲まれた部分は、１つの
段落として認識される。paragraphの意。
<p>
個人的に、 
新聞で例えると 
分かりやすい

よく使うタグ
<img src=“●●●.jpg”>
画像を挿入するタグ。imgはimage、srcは
sourceの意。 
“ ”の中に、読み込みたい画像ファイル名
を、拡張子（jpgとかpngとか）をつけて指
定する。
<div> </div>
<h1>とか<p>とかつらつら書いたものを、
場所（ヘッダーとかメインとか）毎に、ひ
とまとめにして区切るタグ。divisionの意。
これでかたまりを作って、配置していく。
<img src>
<div>
<div>

HTMLは「開始タグ」「閉じタグ」があります。 
「開始タグ」「閉じタグ」で、その効果をどの範囲に適
用するかを決めます。 
開始タグは<h1>などという形で、閉じタグはそれに 
</h1>など、前にスラッシュ(/)がつきます。 
開始タグ、閉じタグがないものもあります。 
<img src=“ ”>など、範囲指定のためではなく、ファ
イル名を指定したりするものなどは、閉じタグはありま
せん。
タグは他にも色んな種類のものがあります… 
それらを正しく書かないと、ページが正常に表示されま
せん。 
最初から全部覚えなくてもいいですが、リファレンスな
ど見て、コピペでもいいので書くことが必要です。

デザインとか見た目とかよりも、まずHTMLで、 
何をどこに表示するか、どの文が重要なのかなどを指定して、 
正しい骨組みを作ることが先。塗装はあとで。

その後の塗装部分（デザイン） 
は 
CSSでやるんだよー！

CSS（スタイルシート） 
とは？
カスケーディングスタイルシートの略。 
先ほど書いたHTMLの骨組みに、色や文字の大きさ、フォ
ントの種類、背景画像…などを付け加えて、装飾してい
く言語です
さっきのHTMLタグに目印（主にid、classという単語を
使います。セレクタと呼ぶ）などをつけて、タグやその
目印がついた要素を、どう装飾するかを指定します
CSSの方が、より英語に近い感じです。簡単な英単語が
分かればおk。

h1 {
color:red; 
font-size:28px;
}
色と文字の大きさが変わった！
消費税増税
４月から８%に
抜粋）
CSS
<h1>消費税増税</h1>
消費税増税
４月から８%に
抜粋）
結果

h1 {
color:red; 
font-size:28px;
}
CSSはこの組み合わせと、{ } : ; で書かれます。 
セレクタは、あらかじめ決まっているHTMLタグを使うこと
もあれば、自分で考えた文字列を指定することもできます。 
プロパティと値は、使える文字列が決まっています。 
（これもリファレンスがあります）
何に対して
効果をつけるか 
（セレクタ）
何を変えるか 
（プロパティ）
具体的にどうするのか 
（値）

font-size…文字の大きさ
font-weight…文字の太さ
font-family…フォントの種類
line-hight…行間の空き具合
color…文字の色 …etc
h1 {
color:red; 
font-size:28px;
}
何を変えるか 
（プロパティ）
文字関連のプロパティだけでも 
これ以上ある！！！

なのでCSSでは 
細かいカスタムが可能です
既存のホームページなどで「背景の色を変えたい、文字の
書体を変えたい」という時は、CSSを変えると何とかなる
場合が多いです。
プロパティ、値共に、設定できる項目が多いです。それら
を一字一句間違わずに書かないと、設定が反映されません。
HTMLと同じで、最初から全部覚える必要はないですし、
書いていくうちに覚えられます。
h1とかh2とか、あらかじめ大きさや太さが決まっている
タグでも、CSSでそれらの設定を変えることができます。

本文を表す<p>が複数ある…。 
<p>ごとにデザインを変えたい！
<p>こんにちは！</p> 
<p>たにゃんのホームページです</p>
<p id=“hello”>こんにちは！</p> 
<p class=“caption”>たにゃんのホームページです</p>
タグ（この場合は<p>）に、 
「id」「class」をつけて、 
別々にデザインを指定することができます！

<p id=“hello”>こんにちは！</p> 
<p class=“caption”>たにゃんのホームページです</p>
id名、class名は自分で決められます。 
そこで付けた名前をセレクタにして、CSSで指定します。
id名
class名
#hello {
font-size: 20px;
color: pink;
}
.caption {
font-size: 16px;
color: grey;
}
#は「id」の意味、 
.は「class」の意味です。
タグにidとclassを振り分け
てデザインしていきます。 
idは1ページに１回しか使え
ません。 
classは何回でも使えます。
セレクタ
セレクタ

• body {
• background-color: #fafdff;
• }
• div#container {
• width: 960px;
• margin: 0 auto;
• }
• li a {
• color: #486070;
• text-decoration: none;
• }
• li a:hover {
• color: #3f5767;
• }
• div#sidebar-left {
• width: 200px;
• float: left;
まずはセレクタを書き、 
{ の後ろにプロパティを書いて 
: をつける。 
その後ろに値を書き、 
; でしめる。 
そのセレクタに対しての 
指定を全部書き終わったら、 
}でしめる。
これもつらつらと書いていきます。

div#indexlogo {

margin: 60px 230px;

}

<div id="indexlogo">

<img src="images/
signalessdesign-textlogo.png"
width="500" height=“324">

!
</div>
indexlogoという範囲
画像の 
幅(width)と高さ(height)
上下の間は60pxあけて、 
左右の間は230pxあけて配置
→ホームページの幅は960px、 
画像の幅は500px、 
残りの幅は960-500=460px 
それを2で割って230px…中央えに！

HTMLタグもCSSも 
まだまだ細かい種類や 
決まりがあるんですが、 
今回はここまで。
あとは実習で☆

ご清聴ありがとうございました。

OrenoHP

Recommended

Recommended

More Related Content

What's hot

What's hot (18)

Viewers also liked

Viewers also liked (19)

Similar to OrenoHP

Similar to OrenoHP (20)

Recently uploaded

Recently uploaded (12)

OrenoHP