OrenoHP

50 %
50 %
Information about OrenoHP
Technology

Published on March 11, 2014

Author: YukoTaniguchi

Source: slideshare.net

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>…などもあり、数字が大きくな ると、見出しの大きさが小さくなる(小見 出しになる) 消費税増税 4月から8%に 今後、少子高齢化により、現 役世代が急なスピードで減って いく一方で、高齢者は増えてい きます。社会保険料など、現役 世代の負担が既に年々高まり つつある中で…(財務省HPより 抜粋) <h1> <h2> <p>●●●</p> 本文。<p> </p>で囲まれた部分は、1つの 段落として認識される。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; } 色と文字の大きさが変わった! 消費税増税 4月から8%に 今後、少子高齢化により、現 役世代が急なスピードで減って いく一方で、高齢者は増えてい きます。社会保険料など、現役 世代の負担が既に年々高まり つつある中で…(財務省HPより 抜粋) CSS <h1>消費税増税</h1> 消費税増税 4月から8%に 今後、少子高齢化により、現 役世代が急なスピードで減って いく一方で、高齢者は増えてい きます。社会保険料など、現役 世代の負担が既に年々高まり つつある中で…(財務省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ページに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

Add a comment

Related presentations

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