忍者ブログ

からすまる日誌

20191030_pm02 べたうちテキストからのマークアップ(2)

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

20191030_pm02 べたうちテキストからのマークアップ(2)

(続き)
  
<ul>の子供は<li>ですよというルールがある。
だから<a>は<li>の中でマークアップする。
 
<h1>にしても入れ子になるように。
 
<h1><a>Healthem アナタの健康サポート</a></h1>
 
トップページでロゴを押したら自分自身に飛ぶようにしたい
→<a href="index.html">
 
HOMEも同様に設定する。
 

まだないページについてはダミーリンクを設定する。
⭐<a href="#">ABOUT</a>
 
これでヘッダー部分はおしまい。
 
❤ロゴがあって、
ロゴに<h1><a>があって、
 
❤ナビがあって、
<nav><ul><li><a>
みたいな。
あとは見た目の問題なのでCSSが担当しますよ。
  

次、<main>のマークアップ
 
ただ単にグループにしたい時だけの時は<div>を使うといい。
あとから<div>ごとに装飾することがまあわかっているなら、この時点でidかclassを付けておく。
 
<div class="main_visual">
 
こうすると後々divごとに装飾がつけられて扱いやすい。
  

2つ以上の単語をclass名とかにするときのやり方は3種類ぐらいあるよ。
  
⭐main_visual スネーク・シンタックス
⭐main-visual チェイン・シンタックス
⭐mainVisual キャメル・シンタックス
 
どれでもいいが、半角スペースで区切ると別の意味になるのでそれはやめよう。 
 

次に大事そうな見出しを<h2>で囲う。
その次のちまいのは<p>で囲う。
改行があったら<br>
  
ただしWEBサイトでは横幅がどれだけになるかわからないから、基本的には改行は制御しない。
どうしてもするときだけは<br>というタグを入れる。
なお<br>は2回連続いれてはいけない。行開けとか余白のためには<br>は使ってはいけない。それはCSSの仕事になる。
 
<br>はおしりでも冒頭につけてもいい。
  
画像の上にのっているテキストについて:
どうしてもWEBででないフォントで表現したいとかいう場合には、テキストが入っている画像という形でもつが、
ふつう、テキストはテキストで(文字の一部にリンクをもたせたいとかいろいろできるから)もっている。
状況とデザインにもよる。
 
次の<p>は<p class="description">
ディスクリプション(description)(要約)とかにしてもいい。いまはしないけど。
PR

コメント

ブログ内検索

カレンダー

04 2025/05 06
S M T W T F S
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31