141115 making web site
21
Website を作ろう !! vol.3 ◆ GitHub の基本操作おさらい ◆ HTML & CSS の基本操作 ® 2014 Women Who Code Tokyo
-
Upload
himi-sato -
Category
Technology
-
view
198 -
download
0
Transcript of 141115 making web site
Websiteを作ろう!! vol.3
◆ GitHubの基本操作おさらい
◆ HTML & CSS の基本操作
® 2014 Women Who Code Tokyo
HTML・CSS の基本操作
® 2014 Women Who Code Tokyo
HTML・CSSってなーに？
Webサイトを作成するための言語
・HTML + CSS = Webサイト
【HTML】Hyper Text Markup Languageの略
文章の構想を指定していくもの
【CSS】Cascading Style Sheet の略
見た目を指定していくもの(stylesheet) ※補足※ ・CSS3
CSS ver.3という意味
多彩な表現が可能だが各ブラウザによって実装がまちまち
caniuse.comで対応状況を調べることができる。
必要なツールって？
テキストエディタ(なんでもOK！)
ブラウザ(とりあえずGoogle Chrome)
実際にチョロっと見てみましょー♪
https://www.womenwhocode.com/about
HTMLのコードを書いてみよう！①
HTML5 は大文字/小文字を区別しないので、どっちを使ってもOK・最初にこの文章はHTMLですよ～っていう宣言を書く。
<!DOCTYPE html>（文章宣言）
大きく分けて2つ
・<head> - タグに載せる文章や、設定を入力していく
・<body> - 本文を指定していく
HTMLのコードを書いてみよう！②・head要素によく使われるもの <meta name=“description” content=“Women Who Code Tokyo”> descriptionはこのサイトがどういうものか説明したもの
contentは検索エンジンで確認されるので、正確に書きましょー！
<style>見た目を指定していくもの。別ファイルで書く事が多いけど、htmlに書くことも可能
通常長くなるのでstylesheetを別ファイルで作ってリンクさせて読み込ませる
<link rel=“stylesheet” href=“stylesheet.css”>
・body要素によく使われるもの <p>タグ･･･文章を書くときに使う
<h>タグ･･･headingという意味で見出しに使い、h1~h6まである
<br>タグ･･･パラグラフ<p>の中で改行したいときに使う
<hr>タグ･･･水平線を入れてくれる。文章の途中で画面が変わったり
区切りをつけたいときに使う
<ul>タグ･･･箇条書きにしたいときに使う
<ol>タグ･･･数字の箇条書きににしたいときに使う
<li>タグ･･･箇条書きにしたなかに、さらにリスト表示したいときに使う
HTMLのコードを書いてみよう！③・コメントにリンクを貼りたいとき <p><a href=“アドレス” target=“_blank”>Women Who Code Tokyo</a></p>
target･･･別タブでリンク先を開きたいときに使う
・ページ内リンクを貼りたいとき リンク先を貼りたいところ
⇨<p><a href=“#hello1”></a></p> 任意のidを「#」と一緒につけてあげる
表示させたいところ
⇨<p id=“hello1”>hello!!</p> 飛ばしたいところにidをつけてあげる
・画像を表示させたいとき <img src=“logo.jpg” width=“500” height=“250” title=“WWCTのロゴです">
画像のファイル名をsrc(source)にいれてあげる
幅(width), 高さ(height)の指定もできる ↑
指定してあげるとブラウザが画像解析しなくて良いので 表示速度が速くなる
titleを入れると、画像にマウスオーバーした時に指定したコメント
が出てくる
HTMLのコードを書いてみよう！④・スタイリングしたいときに使用するdiv, span, id, classについて
div: 汎用ブロック要素（前後に改行が入る）
span: 汎用インライン要素（前後に改行が入らない）
id: その文書に一つだけの要素
class: 複数あってもOK
・構造的なタグ <header>タグ
<footer>タグ
<nav>タグ ← navigation のこと。メニューとかに使うよ～
<article>タグ
<aside>タグ ←副次的な内容
<section>タグ ←どこにも入ってこないけどあるまとまりをもったもの
・scriptタグについて 動的サイトを作る際に用いるJavaScriptを読み込む時に使うタグ
<script src=“ファイル名. js ”></script>
bodyの閉じタグの直前に書くのが一般的
HTML5に対応していない古いブラウザでは構造的レイアウトを示すためdivタグが使われていた
例：<div id=“header”>
古いブラウザに合わせる時はこういう書き方もするので覚えておくと良いかもね！
（……でも使わないと思うけどね！ ）
HTMLのコードを書いてみよう！⑤
CSSのコードを書いてみよう！①・基本的な書き方 1．セレクタ（操作対象）を書いた後に「{}」を書く
2．{}の中に、プロパティと値をセットにして「プロパティ: 値;」を書く
3．値は複数書くことができるので、その場合は「；」で区切る
例
h1{ color: red; }
セレクタの種類 HTMLの要素を指定、idを指定、classを指定
セレクタ
プロパティ
値
・styleの優先度 セレクタが同じだった場合は後から書いた方が優先
外部ファイルやstyleタグより、インラインで書いた方が優先
詳細度の高い方が優先 「!important」が最優先！！
・色の指定方法
1．名前で指定（red, green, blue, pink等）
2．rgbで指定（Red, Green, Blue をそれぞれ数値(0~255)で表現）
例： rgb(0, 255, 0)
3．16進法（”#” の後に3桁か6桁で指定）
例： #00f, #ff0000
CSSのコードを書いてみよう！②
・テキストのスタイリング ＜プロパティ＞
color 色の指定
font-weight フォント幅の指定
font-size フォントのサイズ（pxがつかいやすいから、pxで）
text-align 行揃えを指定（text-align: center, right, left等）
font-family フォントの指定
line-height 行の高さを示す
・backgroundの設定
＜プロパティ＞
background-color 背景色を指定
background-image 背景に画像を挿入する「url(ファイル名)」
background-position 背景の位置を指定
例：{background-position: 10px 10px;} 右に10px、下に10px
background-attachment 画面スクロール時に背景画像をどうするかを指定
scroll デフォルト。スクロールと一緒に流れる
fixed スクロールしても動かない
CSSのコードを書いてみよう！③
・ボックスモデル HTML の要素をブラウザに表示すると、それぞれが四角い領域を確保するのでそれをスタイリング。
プロパティ「width」「height」がある
CSSのコードを書いてみよう！④
・配置に関するプロパティ position
値 static デフォルト
relative 相対的な配置をしたいとき
absolute 絶対的な配置をしたいとき
fixed スクロールしても位置を変えたくないとき
CSSのコードを書いてみよう！⑤
GitHubの基本操作 おさらい
GitHubってなーに？
git -VCS(Distributed Version Control System) の1つ
GitHubは、gitのシステムを使ったWebサービス
公式キャラは、OctCat(オクトキャット)
WWCTのGitHub repository
https://github.com/WWCodeTokyo
GitHubでよく使うもの
レポジトリ(共有ボックスみたいなところ)に保存する
分かりやすかった《郵便局メソッド(๑˃ᴗ̵˂)̵و ＞
・git add ・git commit -m “コメント” ← 必ずコメントを入力
・git push
http://nanapi.co.jp/blog/2014/04/23/git-love/
✉ 郵便局メソッド ✉
※ nanapiさんのブログより引用
git add ＝ 書いた手紙を封筒にしまう
git commit ＝ 封筒の封をする
git push ＝ 封をした封筒をポストに入れる
WWCTのレポジトリ
では、やってみよー╭( ･ㅂ･)و ̑ ̑
❤
Enjoy Coding…
® 2014 Women Who Code Tokyo
