プログラミング未経験２０代後半の文系女子が、
PCスキルほぼゼロからプログラマーを目指し勉強したことを書いていく
※初心者で分からないことだらけです。お気づきの点がございましたら、ご指導のほどよろしくお願いします。
勉強するにあったって
- PC MacBook Airを使用
- 目標 Webサイトを作るプログラマーになりたい
- 勉強方法 動画学習サイト ドットインストールを使ってHTMLから勉強していく
- 学ぶ言語とフレームワーク Ruby、Ruby on Rails
・主にWebアプリケーション開発に使われている
・日本人が開発した言語
・初心者でも習得しやすい
などから、Rubyにしました
Webサイトをつくれるようになる
勉強した事
ドットインストールHTML入門編 全２４回 ＃1 ~ ＃7まで
HTMLとは？＃1
- Hハイパー Tテキスト Mマークアップ Lランゲージ
- 構造的な文書の事
- HPとか作るのに使う
必要なもの＃2
- ブラウザ
chrome
internet explorer - エディタ
atom - フォント
なくてもいい けど （同じようにRicty diminished 使用）
タグと属性を理解する＃3
- タグ
文書に意味づけしたい時に <タグ> を使う
<タグ>開始タグ 文書 </タグ>終了タグ
- 属性
タグに付帯情報をつけたい時に使う （いくつもつけられる）
<タグ **属性名=値**>文書</タグ>
はじめてのHTML＃4
イレココード（ネスト）＝入れ子
インデント＝字下げ
＃4＃5を見ながらHTML作った###
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf8">
<title>はじめてのHTML</title>
</head>
<body>
<P>こんにちわ！</p>
</body>
</html>
meta,linkタグを使う＃5#
<!DOCTYPE html>
HTMLで文章を書くという文章宣言で決まり文句
<html lang="ja">
言語設定を日本語にする
<head>や<body>タグを
</body>
</html>
で囲う
<head>文章自体の情報
<title>ブラウザでタブ等に表示されるもの
<body>本文
metaタグ
charset キャラセット
<meta charset="utf8">
HTMLの文字コードをutf8に指定する
スペル等間違え
ファイルがutf8でない
ブラウザのエンコードがutf8になってないと文字化けするので注意
styleタグを使ってみよう＃6##
styleタグ
<head>タグ内で使える
文書の見た目を規定するためのCSSを書くことができるタグ
例 背景色をスカイブルーにする
<style>
body { background: skyblue; }
</style>
※<style>タグを書いていくとどんどん長くなっていくので<style>を別ファィルにしてHTMLファィルから呼び出す作業をする
別ファイルから呼び出す方法とそのためのタグ
・新しいファイルを作る
body { background: skyblue; }
<style>の指定を書いて同じファイルに保存
[（○○.css）等cssとわかるように名前を付けるとわかりやすい]
・linkタグを使って呼び出す
<link rel="stylesheet" href="○○.css(ファイル名)">
コメントの書き方と文章の無効化
- コメント（動作に関係ないメモ書を書く事ができる）
- 無効化
<!-- コメントまたは無効化 -->
※ソースを見るとコメントが表示されるので注意
id,class,style属性を使ってみよう＃7
グローバル属性
全てのHTML要素で使用できる属性のこと
例 背景色をスカイブルーにする
<p グローバル属性="message">こんにちわ</p>
| 属性 | 説明 |
|---|---|
| id | 要素に固有の名前を指定する属性 |
| class | 分類名を指定する属性 |
| style | cssを指定する属性 |
| title | 要素に補足情報を指定する属性 |
| hidden | 要素が無関係であることを示す属性 |
| spellcheck | 要素内をスペルチェックするかを指定する属性 |
| accesskey | ショートカットキーを割り当てる属性 |
| contenteditable | 要素の内容を編集可能かを指定する属性 |
| contextmen | 要素を右クリックした時のメニューを指定する属性 |
| dir | 要素内テキストの表記方向をしていする属性 |
| draggable | 要素をドラッグ可能かを指定する属性 |
| dropzone | 要素をドロップ時の挙動を指定する属性 |
| lang | 要素内の言語を指定する属性 |
| tabindex | 要素にTABキーで移動する順序を指定する属性 |
| translate | ローカライズ時に要素に翻訳するかを指定する属性 |
| data-* | 要素にカスタムデータを指定する属性 |
複数のclassを持ちたい時
"message active”(スペースで区切る)
例 style スタイルを直接指定したい時
<p class="message" style=background:skyblue>こんにちわ!</p>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>はじめてのHTML</title>
<style>
body { background: skyblue; }
</style>
</head>
<body>
<p>こんにちわ!</p>
</body>
</html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>はじめてのHTML</title>
</head>
<body>
<!--
グローバル属性
id: ひとつしかない要素
class:複数ある要素
style:スタイルを直接指定
-->
<p id="message">こんにちわ!</p>
<p class="message active">こんにちわ!</p>
<p class="message" style=background:skyblue>こんにちわ!</p>
</body>
</html>
