HTML&CSS備忘録
勉強しながらメモしたことをそのまま記述しています。
・見出しのつけ方
<h1>一番大きい</h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6>一番小さい</h6>
・段落のつけ方
<p></p>
これがないと改行されない
・コメントのつけかた
<!--コメント-->
・リンクの貼り方
<a href="url">リンク</a>
検索用:<a>
・画像の貼り方
<img src="https://prog-8.com/images/html/beginner/wanko.jpg">
・黒点のリストの組み方
<ul>
<li>HTML</li>
<li>PHP</li>
<li>Ruby</li>
</ul>
・数字のリストの組み方
<ol>
<li>HTML</li>
<li>PHP</li>
<li>Ruby</li>
</ol>
・CSSの各種呼び方
↓セレクタ
h1{
color: red;
} ↑プロパティ
・CSSのプロパティの末尾にはコロンをつける
・CSSの行末にはセミコロンをつける
・セレクタがクラスを指定した場合クラス名の先頭にドット「.」をつける
・CSSのコメント
/* CSSのコメント */
・CSSの色のプロパティ
color: #FFFFFF ;
・CSSの文字サイズのプロパティ
font-size: 10px;
・CSSの文字の種類のプロパティ
明朝体
font-family: serif;
font-family: YuMincho;
ゴシック体
font-family: sans-serif;
font-family: "Lucida Grande";
わからん
font-family: "Avenir Next";
・CSSの背景色の変え方
background-color: #ffffff ;
background-color: #fff ;
・CSSの横幅と高さを変更
width: 500px;
height: 80px;
・HTMLでクラスをつけるには
要素内で<li class="hogehoge">hoge</li>
・CSSでクラスを指定するには
.hogehoge{
color: red;
}
・CSSでクラスを指定しつつ要素を指定するには
.hogehoge li{
color: red;
}
・HTMLの全体構造
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>タイトル</title>
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<h1>Progateとは</h1>
<p>オンラインプログラミング学習サービスです</p>
</body>
</html>
※ブラウザに表示されるのはbodyの内容のみ
・HTMLのhead要素にはWebページの設定に関する情報を記述する
・HTMLで<div></div>を使用する理由
レイアウトを分割して要素をグループ化するため
・HTMLのdivの使い方
<div class="hoge">
</div>
・HTMLのli要素のマークをCSSで消す方法
li{
list-style: none;
}
・HTMLで記述した要素は基本的に縦に並んでいく
・HTMLで記述した要素が縦並びになってしまった場合にCSSで横並びにする方法
li{
float: left;
}
li{
float: right;
}
・直観的でないが、HTMLで記述した要素の最後から2番目のfloatをleftにすると3つ目が右に並ぶ
・floatによる最後の要素の回り込みを解除する方法
clear: left;
・CSSで要素に余白を一括で設定する場合
padding: 20px;(上下左右共通)
・CSSで要素に余白を個別に設定する場合
padding-top: 20px;(上指定)
padding-bottom: 20px;(下指定)
padding-left: 20px;(左指定)
padding-right: 20px;(右指定)
・CSSで1行で上右下左の空白を作る場合
padding: 20px 10px 20px 10px;(上から時計回り)
・CSSで1行で上下共通、左右共通の空白を作る場合
padding: 20px 10px;(上下共通,左右共通)
・文中の一部にCSSを適用させたい場合
<span>hoge</span>
・ブロック要素は改行される
<h1><p>
・インライン要素は改行されない
<span><a><meta>
・CSSでボーダーをつける方法
.logo1{
border: 5px solid red;
}
・CSSで指定した方向にボーダーをつける方法
.logo2{
border-top: 5px solid red;
border-bottom: 5px solid red;
border-right: 5px solid red;
border-left: 5px solid red;
}
・borderいろいろ
http://www.htmq.com/style/border-style.shtmlにいろいろある
p.sample1 {border-style: none;}
p.sample2 {border-style: hidden;}
p.sample3 {border-style: solid;}
p.sample4 {border-style: double;}
p.sample5 {border-style: groove;}
p.sample6 {border-style: ridge;}
p.sample7 {border-style: inset;}
p.sample8 {border-style: outset;}
p.sample9 {border-style: dashed;}
p.sample10 {border-style: dotted;}
p.sample11 {border-style: solid double;}
p.sample12 {border-style: solid double groove;}
p.sample13 {border-style: solid double groove ridge;}
・classは要素につけることができる
・marginとpaddingの違い
paddingは内側の余白
marginは外側の余白
・borderの外側に余白を作る方法
marginを使用する
・ボックスモデルとは
線を表すborder、その内側の余白を表すpadding、外側を表すmarginがある。
・marginの設定はpaddingと同じ
・1行のお問い合わせフォームのレイアウト作成方法
<form>
<input>(終了タグは不要)
</form>
・複数行のお問い合わせフォームのレイアウト作成方法
<form>
<textarea></textarea>
</form>
・送信ボタンを追加する方法
<input type="submit">
・送信ボタンのテキストを保存に変える方法
<input type="submit" value="保存">
・複数のセレクタに同じCSSを指定する方法
h1, p{
color: red;
}
・文字の色を変える場合
font-colorというものはない。colorを使用すること。
・特殊なタグ
ヘッダーとフッターのためのタグは非常によく使われるため、divの代わりに
<header></header>と<footer></footer>がよくつかわれる。
・CSSでdivに背景画像を設定する
div{
background-image: url(top.png);
}
・CSSでdivに背景画像を設定すると繰り返し表示されるので拡縮で1枚になってほしい
div{
background-image: url(top.png);
background-size: cover;
}
・boxを中央寄せにする方法
width: 300px;
margin: 0 auto;
・文字を透明にする方法
opacity: 0.5;
・文字間隔を広げる方法
letter-spacing
・インライン要素の注意
widthやheightは指定できない
上下のmarginは指定できない
・インラインブロック要素
・インライン要素、ブロック要素、インラインブロック要素を変更する方法
display: block;(ブロック要素)
display: inline-block;(インラインブロック要素)
display: inline;(インライン要素)
・複数クラスを指定する方法
HTMLでクラスにスペースを入れてクラス名を分割する
CSSで共通の文字列を使ってCSSを作る
CSSで個別の文字列を使ってCSSを作る
div class="btn blue"
div class="btn red"
.btn{}
.blue{}
.red{}
みたいな感じ
・カーソルを乗せたら色を変える方法
セレクタ: hover{
}
・ボタンを丸角にする方法
border-radius: 10px;
・テキストを中央に寄せる方法
text-align: left;
text-align: center;
text-align: right;
・margin: 0 autoとtext-align: centerの違い
マージンはブロックごと、テキストアラインはブロック内で
・有名なアイコンを表示する場合
Font Awesomeを利用する
https://fontawesome.com
Font Awesomeは、以下の手順で使用することができます。
①Font AwesomeのCSSファイルをHTMLの<head>で読み込む
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
②利用する箇所で、<span>タグにfaクラスとfa-アイコン名クラスを指定する
（Font Awesomeのサイトにアイコンごとのクラス名が載っています。）
これだけで簡単にアイコンを表示させることができます。
・背景色を透明化する方法
background-color: rgba(255,255,255,0.5);
・opacityとrgbaの違い
opacityはすべて透明化する
rgbaは背景色のみ透明化する
・header,footerについて
こいつらクラスじゃないからCSSで.つけちゃダメ
・アニメーション付きで背景色を変更する方法
transition: all 1s;
allは変化の対象プロパティ(allなら全部)、1sは変化の時間
・行間を指定する方法
line-height: 10px;
・行の中央に文字を配置する方法
heightとline-heightを同じ値にする
・<a>タグのクリックできる範囲を広げる方法
aタグをブロック要素にする
・文字の太さを指定するには
font-weight: normal;(普通)
font-weight: bold;(太くする)
ちなみにh1～h6は初期状態でboldになっている。
・大枠組みの名前
wrapper上包み
・中枠組みの名前
container容器
・相対的な大きさの指定
widthやheightを%で指定すると親要素に対してどのくらいの幅や高さを持つかを指定することができる
・要素を重ねるには(imgとpの場合)
position: absolute;
・positionあれこれ
static
初期値
relative
相対位置
absolute
絶対位置
fixed
固定したまま絶対位置
・CSS 影をつける
box-shadow: 10px 10px #000000 ;
・マウスカーソルを変更する
cursor: text;
cursor: pointer;
cursor: default;
・マウスが推している間だけcssを適用
セレクタ:active{
}
・none
なにもなし。多くの場合プロパティにnoneを指定すると消える
・影の消し方
box-shadow: none;
・マウスのボタンを押している間だけ位置をずらす方法
セレクタ:active{
position: relative;
top: 6px;
left: 10px;
}
・レスポンシブデザインとは
様々なデバイスや画面サイズに合わせてコンテンツのレイアウトを調整する
・メディアクエリとは
ブラウザの画面サイズに応じてCSSのスタイルを設定できる手法
Media Queries
Queries 問い合わせ
・CSSでメディアクエリを書く方法
@media(条件){...}
たとえば…
h1{
color: red;
}
@media(条件){
h1{
color: blue;
}
}
・メディアクエリの条件に設定できるもの
max-width: 1000px
min-width: 1000px
・ブレイクポイント
スマホ～670px
タブレット～1000px
PC1001px～
とかのような区切り
これは想定の値
・paddingを使うとレイアウトが崩れる
box-sizing: border-box;
これを使用する
ただし、marginは含まない。
・box-sizingのデフォルト値
content-box
・content-boxとborder-boxの違い
content-boxのときの幅=width+padding+border
border-boxのときの幅=width(%)
・全要素にCSSを適用する
*{
box-sizing: border-box;
}
・viewportの設定
headタグにviewportを設定
<meta name="viewport" content="width=device-width,initial-scale=1.0">
・floatの性質
子をすべてfloat: left;にすると親の高さが0になる
・子がすべてfloatでも子要素を包む高さにする方法
clear:float;
・jQueryでやれること
右上のメニューアイコンとかつけたあとの動きつけれる
・要素を表示：非表示にする方法
display: none;
display: block;
・FlexBoxとは
floatで作っていた横並びをもっと簡単に作れるようになる
・子要素を横並びにする方法
display: flex;
・指定した要素の幅を親要素に合わせて伸縮させる
flex:auto;
・子要素のサイズに応じて折り返す方法
親でflex-wrap: wrap;
子でwidth:50%とか
・子要素を上から下へ並べる方法
親にflex-direction: column;
この記事が気に入ったらサポートをしてみませんか？