FEVDES BLOG

自分の経験をシェアしたい。Webデザインのテクニック&効率化。

初心者がコーディングのときに失敗しがちなこと

      2013/09/01

a0001_016474

何人も新人のウェブデザイナーをみてきましたが、
みんな大体同じところでつまづくようです。
そして自分もそうだったなぁと思うところでもあります。

知っていればすぐに終わりますが、
知らなければ(もしくは、調べることをしなければ)ずっとわからないまま。

「知っておけば楽になるのに!」と思ったことをピックアップしてみました。

SPONSORED LINK
 

「<」「>」「"」「&」「ノーブレークスペース」は実体参照を使う

a0003_001808

時々、スペースキーを何度も叩いて半角スペースを挿入し、
「スペースが表示されません」と聞いてくる人がいます。
そんな場合には「&nbsp;」を使います。

実体参照をつかわずに「<」「>」を文章中に直接書くと
ブラウザがタグと誤って解釈しカラム落ちなどの原因になります。
(実はこの記事を書くときにもやらかしました…)

また、文章の中のHTMLに「<」「>」「"」「&」は直接記述できない文字です。
このような文字を使う場合は実体参照である「&lt;」「&gt;」「&quot;」「&amp;」を使います。

文字参照(もじさんしょう、character reference)とはHTMLなどのSGML文書においては、直接記述できない文字記号マークアップで使われる、半角不等号「<」や「>」など)を表記する際に用いられる方法である。SGML構成素のひとつとして定義されており、文書文字集合中の文字を参照する為の手段を提供する。HTMLにおける文字参照には、表記方法により数値文字参照[1]文字実体参照[2]の二種が存在する。XMLにおいては、HTMLにおける「数値文字参照」を「文字参照」と呼ぶ。なおHTMLにおける「文字実体参照」は、XMLでは実体参照[3]と呼び区別する。
Wikipeda「文字参照」より

少なくとも以下の5つは覚えておいたほうがいいです。

文字 文字実体参照 説明
  &nbsp; ノーブレークスペース – 折り返しを起こさない(ホワイトスペースではない)空白
< &lt; 小なり記号(半角)
> &gt; 大なり記号(半角)
& &amp; アンパサンド(半角)
" &quot; 二重引用符(半角)

Wikipeda「文字参照」より

©など上記以外にもいろいろあるので、目を通しておくといいかも。
Dreamweaverだと&を打つと補完候補がたくさんできてます。

文字実体参照一覧
HTML文字実体参照&数値文字参照一覧

 

上付き文字<sup>や下付き文字は<sub>を使う

a0002_008024

m2やCO2などを表すとき
CSSで文字サイズ小さくしてmarginやpaddingで表示しようとして、
悩んでいることがあります。

上付き文字は<sup>で
下付き文字は<sub>で表現できます。

↓↓↓↓↓↓

24m2
CO2

HTMLタグリファレンス <sup>
HTMLタグリファレンス <sub>

CSSでのやり方は下記にあります。
上付文字と下付文字

 

非表示文字の表示方法

a0001_014312

「どうしてもこのスペースが消えません…」と言ってくるので確認すると
全角スペースが入っているだけだったと言うことがあります。
コーディングにDreamweaverを使っていると
一度はハマるようです。

Dreamweaverのエディタでは、
「全角スペース」や「半角スペース」、「タブ」などの非表示文字は
デフォルトでは表示されません。

「表示」→「コードビューオプション」→「非表示の文字」
にチェックを入れると非表示の文字が表示されます。

img_130606_01

・Wordなどの入稿データをコピペした場合や
・ひらがな入力で半角スペースをいれたつもりが全角スペースだった
などが多いようです。

どうしてもスペースが消えないときは、
「全角スペース」が入っていないかも疑ってみてください。

 

ExcelからDreamweaverへの表の貼付け

a1640_000328

Dreamweaverを使っていて一番助かるのが、表の作成です。
Excelで入稿された表をDreamweaverに貼付けるだけで、
tableタグに整形してくれます。

ExcelからコピペでTableに変換してくれること意外と知らないようで、
1セルごとにコピペしている新人がいました。

img_130606_02

Excelでコピーしたい表を選択します。

img_130606_03

Dreamweaverのデザインビューにペーストします。

img_130606_04

Excelで作られた、不要なタグや属性が入ります。

img_130606_05

不要なタグは
検索・置換(Command+F)の「特定のタグ」で削除してやると楽です。
あとはCSSでデザインを整えてあげれば完成です。

下記にサイトにわかりやすく書かれています。
【Dreamweaver】DreamweaverにExcelをプラスでちょっと省エネコーディング
バシャログ。

 

まとめ

新人が来ると大体みな同じことでひっかかるので、
上記の事は最初に教えるようにしました。
ちょっとしたことですが、
実際の現場では、知らないと困る情報って結構あります。

知らないタグやCSSが意外とあるので、
時間があるときに、HTMLタグ辞典やリファレンスをみておくと
困ったときに便利です。

 - WEBデザイン