Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Webサーバ、HTML

1,797 views

Published on

@amachang による資料です!

  • Be the first to comment

  • Be the first to like this

Webサーバ、HTML

  1. 1. ウェブサーバ、HTML
  2. 2. 目次● 勉強会に参加するにあたって● 今日、勉強すること● とりあえず、やってみよう● HTML を最低限書けるようになろう
  3. 3. 勉強会に参加するにあたって● 一週間に一回の勉強会に参加するということ ● 何かをするということ ● = 何かをしないということ ● 辛いこともあると思いますが、頑張っていきましょ う● 勉強会の目的 ● ウェブサービスを立ち上げる、オールマイティにな ること ● この勉強会では、一つの技術にこだわっている時間 はない ● 必要な部分だけ素早く理解し、頑張っていきましょ う
  4. 4. 勉強会に参加するにあたって● もっとも重要なこと ● たぶん、この勉強会はつまらない ● 延々と「こういう風に書いたらこうなります」「こ うしたらこうなります」という話を聞き続けること になるから ● ウェブサービスを作るということは、泥臭くつまら ない、生産性を感じない長い長い作業の結晶である から ● 思ったより、華々しい世界ではない
  5. 5. 今日、勉強すること● ウェブを構成する 3 つの技術 ● HTML ● HTTP ● URI
  6. 6. 今日、勉強することウェブサーバ HTTP URI HTML ブラウザ
  7. 7. 今日、勉強すること● ウェブサーバって何だろう?
  8. 8. とりあえず、やってみよう!● ターミナルを開こう● ターミナルってなんでこんなの使うの? ● ターミナルからじゃないと、めんどくさいことがた くさんある。 ● ターミナルのほうが、慣れてくると効率が良い(か も)
  9. 9. とりあえず、やってみよう# Apache2 (ウェブサーバのインストール)sudo apt-get install apache2 こういう感じのは、 あんまり使わない→
  10. 10. とりあえず、やってみよう# Apache2 の設定sudo vim /etc/apache2/sites-available/default# DocumentRoot を書き換えて公開するディレクトリを決めるDocumentRoot /home/ubuntu/www 設定といえば、こんなの?→ ←いえ、こんなのです 一見難しそうだけど、そのうち慣れます
  11. 11. とりあえず、やってみよう# Apache2 の再起動sudo service apache2 restart
  12. 12. とりあえず、やってみよう# DocumentRoot で公開したディレクトリにファイルを置いてみるvim /home/ubuntu/www/hoge.html# ファイルには以下のような内容<body>hey</body>
  13. 13. とりあえず、やってみよう● ブラウザで http://localhost/hoge.html を見てみ よう● Google Chrome のデベロッパーツールの Network を使って、HTTP で URI や HTML は どのように送られているのか見ることが出来る● telnet で実際に生 HTTP も送ってみよう HTTP ってこんな感じのやりとり→
  14. 14. HTML を最低限書けるようにしよう● HTML で伝えたいことが伝えらるようになろう● HTML を書く前に、どのくらいのコストがかか るのか、見積もれるようになろう
  15. 15. HTML を最低限書けるようにしよう● 基本的なこと ● 要素、タグ、内容 ● ハイパーリンク ● CSS● デザイン的なこと ● 文字、画像、色、フォント ● 配置、四角の辺と、どの辺がどの辺の基準になって いるか
  16. 16. 要素、タグ、内容<html> <head> <meta charset=”UTF-8”> <title>タイトル</title> </head> <body> <h1><img src=”/logo.gif”></h1> <p>ほげ<span>ふが</span></p> </body></html>
  17. 17. 要素、タグ、内容● タグ ● <p> や </p> など < から > で囲まれた部分を言う ● <p> のような / が先頭に付かないタグは「開きタ グ」と言う ● </p> のような / が先頭に付くタグは「閉じタグ」と 言う● 要素 ● 開きタグ〜閉じタグまで含んで「要素」という● 内容 ● 開きタグと、閉じタグの間にある部分を「内容」と いう
  18. 18. ハイパーリンク<a href=”http://www.google.com/”>google</a>
  19. 19. CSS● 要素がどんな見た目なのかを書くための文法● 開きタグの中に書く方法 <div style=”background-color: red”>ほげほげ</div> <span style=”color: blue”>ふがふが</span> <p style=”margin: 2px; padding: 3px; border: 4px solid black”>ぴぽぴぽ</p>● style 要素の内容に書く <style> p { position: absolute; width: 100px; height: 100px } a.hoge { font-size: 30px; font-weight: bold } </style>
  20. 20. HTML でデザイン● 文字 ● 文字揃え: text-align ● 色: color ● フォント: font-family ● 文字の大きさ: font-size● 背景 ● 色: background-color ● 画像: background-image
  21. 21. HTML でデザイン● マルチカラムレイアウト ● float, clearfix ● position● 余白、ボーダー ● margin, padding, border● 絶対位置決め ● position
  22. 22. 次回以降の環境について● 今回は、とりあえず Ubuntu という環境に揃え てやってみましたが● 次回以降は、自分の好きな環境を構築してやっ ていただいて結構です● ただ、個人の環境でやる場合。サポート出来な い可能性があるので注意してください● Amazon EC2 に SSH で繋いでやりたい場合、 10,000 円までサポートできるというお話を Amazon 様から頂いているので、その方は僕か 飯塚のほうまでメッセージ等でご相談ください

×