基本的なHTMLとCSS
HTML基本構造
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>テキスト</title>
<meta name="description" content="テキスト">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css" type="text/css">
<head>
css
＠charset "UTF‐8";
●テキスト
タグ 用途
head ページ設定情報を記入
body ページのコンテンツを記入
title ページタイトル
p 段落
b 文字を太く
i 文字を斜め
u 下線を引く
h1 見出し 題名
s 取り消し線 正解関係なくなった
del 取り消し線 削除訂正された
em 強調文字
strong 意味を強調
small 文字を小さく
ruby ルビ
rp
rt
hr 水平線 区切り 終了タグ不要
br 改行
●引用・転載
blockquote 転載
dl
dt 説明したい言葉
dd 説明文
dl
ul 配置順に意味を持たないリスト
ol 配置順に意味を持つリスト項目
li リストアイテムを意味する
div ブロックレベル要素としてグループ化
幅や位置、余白などの指定が柔軟に出来る ブロック要素
span 幅や位置、余白などの指定に多少制限がある
テキストの装飾を中心とした使い方が多い インライン要素
●表
table 表を示す
tr 横 行を示す
th 見出しを定義する項目
td 見出しデータを定義する項目
●リンク
a URL
a href="サンプルURL">サンプルサイト/a
img 画像
img src=”（URL/保管場所/画像）”alt=”画像名前”
width 横幅
height 高さ
***
●文字に関するスタイル
font-size 文字の大きさ(フォントサイズ)
color 文字の色
font-weight 文字の太さ p style
font-family 文字の字体 h1 style
text-decoration テキストの装飾 span style
●枠線に関するスタイル h1 style
border 枠線
border-(※各辺) 枠線の各辺 (上top/下bottom/右right/左left)
border-radius 枠の丸さ
●背景に関するスタイル
background-color:#ccd4dd; 背景の色
background-image url(./image/.jpg); 背景の画像
background-repeat:no-repeat; 背景の画像の繰り返し
background-position:center 背景画像の表示開始位置
background-attachment fixed; 背景画像の固定・移動
background-size cover; 背景画像のサイズ
背景全般
●横幅と高さに関するスタイル
width 横幅 height 高さ
●余白に関するスタイル
margin 外部余白
margin-(※各辺) 外部余白の各辺(上top/下bottom/右right/左left)
padding 内部余白
padding-(※各辺) 内部余白の各辺(上top/下bottom/右right/左left)
●ボックスサイズの算出方法を指定
box-sizing
枠線(border)や内部余白(padding)の大きさをwidthやheightに含めるか
●テキストに関するスタイル
text-align 水平方向の位置
line-height 行の高さ
●表示に関するスタイル
display 表示
float
●位置に関するスタイル
position 位置
top 上からの位置
bottom 下からの位置
left 左からの位置
right 右からの位置
z-index 重なりの順序指定
●横並び(浮動)に関するスタイル
float 横並び(浮動)
clear 横並び(浮動)の解除
●影に関するスタイル
box-shadow ボックスの影
text-shadow テキストの影
Author And Source
この問題について(基本的なHTMLとCSS), 我々は、より多くの情報をここで見つけました https://qiita.com/masaki1117/items/df55536fc9eeddad09ad著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .