WEBクリエーターセミナー
第7回 10月9日(火曜日)

google site は すべてインラインデザインで処理します… Zen-Coding Textarea Extension が便利です←使い方の詳細
つまり…
<div  style="ここにCSSの要素を書く">  表示される内容  </div>
ある程度のレイアウトのデザインは準備されていますので、だいだいこれでいけますが…細かいサイズ設定はできません。 

また、このインラインデザインを駆使しても、html内の記述にコメントアウトもできないので、細かい文章のデザインをするのも苦労なので やはりある程度のCSSの知識を持ち、ガジェットで取り込まないといけません。

参考…webデザイン表現&技法の新スタンダード ←Webサイトの目的を見据えて、適切なレイアウトに

上の部分を書いているhtmlは…

↑こんな感じです。 line-height:1.5em を設定して囲んでいることで、行間を1.5に設定できています。
何も指定しないと、1 で行間がツメツメになり、日本語の場合、文字が小さいと若干読みにくいです。

また、google site は背景画像をインラインデザインで設定するとエラーになります。
(コンテンツの背景はサイトの管理の中の色とフォントの中のコンテンツの背景画像で設定できます。)

と、いうわけで、文章の説明だけでは理解が難しいと思うので、一般的なホームーページのCSSの書き方についても簡単に知っておく必要がありますので、教えておきたいと思います。

参考:CSS入門

ここに添付された書類を確認してください↑ このようなものです。


こういうものを編集するのに必要なのは… FTPソフトです。 ダウンロードしてみてください。
また編集するのに一番簡単なのはメモ帳ですが、色がついて見やすい 前に教えたPHP ロブスターがいいですが、 
立ち上がりが早い サクラエディタもお試しください。

ガジェットの仕様の URL が見つかりませんでした


http://kumacrow.blog111.fc2.com/blog-entry-296.html  ここなどを見ながら、考えてみましょう!


ą
aki.jpg
(96k)
特定非営利活動法人 自立生活センターFREE,
2012/10/08 16:47
ą
aki2.jpg
(454k)
特定非営利活動法人 自立生活センターFREE,
2012/10/08 23:11
ċ
style.css
(0k)
特定非営利活動法人 自立生活センターFREE,
2012/10/08 16:10
ċ
style2.css
(0k)
特定非営利活動法人 自立生活センターFREE,
2012/10/08 23:11
ċ
style3.css
(0k)
特定非営利活動法人 自立生活センターFREE,
2012/10/08 16:52
ċ
test.html
(0k)
特定非営利活動法人 自立生活センターFREE,
2012/10/08 16:09
ċ
test.xml
(0k)
特定非営利活動法人 自立生活センターFREE,
2012/10/08 16:52
ċ
test2.html
(0k)
特定非営利活動法人 自立生活センターFREE,
2012/10/08 16:40
ċ
test3.html
(0k)
特定非営利活動法人 自立生活センターFREE,
2012/10/08 16:48
Comments