Js
・文章の出力
console.log("Hello world");
・コメントの書き方
//コメントでかけます。
・計算の仕方
console.log(5 + 3);
//文字列として扱われる「”これで囲まれてるとこ”」
console.log("5 + 3")
//計算
掛け算 *
割り算 /
余り %
・文字列の書き方
console.log(”私は” + "は");
・変数
var name= "John";
console.log(name);
//変数を更新することができる
name="ぼく"
・変数はわかりやすいものにしましょう。
連続するに文字は大文字で区切る
userName "N"は大文字
mainの編集
・HTML
mainの編集の仕方
<div class="copy-container">
</div>
<div class="contents">
</div>
<div class="contact-form">
</div>
・一部だけ色を変えたいとき
html
<span>文章を変えたいとこを囲む<span>
span{
color: red;
}
・コンテンツの中を編集
<div class="contents">
<h3>題名</h3>
<div class="contents-item">
<img src="URL">
<p>HTML&CSS</p>
</div>
</div>
・ボーダーの付け方
.logo{
border: 5px solid red;
}
・外側に余白を作りたい
.logo{
margin: 10px;
}
・input,textareaの作成
<form>
<p>ここに一行入ります</p>
<input type="submit" value="ココの名称に変更" >
<p>複数行入ります</p>
<textarea></textarea>
</form>
header とfooter編集まで
学んだこと
・HTML
コメントの仕方
<!--ここにコメントするのよ -->
・最初にすべき事柄
<!ここにタイプの指定 html>
<html>
<head>
</head>
<body>
ここに書きたい内容を書いていくこと
</body>
</html>
・headに関すること
<head>
<!--文字コードのお話-->
<meta charset="utf-8">
<title>タイトルを入れる</title>
<!--CSSの読み込み-->
<link rel="stylesheet" href=" stylesheet.css">
</head>
・URL添付
<a href="">意味</a>
・画像イメージ添付
<img src="">
・リストをつける
<ul>
<li></li>
<ul>
・名前の付け方
<li class="selected"></li>
・レイアウト
/*ヘッダーのレイアウト*/
<div class="header">
</div>
/*メインのレイアウト*/
<div class="main">
</div>
/*フッターのレイアウト*/
<div class="footer">
</div>
・実際のレイアウトの仕方、はじめ方
<div class="header">
<div class="header-logo">題名</div>
<div class="header-list">
<ul>
<li></li>
</ul>
</div>
</div>
<div class="footer">
<div class=""footer-logo>題名</div>
<div class="footer-list">
<ul>
<ui></ui>
</ul>
</div>
</div>
・CSS
・stylesheetに書くこと（ｈｔｍｌとは別物）
h1{
/*ここにメモが書けます*/
/*色を変えられます*/
color :#ff0000;
/*文字の形、大きさを変えられます*/
font-family: serif;
font-size: 10px;
/*背景を変えられます*/
backgroundcolor: #ddd;
/*横縦の変更*/
width: 10px;
height: 10px;
}
・リストに装飾をつけるときは事前にHTMLのほうで名前を付ける
classに言及するときは”.”最初のが肝心
.指定したクラス名{
color: red;
}
リストの黒点なくす
/*最初にクラスを指定するとその中だけで行ってくれる*/
. header-list li{
list-style : none;
/*横並びにする*/
float :left;
}
・余白の管理
html
<div class="logo1">
Progate
</div>
.logo1{
padding: 20px;
}
