Progateは月額980円(税込み)でプログラミングを学べるサービス (無料会員でも一部サービスを利用できる。)
Progate レッスン一覧
HTML
- タグ：<>で囲まれたもの
見出し
<!-- h1 ~ h6 -->
<h1>これは見出しです</h1>
段落
<p>これは段落です</p>
リンク
<!-- href属性にURLを張る -->
<a herf="https://...">ここにアクセスして下さい</a>
リスト
<!-- <ol>:数字, <ul>:黒点 -->
<ol>
<li>HTML&CSS
<li>Python
<li>JavaScript
<ol>
画像
<!-- src属性に画像のURLを張る -->
<img src="https:...">
部分指定
<span>ここ</span>が要点です
クラス付け
<div class="selected"></div>
<!-- クラスを複数つけることも可能(半角スペース) -->
<div class="selected1 selected2"></div>
入力
<!-- 一行入力 -->
<input>
<!-- 複数行入力 -->
<textarea></textarea>
<!-- ボタン* -->
<input type="submit" value="保存">
Font Awesome
<head>
<!-- Font AwesomenoのCSSファイルを読み込む -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
</head>
<body>
<!-- <span>タグでクラスに"fa"と"fa-"を指定する -->
<span class="fa fa-facebook"></span>
<span class="fa fa-twitter"></span>
</body>
HTMLの全体構造
<!DOCTYPE html>
<html>
<!-- webページの設定 -->
<head>
<meta charaset="utf-8">
<!-- スマホ・タブレットでメディアクエリを適応する場合headerに以下を書き込む -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>トロッコ問題</title>
<link rel="stylesheet" href="stylesheet.css">
</head>
<!-- 表示内容 -->
<body>
<header>
<h1>トロッコ問題</h1>
<p>問題：...</p>
</header>
<div class="main">
<p>あなたはレバーを引きますか？</p>
<li>
<ul>引く
<ul>引かない
<li>
</div>
<footer>
<p>...</p>
</footer>
</body>
</html>
CSS
- セレクタ：指定対象
- プロパティ：変更項目
セレクタの種類
* /*全体*/
body /*bodyセレクタ*/
h1, p, a, li /*その他セレクタ*/
.selected1, .selected2{ /*class付きセレクタ*/
}
セレクタの状態
/*要素の上にカーソルをのせた時*/
div:hover{
}
/*要素がクリックされている時*/
div:active{
}
/*transitionプロパティでアニメーションをつける*/
div{
transition: all(変化させるプロパティ) 1s(変化の時間);
}
div:hover{
background-color: red;
}
文字
/*色*/
color: red;
color: #ff0000;
/*透過(0.0 ~ 1.0)*/
opacity: 0.5;
/*フォント*/
font-family: serif(明朝体) sans-serief(ゴシック体);
/*文字同士の間隔*/
letter-spacing: 2px;
/*スタイル*/
font-weight: normal; /*bold*/
大きさ
/*横幅, 高さ*/
width: 500px;
height: 80px; /*行間指定なし*/
/*縦方向の中央に配置*/
line-height: 65px; /*行間指定あり*/
/*拡大, 縮小(%表記)*/
width: 50%;
/*画面幅の制限*/
max-width: 1170px;
width: 100%;
背景
/*色*/
background-color: #dddddd;
background-color: rgb(84, 190, 238);
/*透過*/
background-color: rgba(84, 190, 238, 0.5);
/*画像*/
background-image: url(lenna.png)
/*画像を表示範囲いっぱい埋めつくす*/
background-size: cover;
ボーダー
/*枠線*/
border: 5px solid red;
/*下線*/
border-bottom: 1px solid #333;
/*ボーダーの角を丸くする, 半径を指定*/
border-radius: 10px;
余白
- padding：ボーダーの内側の余白
- margin：ボーダーの外側の余白
/*内側*/
padding: 10px(all);
padding: 20px(top, bottom) 40px(right, left);
/*外側*/
margin: 20px(top) 40px(right) 10px(bottom) 30px(left);
配置
li{
/*リストのマークをなくす*/
list-style: none;
/*ブロック要素を左(右)から順に横並びにする*/
float: left; /*right*/
}
/*floatプロパティを解除*/
.clear{
clear: left; /*right*/
}
/*中央寄せ*/
margin: auto 0; /*ブロック要素*/
text-align: center; /*インライン, インラインブロック要素*/
ブロック要素(<div>タグ) |
インラインブロック要素 | インライン要素(<a>タグ) |
|
|---|---|---|---|
| width, height | 指定可 | 指定可 | 指定不可 |
| margin, padding | 指定可 | 指定可 | 左右のみ指定可 |
| 配置 | 縦並び | 横並び | 横並び |
/*displayプロパティで変更*/
display: block; /*inline-block, inline*/
/*非表示*/
display: none;
親子関係
.child{
position: absolute; /*サイトの左上を基準*/
top: 20px;
left: 15px;
}
.child{
position: absolute; /*parentセレクタの左上を基準*/
top: 20px;
left: 15px;
}
.parent{
position: relative;
}
影
box-shadow: 10px(水平方向) 10px(垂直方向) #000000;
/*影を消す*/
box-shadow: none;
カーソル
cursor: text; /*pointer, default*/
固定
.fixed-img{
position: fixed;
top: 10px;
left: 40px;
}
重なりの順序
/*値が大きいほど上に表示*/
z-index: 10;
メディアクエリ
@media(max-width: 1000px){
h1{
color: red;
}
}
レイアウト管理
/*border-boxにすることで、要素の幅を width + border + padding に*/
*{
box-sizing: border-box;
}
記事の制作者：
https://twitter.com/amber_seia