HTML/CSS　基礎＋メソッド集*不定期更新(20年3月9日更新）

HTML/CSSのメソッドに関して、まとめていきます。
*新しいメソッドを学習次第、追記・更新していきます。

#HTML
HTMLで定義されている要素のうち、<body>～</body>の中で使用される要素の多くは、 ブロックレベル要素（Block-Level Elements）か、インライン要素（Inline Elements）に分類されます。 
##ブロックレベル要素（Block-Level Elements）
ブロックレベル要素は、見出し・段落・表など、文書を構成する基本となる要素で、一つのブロック（かたまり）として認識されます。 
ブラウザでの表示も一つのかたまりとして扱われることが多く、一般的なブラウザでは前後に改行が入ります。

```:ブロックレベル要素例
<address>、<blockquote>、<center>、<div>、<dl>、<fieldset>、<form>、<h1>-<h6>、
<hr>、<noframes>、<noscript>、<ol>、<p>、<pre>、<table>、<ul>
```

##インライン要素（Inline Elements）
インライン要素は、主にブロックレベル要素の内容として用いられる要素で、文章の一部として扱われます。 
例えば、<p>要素の中の<strong>要素のように、段落のなかの一部を強調するような使われ方をする要素です。
一般的なブラウザでは前後に改行が入らず、文章の一部として表示されます。

```:インライン要素例
<a>、<abbr>、<acronym>、<b>、<basefont>、<bdo>、<big>、<br>、<cite>、<code>、<dfn>、
<em>、<font>、<i>、<img>、<input>、<kbd>、<label>、<q>、
、<samp>、<select>、
<small>、<span>、<strike>、<strong>、<sub>、<sup>、<textarea>、<tt>、<u>、<var>
```

###配置ルール
ブロックレベル要素の中には、他のブロックレベル要素やインライン要素を配置することができます。 
一方、インライン要素の中には、文字データや他のインライン要素を配置することができますが、 インライン要素の中にブロックレベル要素を配置することはできません。

##Classセレクタとidセレクタ
###classセレクタ
class属性によって特定のclass名がつけられた要素を対象にスタイルを適用するセレクタ。
class属性はid属性とは異なり、1つの文書内で同じｃlass名を重複して指定することができます。
classセレクタを使用することで、文書内の複数箇所や異なる要素に対して同じスタイルを適用することができます。

###idセレクタ
idセレクタは、id属性によって特定のid名がつけられた要素を対象にスタイルを適用するセレクタです。
1つの文書内では同じid名を重複して指定することはできません。idセレクタを使用することで、文書内の場所を一意に特定してスタイルを適用することができます。

##リセットCss
ブラウザがもともと持っているCSSを打ち消すためのファイル。
利用することで異なるブラウザでも同じ見え方になるようスタイリングができる。
複数ございますので、下記URLなどからご自身にあったリセットCssを使用ください。
https://web-camp.io/magazine/archives/30817

##webフォント
webサーバー上で提供されているフォントファイルのこと。
どの端末からアクセスしたときでも、同じフォントを表示させることができる。


#メソッド集（HTML)
##見出し：
```html
<h></h>
```
複数の見出しをつけるときは、h1 h2 h3とする。
*番号ごとに文字の大きさは小さくなる。文字サイズ 1＞2＞3＞

##段落（見出し以外の文）
```html
<p></p>
```

##リンク
```html
<a>XXX</a>
```
*urlなどをつけるとき

```html
<a href="URL">XXX</a>
```

##画像添付
```html
 <image src="URL">
```
*閉じタグは必要ありません。

##リスト
親要素 ul 子要素 li

```html
<ul>
 <li></li>
 <li></li>
</ul>
```
*CSS上、list-styleプロパティを使用することで、子要素の先頭に表示するマーカー文字を指定できる。
ex)list-style: none;　→子要素の先頭には何も表示しない

##入力フォーム
1行 input 複数行 textarea

```html
<input>

<textarea></textarea>
```
*inputは閉じタグは必要ありません。


#メソッド集（CSS)
##背景画像
background-imageプロパティ

```css
background-image: url(画像のURL);
background-size:cover;
```
*background-imageで指定された背景画像は表示範囲を埋め尽くすまで、繰り返し表示します。
→background-size:cover;を追記すると、1枚の画像で表示範囲を埋め尽くすようサイズが拡大縮小します。

##クラスの中央配置：
marginの左右にautoを指定します。

```css
margin:0 auto;
```
*marginにautoを指定するときは、必ずwidthを併せて指定します。
*上下のmarginにautoを指定することはできません。

##透過
```css
opacity:0.5;
```
０→１/透明→不透明

##文字間隔の調整：
```css
letter-spacing: 1px;
```

##ブロック要素/インラインブロック要素/インライン要素
特徴と設定方法

- ブロック要素（＜div＞等） 
  width/height:指定可　margin/padding:指定可　配置：縦並
- インラインブロック要素　
  width/height:指定可　margin/padding:指定可　配置：横並
- インライン要素（＜a＞等）　
  width/height:指定不可　margin/padding:左右のみ指定可　配置：横並

設定方法：displayプロパティを使用する。

```css
display:block;
display:inline-block;
display:inline;
```

##カーソルが乗った時に変化を加える
セレクタ:hoverを使用することで、カーソルが乗ったときのCSSを指定することができます。

```css
クラス名:hover{
```
*カーソルが乗ったときの状態をhoverと言います。

##変化を加える対象と時間の設定：
transitionを使用します。

```css
transition: all(変化対象） 1s(変化時間）;
```
*「変化対象」にはcolorなどのプロパティを指定しますが、allを指定すると全プロパティに適用出来ます。
*transitionは多くの場合、hoverと組み合わせて使います。
 
