OrenoHP
Description
自己紹介 たにゃん(@_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 rel="stylesheet" href="style.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; } 色と文字の大きさが変わった！ 消費税増税 ４月から８%に 今後、少子高齢化により、現 役世代が急なスピードで減って いく一方で、高齢者は増えてい きます。社会保険料など、現役 世代の負担が既に年々高まり つつある中で…(財務省HPより 抜粋） CSS <h1>消費税増税</h1> 消費税増税 ４月から８%に 今後、少子高齢化により、現 役世代が急なスピードで減って いく一方で、高齢者は増えてい きます。社会保険料など、現役 世代の負担が既に年々高まり つつある中で…(財務省HPより 抜粋） 結果
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…中央 えに！
<link rel="stylesheet" href="✖✖✖✖.css"> HTMLとCSSは、
別々のファイルで
作ることが
多いです。
HTMLにCSSを
読み込むタグを
記述して
関連付けます。 HTML ●●●●.html CSS ✖✖✖✖.css スタイルシートを
読み込みます 読み込む
スタイルシートは
このファイルです
HTMLタグもCSSも
まだまだ細かい種類や
決まりがあるんですが、
今回はここまで。 あとは実習で☆
ご清聴ありがとうございました。
#hello presentations
Related presentations
Presentación que realice en el Evento Nacional de Gobierno Abierto, realizado los ...
In this presentation we will describe our experience developing with a highly dyna...
Presentation to the LITA Forum 7th November 2014 Albuquerque, NM
Un recorrido por los cambios que nos generará el wearabletech en el futuro
Um paralelo entre as novidades & mercado em Wearable Computing e Tecnologias Assis...
Microsoft finally joins the smartwatch and fitness tracker game by introducing the...
Related pages
レポート、大学レポート、論文、書式、契約書、テンプレート、レポートの書き方、レポートの見本、検索、共有
（1）英語の習熟レベルついて (必須) 日常会話レベル （2）toeicスコア（点数をご記入ください。）（全角40字以内） ...
Read more
レポート、大学レポート、論文、書式、契約書、テンプレート、レポートの書き方、レポートの見本、検索、共有
総合職エントリー・プレゼンテーションテーマ 【1】 あなたが学生時代にもっとも打ち込んだことは何ですか？
Read more
Vector：ソフト作者ホームページ - 【O】
ORENOHP: Oiagi: otsu-soft: Orenosv: overdrive: OBC商奉行売上伝票入力Access97 ...
Read more
Vector：ソフト作者ホームページ - 一覧
ORENOHP: Oiagi: otsu-soft: Orenosv: overdrive: OBC商奉行売上伝票入力Access97 ...
Read more
Add a comment