座学を受けながら色々やった結果をめもっておきます。追記修正したよ！！
なにかアドバイスとかあればコメントおねがいします。
---
今日の資料はここ
*はじめに - 勉強会に参加するにあたって
id:amachang 先生からのお言葉。
・一週間に一回の勉強会に参加するということは「何かをすること」
→つまり、時間的にはなにかやりたいことを我慢しなければならないのです
→結構大変かもしれないけどがんばりましょう
・この勉強会の目的
→WEBサービスを立ち上げる事ができるようにすること
→ひとつの技術について深く掘り下げていく時間はない（6ヶ月程度）
→必要な部分を集中的に理解しよう！
・重要
→泥臭い事をやっていった結晶がWEBサービス
→華々しくはない、それを分かった上で勉強して欲しい
*WEBを構成する三つの技術
HTML
HTTP
URI
（一つ一つの話もあったけど省略。ｇｇｒｋｓ）
ウェブサーバ：PCの中で走っている「ソフトウェア」
→マシン自体ではなくてマシン上で走っているソフトウェアのこと。
*ターミナルをひらこう
今回参加者はターミナル周りで結構苦労しました。
バージョンが違う場合などでUbuntuの左側に「端末」というアイコンが出てこない場合：
→Macの場合
Dashホーム（一番左上）をくりっく→terminalと検索すると出てくる
→Win
ｇｇｒｋｓ
-何で使うのか
・アイコンが並んでいるPCの画面じゃ出来ないことが端末からだと出来る！ということが多い。
→これがないとプログラムがうまく動かないことが多い。
・慣れてくるとターミナルの方が効率がいい。
*ウェブサーバのインストール
・これも基本的にはターミナルからコマンドを打ってインストールできます
sudo apt-get install apache2
と打ちます。
・やってることは、イメージ的にはVectorとか窓の杜とかからソフトをダウンロード→解凍→インストールしてるのに近い
・sudoは管理者権限で何かをするという宣言
・apt-getはアプリケーションをゲットしますよ、installはインストールしてくださいよ
→「管理者権限でapache2というアプリケーションをゲットしてきてインストールしてきてくださいよ」という意味（たぶん）
ちなみにsudoでパスワード要求されるが、パスワードは打っても画面では見えないのは仕様
*Ubuntuの中のローカルホスト？を立ち上げてみよう
Ubuntuの中のFireFoxを立ち上げて、
http://localhost/と入力
→It works！なんちゃら〜と入力出来ればOK、出ない場合何かが間違ってる
*好きなHTMLを自分で作ってみる
・まずApacheの設定を書き換える
sudo vim /etc/apache2/sites-available/default
「管理者権限でvimを使って/etc/〜〜というディレクトリをひらきましょう」かな？（自信ない）
→そうするとなんだか黒い画面がでてくる
→ちなみにデフォルトではvimが入ってないので入れる必要あり。
→vimはテキストエディタのプログラムの名前で別にvimじゃなくてもいい
→いずれにせよさっきapache2をいれた要領で何らかのテキストエディタをapt-getしてくればいい
テキストエディタには
・vim
・gadit：初心者におすすめ？
・emacs：矢印キーが使える？？（矢印キーって何だ）
・nano：背中にぜんまいがついている初心者におすすめ
などがある（今回僕ははかせnanoをつかいました）
・さっき開いたApache2の設定画面でDocumentRootを書き換えて公開するディレクトリをつくる（ここでつまづいた）
→資料中には DocumentRoot /home/ubuntu/www とあるが、/ubuntu/の部分は自分の設定したUbuntu内のユーザーIDで変わる
（例：hogehogeというIDなら DocumentRoot /home/hogehoge/www
→さらに言うと、hogehogeというディレクトリは存在するが、wwwというディレクトリは初期状態では存在しないはず
→ためしにlsと打ってみるとhogehoge内にあるディレクトリが表示される
→ここでwwwというディレクトリがなければ mkdir wwwと打ってディレクトリをつくる（mkdirってmake directoryの略だろうか）
・Apache2を再起動する
sudo service apache2 restart
（管理者権限を使ってapache2というアプリを再起動してくださいよ）
→ここで特にエラーっぽい記述が出ていなければOK
・ディレクトリにファイルをつくる
→親ディレクトリはさっき作った/home/hogehoge/www/になってる
→ここにvimとかnanoを利用してファイルを作る
nano /home/hogehoge/www/hoge.html
(赤字部分が作りたいファイルの名前)
→そうすると何も書いてない画面が出てくるのでなんかhtmlタグを打って保存する
→保存の仕方とか終了の仕方：^XとあったらCtrl+Xという意味
・FireFoxでhttp://localhost/hoge.htmlを見てみる
→表示された！：OK
*HTMLを最低限かけるようにしよう
・htmlタグとスラッシュhtmlタグ
→スラッシュがついてないタグ：開タグ (<body>とか)
→スラッシュがついているタグ：閉じタグ(</body>とか)
→metaタグのように閉じタグが存在しないものもある。
・要素：開タグから閉じタグまでの部分のこと。
→meta単体のことをmeta要素ですとかいったりする。
・内容:<body></body>のなかに含まれる「内容」、つまり開きタグと閉じタグの間にあるもののこと
→HTMLは要素、タグ、内容で構成されている。
・ハイパーリンク
→ハイパーリンクを考えた人はえらい 今では当たり前だけど
・CSS
→HTMLの見た目どんな感じか、というのを書くもの。
→つまりそれぞれの要素がどんな見た目なのかを書くための文法
１． 開タグの中に書く方法
<div style= の中に色んなスタイルの指定をすればおｋ
２． style要素の内容にまとめて書く。
→このへんの例は資料参照
→HTMLで「デザインする」というのは「CSSを書き換える」ということ
・CSSで出来ることにはいくつかの種類がある。
・文字関係のCSSは大体4つ
文字揃え: text-align
色: color
フォント: font-family
文字の大きさ: font-size
・背景
色：background-color
画像：background-image
・マルチカラムレイアウト
float, clearfix
position
・余白、ボーダー
margin, padding, border
・絶対位置決め
position
→他資料参照
→詳しくはぐぐれ
→このへんは正直ぐぐりながら少しずつ覚えていくのがいい
★課題：普段使うWEBサイトの中でどうやって表現できるかやってみよう！！
→1つのものを立ち上げるために、何枚ものHTMLを書かなければいけないので、HTML1枚にかかる時間×50〜60ぐらいの時間がかかる
→見積もりで失敗しないように注意！！
*便利なツール
・Google Chromeの右上にあるスパムのマーク→ツール→デベロッパーツール
→左下の虫眼鏡をクリックして気になる部分をクリックするとタグがどうなってるのかCSSとともに見ることが出来る！！
*個人的な感想とか
・おぼろげながらわかってたようなターミナルのコマンドがさらになんとなくわかった。
・HTMLとCSSのタグは正直まだよくわからん・・・原理は分かるんだけど調べながらやらないと不安・・・
・参考書は一応持ってるんでそれも参考にしよう
・友達のWEBデザイナーのひとに聞いたらここ教えてもらった↓
TAG index
http://www.tagindex.com/
