Your SlideShare is downloading. ×
Webサーバ、HTML
Webサーバ、HTML
Webサーバ、HTML
Webサーバ、HTML
Webサーバ、HTML
Webサーバ、HTML
Webサーバ、HTML
Webサーバ、HTML
Webサーバ、HTML
Webサーバ、HTML
Webサーバ、HTML
Webサーバ、HTML
Webサーバ、HTML
Webサーバ、HTML
Webサーバ、HTML
Webサーバ、HTML
Webサーバ、HTML
Webサーバ、HTML
Webサーバ、HTML
Webサーバ、HTML
Webサーバ、HTML
Webサーバ、HTML
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Webサーバ、HTML

1,431

Published on

@amachang による資料です!

@amachang による資料です!

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,431
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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

×