##クリックされた時だけ変化を加える：
セレクタ：activeを使用します。

```css
a:active {
  background-color: yellow;
}
```
要素がクリックされている間だけCSSを適用することができます。　

##クラス（要素）の角を丸める
```css
border-radius:10px;
```
*数字が大きいほど角が丸くなります。

##テキストなどの配置指定
```css
text-align: center;
```
*leftで左寄せ、centerで中央揃え、rightで右寄せに設定可能
*インライン要素やインラインブロック要素の配置を指定
 (ブロック要素は上記のmarginを使用して調整）

##コンテナ内全体の揃え位置
```css
align-content:縦方向の揃え位置を指定
justify-content:横方向の揃え位置指定
place-content:縦方向と横方向の揃え位置をまとめて指定
```

##行間の指定：
```css
line-height:10px;
```
*値が大きいほど行間が大きくなります。

line-heightプロパティは、要素内、縦方向中央に文字を配置するのにも使えます。
line-heightプロパティの「高さの中心」に文字が配置されるため、
要素の高さとline-heightを同じ値にすると、文字がちょうど中央に配置されるようになります。

```css
line-height:10px;
width:40px; 
```
→要素の中央位置に文字列が配置される。

##文字の太さ調整
```css
font-weight:bold:
```
normal＝通常　bold＝太い

##画面上に要素を固定
```css 
position: fixed;
```

##要素の重なり順序指定
```css
position: absolute;
z-index:1;
```
z-indexは整数値で指定し、値が大きいほど上に表示されます。
*z-indexプロパティは必ずpositionプロパティと併用する必要があります。

##スクロール機能
ブロックなどに使用することで、そのブロック内にメッセージなどが追加された際に、
下にスクロールできるようにします。

```css
overflow: scroll;
```

##レイアウト機能（flexbox)
flexboxと言う機能を使用することで、項目の横並び化やサイズの設定をできます。

###指定した要素の子要素を横並びにする
横並びにしたい要素の親要素にdisplay: flexを指定します。

```css
display: flex;
```

###指定した要素の幅を親要素に合わせて伸縮する
親要素の幅に合わせて伸ばしたい要素にflex: autoを指定します。

```css
flex:auto;
```
###子要素のサイズに応じて折り返す
折り返したい要素の親要素にflex-wrap: wrapを指定します。
折り返したい要素自身には列数に応じたwidthを指定します。

```css
#親要素
flex-wrap:wrap;

#子要素
width:50%;
```

###子要素を上から下へ並べる
縦に並べたい要素の親要素にflex-direction: columnを指定します。

```css
flex-direction:column;
```
*ブロック要素の中央寄せ(margin: 0 autoとwidthを指定)することで中央寄せにできます。

###ボックス内の子要素の横方向の配置を指定する

```css
box-pack:XXX;
```
*上記XXXの部分には下記のいづれかを入力ください。

- start（初期値）
標準方向のボックスでは、最初の子の左端がボックスの左側に揃えられる。
余ったスペースはすべて最後の子の後に配置される。 

- end
標準方向のボックスでは、最後の子の右端がボックスの右側に揃えられる。
余ったスペースはすべて最初の子の前に配置される。

- center
余ったスペースは子の前後に均等に分割され、ボックス内の子要素はセンタリングされる。

- justify
余ったスペースは各子の間に均等に分割され、最初の子の前と最後の子の後にはスペースは配置されない。 子が1つしか存在しない場合には、startと同じ表示となる。

##コンテナ内全体の主軸方向（初期値では横方向）の揃え位置を指定する
justify-contentプロパティは、コンテナ内全体の主軸方向（初期値では横方向）の揃え位置を指定する際に使用します。

```css
justify-content:XXX;
```
*上記XXXの部分には下記のいづれかを入力ください。
- flex-start（初期値）
行頭寄せ、通常は左揃え

- flex-end
行末寄せ、通常は右揃え

- center
センター揃え

- space-between
アイテムの間にスペースを均等に割り付け

- space-around
アイテムの両端にスペースを均等に割り付け

##link_toなどで生成されるアンダーバーの非表示
link_toなどで自動生成されるアンダーバーに関しては、text-decorationで非表示にできます。
*link_toにクラスを付与してから、cssにて以下の記述をお願いします。

```css
　text-decoration: none;　
```

#背景画像の設定
ページの背景画像を取り込みたい時は以下のように記述します。

```:css
#画像はassets/images配下に入れてます。
background-image: image-url("hogehoge.png");
```
railsのアセットパイプラインの仕様上、image-url("hogehoge.png")と記述することで、url(/assets/hogehoge.png)に変換されます。
この記法以外で記述をすると本番環境でエラーとなる可能性ございますので、注意ください。
https://railsguides.jp/asset_pipeline.html



#その他（メモ）
##-webkit-とは？
webkitの記述は、ベンダープレフィックスと呼ばれCSS3で実装予定の機能を各ブラウザが先行して実装した機能を各ブラウザで使えるようにしたものです。
以下がブラウザ毎の記載方法です。（上記-webkit-はchromeとsafari向けとなります。）
-o-・・・・opera
-ms-・・・IE(Microsoft)
-moz-・・firefox(mozilla社)
-webkit-・Chrome, Safari

#参照
HTMLクイックリファレンス
http://www.htmq.com/


また何か見つけたら、追記していきます。

以上となります。最後までご覧いただき、ありがとうございました！
今後も学習した事項に関してQiitaに投稿していきますので、よろしくお願いします！
記述に何か誤りなどございましたら、お手数ですが、ご連絡いただけますと幸いです。