HTMLについて

ブロック要素、インライン要素、インラインブロック要素

ブロック要素
タグ 用途
h1-6見出し
p段落・文章
ul順序なしリスト
ol順序ありリスト
dl定義リスト
formフォーム
hr区切り線
table
div構造
インライン要素
タグ 用途
aアンカー
span文字修飾
em強調(弱い)
string強調(強い)
インラインブロック要素
タグ 用途
img画像読み込み
input単一行テキスト入力
textarea複数行入力テキスト
selectプルダウンメニュー

メモ的にHTML非推奨タグを記述


非推奨タグ 代替えCSS 効果
center text-align:center; 水平センタリング 
font font-size、color フォントサイズ、色指定
s、strike text-decoration: line-throught; 打ち消し線
u text-decoration: underline; 下線

非推奨属性の代替手段

非推奨属性 代替えCSS 効果
color属性 color フォント色指定
bgcolor属性 background-color 背景色指定
align属性 float ブロックの要素を整列
clear属性 clear align(float)の解除
nowrap属性 white-space: nowrap; 要素内での改行禁止



連続した情報を表現する
順序なしリスト ul ナビゲーションなど
順序ありリスト ol パンくずリストなど
定義リスト dl

TD(title/description)構造を表現する
ページ内容に対して関わりが大きいTD構造はh1-h6を使う
小さなブロックの場合、dl、dt。ddを使う
表形式はtableを使う

文章ブロック(段落)p
文章のひとかたまり=段落

構造のグルーピング
divを正しく使うには
- 連続性のあるリスト構造ではない
- 見出し構造ではない
- 段落構造ではない
- 表構造ではない


HTMLコーディングフロー
  1. 情報構造の骨組み
    • ツリー構造の検討
    • 適切なタグの利用について検討
  2. 構造の調整
    • CSSレイアウトを考慮し、隙間なく四角形のブロックで埋めるように構造を調整
  3. デザインの肉付け
    • CSSでのレイアウト
    • 装飾
    • 画像の配置
    • 読み込み

0 件のコメント:

コメントを投稿

.mitmproxyを使ってHTTPSの通信を確認

公式のドキュメント https://docs.mitmproxy.org/stable/ # install ## mac ``` $ brew install mitmproxy ``` ## iPhone ### 証明書 セキュアな通信を傍受するために、プロファイ...