デザインの学校 ウェブデザイン 実戦編 第2回

台風一過の後、天気の良い気持ちの良い日が続きましたね。
みなさんどのようにお過ごしですか?
わたしの連休第一日目は、ウェブデザインスタジオ山梨 実践編第二回目でお勉強の一日でした
週末は眠気も貯まり、なかなか勉強内容の記憶も怪しいですがここでおさらいしたいと思います。
では、行きましょー
今日は、ほぼ講義形式で。
(1)CMS(コンテンツ・マネージメント・システム)
(2)CSSでHTMLをわかりやすく短く
(3)PDFについて
こんな内容をしました。
まずは、CMS(Contents Management System)から。
CMSは、コンテンツ管理システムとも言います。
その名の通り、コンテンツを管理するシステムです。
HTMLの編集は、それなりに知識がないとできません。
そういう理由もあり、本格的に、しかもきれいなサイトの制作を目指すなら、外部のデザイナーさんに依頼するケースが多いのでは、と思います。
でも、いざ出来上がったとき、その編集するのって誰でしょう?
せっかく出来上がったサイトを自分の手で管理したい!
情報更新したい!と思う、依頼主さんにとっての必需システム
それがコンテンツ管理システムなのです
本来ならテキストや画像の更新作業は、直接HTMLを編集して行われるものですが、そうすると知識のない人が触ればデザインが崩れたり、見れなくなったりなどのトラブルを起こす可能性があります。
そんなときに、PHPやPERLなどの言語を使用してつくられているCMSは、デザインに変更を加えず、テキストや画像だけなど、任意の部分に変更を加えられるのです。
これまでの説明でもピンと来なかった方。
皆さんの身近にもCMSがたくさんあるんですよ。
例えば、ブログや最近人気のmixiなどならみなさんもご存知ではないでしょうか。
ああいうのもCMSっていうものなんです
利用されたことのある人は、すぐにわかっていただけたかと思います
次に、CSS
カスケーディング・スタイル・シート( Cascading Style Sheets )は、以前にも応用編でお伝えしました
詳しくは、6/12のWDS応用編を見てみてください★
前回は、特にフォントタグの代替としてのCSSをお伝えしましたが、今回はもっともっと違う部分でHTMLをコンパクトにするCSS利用法・CSSのメリットについてお伝えします。
まず、前回お伝えしなかったCSSのメリット!
CSSの仕組みは、例えば文字の大きさや色、余白や字間、その他の設定などを単一のhtml内部、もしくは外部のCSSファイルに一回定義しておけば、あとは
<span class="pink">スタイルシート適用して~(-人-)</span>
スタイルシート適用して~(-人-)
というように、クラスの指定をするだけで、要所要所でその必要な設定を呼び出し、再現することが可能というモノ。
簡単に言うと、例えば同じクラスを70箇所、200箇所とどれだけの数定義していても、単一のhtml内部、もしくは外部のCSSファイルにある、文字の大きさ~もろもろの詳細を指定している部分、その部分一カ所に、一度変更を加えるだけで、スタイル・クラスの指定をしている箇所全体にその変更が反映されるということなのです
一回で全体に!って考えると、作業効率もかなりいいですよね。
しかも、CSSは文字だけでなく、その他の見え方も指定することが可能です。
例えば、バナー下に5pxの余白を設けたり、背景の画像を指定したり、h2などの既存のタグの再定義ができたりと、とにかく大活躍!
そういった指定をhtml内でなく、外部のCSSファイルに記述することで、テーブルタグや、位置指定、幅・高さ指定などのhtml内の記述を削減することが可能なのです

例えば、このようにバナーを配置するにも…
いままでなら、こう作っていました↓が
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><a href="#"><img src="images/banner_1.jpg" width="210" height="65" border="0" /></a></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td><a href="http://iooo.weblike.jp/adb/" target="_blank"><img src="images/banner_2.jpg" width="210" height="65" border="0" /></a></td>
</tr>
</table>
  

CSSを上手に活用すればこんな風にシンプルになります!!
ただdivタグで囲むだけ
かつしかも間のスペースは1px単位で指定が可能になるのです
<div class="banner-contents"><a href="#"><img src="images/banner_1.jpg" width="210" height="65" border="0" /></a></div>
<div class="banner-contents"><a href="#"><img src="images/banner_2.jpg" width="210" height="65" border="0" /></a></div>
例えば、バナーならこのスタイル・クラスって決めておけば、デザインにも統一性が出て美しいです。
よりプロっぽいホームページサイトづくりができること間違いなし!
しかも、htmlをシンプルにすることでSEO的にも、よりロボットの巡回しやすい環境ができあがるのです
素晴らしいですね、CSSって
そして、最後にPDFについて。
PDFって皆さんご存知でしょうか?
日頃、インターネットというものに触れている方々ならば、いろんなところで目にするのではないでしょうか
でもPDFがどんなものか、ご存知ですか?
ということで、まずは解説。
PDFは、別名Portable Document Formatと言って、アドビシステムズ社社の開発したフォーマットです。
一般的には、PDFの作成にはAcribat、印刷や表示にはAdobe ReaderというそれぞれAdobe社の提供するソフトが必要となります。
Adobe Readerは無料で入手できるというところが良いですね
このPDFのすごいところは、作成したドキュメントを環境の違うコンピュータでも、元のレイアウトどおりに、表示・印刷ができるところ。
パソコンを触っていて、パソコン間の見え方の違いって、気になります。
サイトも動き方・見え方に、色々と差が出てしまう中、PDFはみんなが同じ見え方で見えるフォーマットなのです
しかも、Acrobatというソフトを使ってPDF編集する時には、セキュリティの設定も可能!
そのPDFファイルをどこまで変更可能にするかが設定でき、中身の変更許可から、印刷の可・不可まで、高度なセキュリティの設定が可能です
他にも、PDFを開いた時に、どんな状態で開くかの設定もできるんです。
等倍表示や、その他縮小表示などなど。
その中でも、相手の環境を選ばない表示方法はウィンドウサイズに合わせて100%になる開き方ですね
こうして全体が表示されている状態であれば、後はみなさんお好みで読みたい場所をアップで表示したり、例え解像度の低いモニタでも問題なく全容が見れます。
また、しおりなどの機能もあり、利用しやすくなっています。
画面で見づらい場合にも、印刷が簡単にできるところも嬉しいですね★
こんな感じで今回は終了
書き出すと、ほんとはアレもコレもでなかなか終れなくなってしまいそうで怖いですね
でもいかにも実践編!
この世界を目指す方にとっては、充実した内容となっているのではないでしょうか。
そんなクリエイター系職種を希望する方に朗報です。
今、WDSのサイト内で求人募集しています。
やる気のある方・気になる方見てみてはいかがでしょうか?
では、また再来週~

 

WEB(ホームページ)デザイン上級者向き 山梨県デザインスクール ウェブデザインスタジオ山梨

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


*




PAGE TOP