BLOG自分の経験をシェアしたい。Webデザインのテクニック&効率化。2013/09/01Tweet何人も新人のウェブデザイナーをみてきましたが、みんな大体同じところでつまづくようです。自分もそうだったなぁと思うところでもあります。知らなければ(もしくは、調べることをしなければ)ずっとわからないまま。「知っておけば楽になるのに!」と思ったことをピックアップしてみました。「スペースが表示されません」と聞いてくる人がいます。そんな場合には「&nbsp;」を使います。実体参照をつかわずに「<」「>」を文章中に直接書くとブラウザがタグと誤って解釈しカラム落ちなどの原因になります。(実はこの記事を書くときにもやらかしました...)また、文章の中のHTMLに「<」「>」「"」「&」は直接記述できない文字です。このような文字を使う場合は実体参照である「&lt;」「&gt;」「&quot;」「&amp;」を使います。reference)とはHTMLなどのSGML文書においては、直接記述できない文字や記号(マークアップで使われる、半角の不等号「<」や「>」など)を表記する際に用いられる方法である。SGML構成素のひとつとして定義されており、文書文字集合中の文字を参照する為の手段を提供する。HTMLにおける文字参照には、表記方法により数値文字参照[1]と文字実体参照[2]の二種が存在する。XMLにおいては、HTMLにおける「数値文字参照」を「文字参照」と呼ぶ。HTMLにおける「文字実体参照」は、XMLでは実体参照[3]と呼び区別する。二重引用符(半角)Wikipeda「文字参照」より©など上記以外にもいろいろあるので、目を通しておくといいかも。悩んでいることがあります。上付き文字は<sup>で下付き文字は<sub>で表現できます。<sub>CSSでのやり方は下記にあります。「どうしてもこのスペースが消えません...」と言ってくるので確認すると全角スペースが入っているだけだったと言うことがあります。コーディングにDreamweaverを使っていると一度はハマるようです。「全角スペース」や「半角スペース」、「タブ」などの非表示文字はデフォルトでは表示されません。「表示」→「コードビューオプション」→「非表示の文字」にチェックを入れると非表示の文字が表示されます。・Wordなどの入稿データをコピペした場合や・ひらがな入力で半角スペースをいれたつもりが全角スペースだったなどが多いようです。「全角スペース」が入っていないかも疑ってみてください。ExcelからDreamweaverへの表の貼付けDreamweaverを使っていて一番助かるのが、表の作成です。Excelで入稿された表をDreamweaverに貼付けるだけで、tableタグに整形してくれます。ExcelからコピペでTableに変換してくれること意外と知らないようで、1セルごとにコピペしている新人がいました。Excelでコピーしたい表を選択します。Dreamweaverのデザインビューにペーストします。Excelで作られた、不要なタグや属性が入ります。不要なタグは検索・置換(Command+F)の「特定のタグ」で削除してやると楽です。あとはCSSでデザインを整えてあげれば完成です。下記にサイトにわかりやすく書かれています。【Dreamweaver】DreamweaverにExcelをプラスでちょっと省エネコーディングバシャログ。上記の事は最初に教えるようにしました。実際の現場では、知らないと困る情報って結構あります。時間があるときに、HTMLタグ辞典やリファレンスをみておくと困ったときに便利です。コメントをキャンセルメールアドレスが公開されることはありません。...美しいモノトーンベースのWEBデザインまとめモノトーンはシンプルなだけに、写真などの素材のよさが際立ちます。新人がデザインの業務で頼まれることが多いのばバナー。Unlimitedのサービスが始まりました。...Webデザイナーで、転職がうまくいかない場合のひとつの方法として運よく憧れのWebデザイナーになれても、残業続きで条件面も悪く、すぐに退職。最近のWeb業界は人手不足で経験者を積極採用しているケースが多いです。多岐のジャンルのWebサイトを数百件制作。広範囲な知識・技術・経験を活かした素早い制作が得意。WACA上級ウェブ解析士。地方でもマルチデバイス対応を求められることが多くなってきました。優しくナチュラルな雰囲気を出したい場合は手書き風のデザインは相性がいいです。1分くらいで簡単に文字を「手書き風」にすることができるテクニックです。使うこのギザギザの丸(円)。PR初心者がコーディングのときに失敗しがちなこと自分の経験をシェアしたい。Webデザインのテクニック&効率化。