はこねのはこ

はこねさんの備忘録

HTML_CSSで使ったタグを追記していく

はじめに

HTMLわからん状態なので、調べて使用した機能を追記していきます。
自分用のメモを作ってみたい。

見出し

<h1>見出し1</h1>
<h2>見出し1</h2>
...
<h6>見出し1</h6>

見出し6まで使えるみたい。

段落

<p>自動で改行されます</p>

改行

<br>行できました


行できました

グループ化

<div>
このグループは
同じグループです。
</div>

id属性

要素に対してID(固有の識別名)を付けることができる。
同じ文章内には一つのみ存在できる。
大文字小文字を区別する。

id='name'

class属性

要素に対してクラス名(分類名)を付けることができる。

class='name'

CSS適応

idに対してCSS適用

CSSで#ID名とする。

<h1 id='title'>ラーメンが食べたい!!</h1>
#title{
  color:#116ecf;
}

classに対してCSS適用

CSSで.クラス名とする。

<div class="parent">
    ブロック要素
</div>
.parent{
    color:#116ecf;
}

センタリング

<div style="text-align:center">センターに表示されるよ</div>
センターに表示されるよ

表を作る

tableはテーブルは表を作成するタグ。
tr:縦方向
td:横方向

<table>
  <tr>
    <td>日付</td>
    <td>名前</td>
    <td>タスク</td>
    <td>補足</td>
    <td>完了日</td>
  </tr>
  <tr>
    <td>18/10/15 19:14</td>
    <td>YYY</td>
    <td>コーディング</td>
    <td>-</td>
    <td>未完了</td>
  </tr>
</table>
table {
    border-collapse: collapse;
}
td {
    border: solid 1px;
    padding: 0.5em;
}
日付 名前 タスク 補足 完了日
18/10/15 19:14 YYY コーディング - 未完了

リンク

<a href='https://hakonebox.hatenablog.com/'>はこねのはこ</a>

はこねのはこ

背景色を変える

body {
  background-color:#39C;
}

太文字にする

.ex1{
  font-weight: bold;
}
.ex2{
 /* 100-900で設定 */
  font-weight: 900 ;
}
.ex2{
/* 親要素の文字の太さに対して、1段階太く 
 * 逆の場合はlighter
 */
  font-weight: bolder;
}

フォントの種類を変更

.font{
  font-family: 'arial black';
}

さいごに

調べるたびに増やして行こうと思います。