読者です 読者をやめる 読者になる 読者になる

転がる先の杖

サラリーマンの傍、自力で食っていけるよう奮闘し、己を磨く日々を綴ります。 スノボの大会出場を目指し、オフトレに精を出してます!

HTML&CSSの基礎を学ぶ

スポンサーリンク

HTML&CSSをG'sの補講で学びましたので、備忘録がてらメモ。

 

HTMLとCSSの学習については、ドットインストールやスクーで入門講座を

受講し、参考書を1週したぐらい。なので、本当に触った程度でした。

周りは実務経験ある方が多そうで、危機感感じたのでこの機会にしっかり復習します。

 

講義はハンズオンで、座学をさらっとやって、実際に手を動かして

作り、それをテーブルの人と発表しあうといった形式。

 

 

HTMLで自己紹介文章を作ってみた

 

<!DOCTYPE html>

<html lang="ja">

<head>

<meta charset="UTF-8">

<title>自己紹介サイト</title>

<link rel="stylesheet" href="css/style.css" type="text/css"/>

</head>

<body>

<div class="wrapper">

<img src="../a.jpg">

<h1>名前:〜〜</h1>

<ul>

 <li>出身:〜〜</li>

 <li>趣味:〜〜</li>

 <li>志望同期</li>

<p>自分があったらいいなぁ〜と思うサービスを<br>

製作しつつ、プログラミングを学び、<br>

同じ意識の仲間を作りたいと考えました。</p>

</ul>

よくみるサイト

<a href="http://yahoo.co.jp">Yahoo</a>

<p>名前:<input type="text" name="name" id="name"></p>

<p>

<p>メールアドレス:<input type="text" name="name" id="mail"></p>

<p>

 

年齢 : 

 

<lable for="20"><input type="radio" name="age" id="20">20代</lable>

<lable for="30"><input type="radio" name="age" id="30">30代</lable>
<lable for="40"><input type="radio" name="age" id="40">40代</lable>

</p>

 

<select name="from" id="">

  <option value="講演依頼">講演依頼</option>

  <option value="飲みの誘い">飲みの誘い</option>

  <option value="運動系">運動系</option>

</select>

<p>詳細</p>

<textarea name="textbox" id="" cols="30" rows="10"></textarea>

<p>

<input type="submit" value="送信ボタンを押して下さい">

</p>

</div>

</body>

</html>

 

ポイント

 

⬛︎タグを理解する 

  → Pでくくると文章、brは改行(くくらなくてOK)など

主な例

 ・改行<br>

 ・見出し<h1></h1>

 ・文章<p></p>

 ・リンク<a href="リンク先のURL></a>

 ・画像<img src="画像のURLを書く" alt-"画像を言葉に置き換え>

 

⬛︎パスの考え方について

  →相対パスが間違えやすいので注意する

 

相対パス

 ・今あるファイルの位置を基準に目的のファイルを指定する

   内部のファイルに飛ぶ → <a href= 対象ファイル></a> 

  リンクを読み込む場合 → <link href=対象ファイル></a>

 

主な書き方 

 ・同じ階層にあるファイルを参照 → そのままファイル名

 ・フォルダの内部にあるファイルを参照 → フォルダ名+/をつけてファイル名

 ・1つ上の階層にあるファイルを参照 → ../+ファイル名

 

 ⬛︎Form

主な部品

 ・<input type="text">  → テキスト入力

 ・<input type="radio"> → ラジオボタンを作成

 ・<input type="checkbox"> → チェックボックスを作成

 ・<select>

   <option></option> → セレクトボックスを作成

  </select>

 ・<input type="submit"> → 送信ボタンを作成

 ・<textarea></textarea> → テキストエリアを作成

 

属性について

 <input type="text" name ="name" value="">

 ・value属性 → 送信される値を指定

 ・name属性 → 入力フォームパーツに名前をつける

目的

 ・プログラムに、どの値が何の意味なのか理解させる

 

CSSで装飾してみた 

@charset "UTF-8";

 

body{

  background-color:#ccc;

}

 

p{

  color:#f00;

}

 

h1{

  color:#f00;

  color:#00f;

}

 

.lable{

 color:#f00;

 font-size:24px;

 text-align: center;

}

 

#age{

 margin-bottom: 30px;

 color:#0f0;

 border:solid 2px #d90;

}

 

.box{

 margin:20px;

 padding:20px;

 border:solid 2px #000;

 background-color:#f90;

}

 

.wrapper{

 width:600px;

 margin:0 auto;

 background:#9f9;

}

.title{

 magin-bottom: 30px;

 text-align: center;

}

.list{

 -webkit-display: flex;

 -moz-display: flex;

 -ms-display: flex;

 display: flex;

}

 

.parent{

 position: relative;

 height:400px;

}

.child{

 position: absolute;

 top:0;

 right:0;

 z-index: 1000;

 background-color: #ddd;

}

 

.ads{

 position: absolute;

 bottom:0;

 left:10px;

 z-index: 100;

}

 

.fix{

 position: fixed;

 right:0;

 top:0;

 z-index: 10000;

}

 ポイント

 

⬛︎準備

 ・~.cssというファイルを作成

 ・ファイルの頭に[@charset"utf-8";]と記入

 ・HTMLファイルに<link rel="stylesheet" href="CSSの読み込み先を記載"/>

 

⬛︎重要な考え方

 ・命令したい「場所」を指定して、命令の「内容」を書く

 

⬛︎記述の基本

 ・セレクタ

  →CSSを適用したい場所のこと

 

 ・プロパティ

  →目印をつけた場所に適用したい装飾の内容

 

 h1{ ←h1がセレクタに当たる

   background-color:#f00; 

    ※background-colorがプロパティ名、#f00が変更内容

 }

 

⬛︎IDとClass

 ・ID

  →HTMLだとid=~ CSSだと#~のように表記

   HTML内で1箇所のみ使用可能

 ・Class

  →HTMLだとclass=~ CSSだと.~ のように表記

   HTML内で複数箇所使用可能、かつ同じ箇所に複数のclassを使用可能

 

div

 ・囲んだ範囲をひとまとまりとして扱う

  →まとまりを動かしたい時、divで囲むとタグ1つ1つ記述するより便利

 

⬛︎センタリング

 ・ブロック要素のセンタリング

  →width:~px; margin:0 auto;

   ※横方向のmarginをauto(自動調整) → 左右のmarginが等しくなる

 

 ・インライン要素のセンタリング

  →真ん中にしたい要素を囲むHTMLタグに対して

   text-align:centerを適用

 

⬛︎CSSの注意点

 ・優先順位に注意

  →基本的に下に書かれたものが優先される

  →id,classなどにより詳細度が決まるので、それにより原則が変わる

 ・webサイトやアプリは基本的に同じ状態が保たれないと思って作る

 

以上。特にCSSはほとんど触っていない&ほぼ分かっていないので、

しっかり学習しておこうと思います。