2006年09月21日

CSSの指導を受けて大助かり

I先生のメールで頂いたご指導。

先生のブログで,

>  ただ、文章の一部だけにバックカラーを施そうとしても、CSSではうまくい
> かないので、このように!HTMLで打ち込んでしまうこともあったが、止むを得
> ない。まだまだ勉強が足りないので。

という箇所がありますが,文章の一部の色を変えるには,<span>〜</span>タグ
で挟み,タグにスタイルを設定します。たとえば,スタイルシートで

.palepink {
color: black;
background-color: #eeccee;
}

と設定しておいて,HTMLを

<p>背景色を変えます。<span class="palepink">この部分の背景は薄いピンク色
</span>です。</p>

と記述すると,<span>で挟まされた部分だけ背景色が変わります。もしくは,強
調するときなどに,決まった背景色を使うというのであれば,

strong {
color: black;
background-color: #00ff33;
font-weight: normal;
}

とでも定義して,強調したい箇所を<strong>〜</strong>で挟むのが簡単でよい
かもしれません。

話は変わりますが,同じブログで,

>  不思議なことに、ページ内に置くCSSの設置が終わって、外部CSSに移動した
> ら、同じようには反映してくれないので、仕方なくページ内のCSSに戻してし
> まった。

と書かれていますが,ブラウザ内に古いCSSがキャッシュされている可能性があ
るので,

http://blog-faq.seesaa.net/category/224277-1.html

内の「メンテナンスが終了したにもかかわらずブログが表示されない」で説明さ
れているように,キャッシュをクリアしてみてください。これでだめなら,<
head>〜タグ内に記述するCSSファイルのパスを間違えている可能性があ
ります。

以上,ご参考までに。

こちらからのお礼のメール:拝復
 いつも貴重なご指導ありがとうございます!
バックカラーの方法、色々な方法があるんですね!

実は、あのブログを書いて以降、結局沢山買い込んだ様々な書籍の中から、

<span class="back">・・・・・</span>

に対して、

.back {background-color:#ffff66:}

という方法を知ったのでした。

でも、さらに色々な方法を御教示頂いたお陰で、様々な応用の仕方にひらめくものが大いにありますした!

また、外部CSS、ご教示の意味、大いに納得できます。確かに古いのが残っていたのに違いありません!
ブログのメンテナンス後にも、ご教示の通り、まったく同じ経験をしているので、氷解しました!

外部CSSの方が、きっとSEO的には有利なのでしょうが、ページ内に打ち込むのも、ページごとに好きなように変化させられて便利なように思います。

外部の場合、つまり保存している自分のパソコン内では管理が大変なのと、バックアップを取るのも面倒だから、パソコンが突然壊れた時に、外部CSSが永久消滅して、また作り直さないといけなくなるので・・・・・とずぼらなことを考えてしまいますが、外部CSSにすべきなのでしょうか?

この点での御教示を賜れば、まことに幸いです。

ところで、凝り性だから、独自ドメインを沢山取得してしまいました。現在のところ、独自ドメインによる6つのサイトを制作することが出来ます。

5年後にはプロの手前くらいの技術を見につけたいと思っています。

ご指導、ありがとうございました!
                          頓首

折り返しのご指導:おはようございます。

> また、外部CSS、ご教示の意味、大いに納得できます。確かに古いのが残っ
> ていたのに違いありません!
> ブログのメンテナンス後にも、ご教示の通り、まったく同じ経験をしているの
> で、氷解しました!
>
> 外部CSSの方が、きっとSEO的には有利なのでしょうが、ページ内に打ち
> 込むのも、ページごとに好きなように変化させられて便利なように思います。
>
> 外部の場合、つまり保存している自分のパソコン内では管理が大変なのと、バ
> ックアップを取るのも面倒だから、パソコンが突然壊れた時に、外部CSSが
> 永久消滅して、また作り直さないといけなくなるので・・・・・とずぼらなこ
> とを考えてしまいますが、外部CSSにすべきなのでしょうか?
>
> この点での御教示を賜れば、まことに幸いです。

サイトのページ数が少ないうちはどちらも大差ありませんが,多くなってくると
外部CSSの方が断然有利になります。たとえば,前回のメールに書いたマーカー
もどきの強調方法で,背景色を緑から黄色に変えたい場合,外部CSSならCSS内を
1箇所変えればよいのに対し,HTMLのヘッダ内に記述している場合は,HTMLファ
イルの数だけ修正を繰り返す必要があり,効率的ではありません。

> ところで、凝り性だから、独自ドメインを沢山取得してしまいました。現在の
> ところ、独自ドメインによる6つのサイトを制作することが出来ます。
>
> 5年後にはプロの手前くらいの技術を見につけたいと思っています。

複雑極まる中医漢方理論に比べれば,HTML/CSSなどの世界は稚技に等しいと思われます。先生なら,きっとマスターできますよ


お礼のメール:拝復

早速のご指導ありがとうございます!

折を見て徐々に外部CSSに切り替えることにします。各ページに一部不統一なCSSを作ってしまいましたので、少し調整して、ページ数を増やす折にでも移動挿せようと思います。
そして、そのときは●●●●●メールなどの安全な場所にバックアップとしてコピーを保存することにします。

現在使用中のパソコンは、いつぶっ壊れるか分かりませんので。

今後、作る場合も、最初から外部CSSでやりたいと思います。

貴重なご指導、ありがとうございました。
                        頓首
posted by 文武 at 00:45| 山口 | HTML・CSSのお勉強 | このブログの読者になる | 更新情報をチェックする

2006年09月18日

外部に置くCSSとページ内に置くCSSで、同じCSSなのに、後者で反映するのに前者では反映しないものがあるので・・・・・

 前回の続きである。
 不思議なことに、ページ内に置くCSSの設置が終わって、外部CSSに移動したら、同じようには反映してくれないので、仕方なくページ内のCSSに戻してしまった。
http://www.kanpoyaku.info/ は殆ど完成したが、どうせ論文集だから構成がシンプルで素人向きである。素人向きではあっても、適当にCSSを使って、ソースをよりシンプルにしたつもりだが、上記のように珍現象が起こるので、仕方なく各ページごとにCSSを残した。

 もしかしたら、いやきっとCSSの法則に反することをやっているのかもしれないが、初心者のジジイには皆目見当がつかない。ページ内に置くCSSなら、思うような反映が8割以上出来ているのに、外部に移動させると、反映してくれない部分が出てくるのである。

 不思議でしようがないが、ページごとに置くCSSも、そのページ特有のCSSに変更できて、便利な部分もあるので、今後の課題として残しておく。

 どうせ、あと何サイトも作るつもりだから。試行錯誤しながらここまで来たのだから、あと一年もすれば、もっとましなものが出来るようになるだろう。

posted by 文武 at 20:05| 山口 ☁| HTML・CSSのお勉強 | このブログの読者になる | 更新情報をチェックする

2006年09月17日

移転作業に忙しい漢方と漢方薬によるアトピー専門サイト

 いま、とても忙しい。

http://www.cyuikanpo.com/atopi/

このアトピー専門サイトを、

http://www.kanpoyaku.info/ このサイトに移転すべく、写しかえている。

 移転する理由は、他ならない、サブデレクトリで作ったのが、あとになって後悔することとなり、専用の独自ドメインに移したくなったというわけ!

 のみならず、シンプルな文章ばかりのサイトだから、全面的に手打ちによってHTMLを打ち、そしてCSSも手打ちでページ内にまとめて打ち込むようにしている。

 ただ、文章の一部だけにバックカラーを施そうとしても、CSSではうまくいかないので、このように!HTMLで打ち込んでしまうこともあったが、止むを得ない。まだまだ勉強が足りないので。

 でも、すべてこれ、手打ちですからね!!!

posted by 文武 at 21:26| 山口 ☔| HTML・CSSのお勉強 | このブログの読者になる | 更新情報をチェックする

2006年08月24日

昨日のCSSの失敗!(先生にご指導頂いたこと)

ご指導のメール:「Webディレクターに追いつき追い越せ」の今日の記事を拝見していたら,気になる箇所がありました。

p {
line-height: 200%; font-family: "MS 明朝";
}

の部分で,フォント名を決め打ちしていますが,"MS 明朝"はWindowsにしかないため,たとえばMacでは文字化けの原因になります。医療関係者は結構,Macを使っている方がいるので,そのへんは配慮された方がよいかと思います。

解決策は簡単で,Macでも表示されるように,

p {
line-height: 200%;
font-family: "MS 明朝", 'ヒラギノ角ゴ Pro W3', Osaka, sans-serif;
}

とします。お試しください。


お返事メール:●●様

拝復

ご指導、ありがとうございます!

確かにご指導の内容を本で読んではいたのですが、沢山自分で打ち込むと失敗しそうで、まっいいかっ?!という気持ちで特定の漢字に指定してしまったのでした。

失敗しそうで二の足を踏んでいた部分をお送り頂き、とても感謝しています!

早速コピーして入れ替えようと思います。

今後とも、おかしな部分があったらご指摘下さいます様、よろしくお願い申し上げます。

編集後記: 直ぐにコピーして修正しようと考えたが、あまりにも沢山、あり過ぎるので、焦らずコツコツ少しずつ修正していかなくてはならないのだったモバQたらーっ(汗)たらーっ(汗)たらーっ(汗)
posted by 文武 at 00:48| 山口 ☀| HTML・CSSのお勉強 | このブログの読者になる | 更新情報をチェックする

2006年08月23日

CSS覚え書き(超基礎編)

 Head部分に埋め込むレベルの超基礎的なCSSだが、既に実行している部分の覚え書き。


h1 a {
text-decoration: none;
}
h2 a {
text-decoration: none;
}
body {
margin-left: 3em; margin-right: 3em;
}
   p {
line-height: 200%; font-family: "MS 明朝";
}


 これでh1とh2部分のリンクのアンダーライン?を消し去ることが出来るし、body部分、つまりネット上に反映される画面の両サイドを3em分余白を取ることが出来るというスタイルシート。
 そして<p></p>領域の行間を200パーセントにして、活字はMS 明朝である、という指定。

 まだ、このレベルの段階なんですよ。
posted by 文武 at 17:05| 山口 ☀| HTML・CSSのお勉強 | このブログの読者になる | 更新情報をチェックする

2006年08月16日

実は現在水面下で(笑)CSSの猛勉強中!

 現在CSSの猛勉強中というのはややオーバーだが、基礎的な学習に便利な本を発見して、これなら意味がよく分かって牛歩のスピードながら、来年頃にはかなり本格的なCSSを自製できるかもしれないと期待に胸を膨らませているところだ。

 色々な本を買い漁ってみた中では、エクスナレッジ発行の「HTMLとスタイルシートによる最新Webサイト作成術」というのが、とりわけCSSに関しては、どシロウトにとって最も理解しやすかった。

 例によって途中でアキが来なければよいが、
 http://www.cyuikanpo.com/
 http://www.canpo.biz/
 http://www.kanpo.org/
 これら三つの独自ドメインにおける様々なサブディレクトリも含めて、いずれは独立したスタイルシートを別制作して、大改造を行いたいと思っているが、現時点の能力では、ページごとに埋め込む程度のCSSしか使いこなせない。

 中途半端な独立CSSを作るくらいなら、後で大改造を行うのも面倒なので、もうちょっとしっかりマスターした後に、モデルチェンジを行いたいと考えている。

 HTMLに関しては、悩むこともあまりなくなったので、結局はCSSのマスターがこれからの最大課題ということである。
posted by 文武 at 15:21| 山口 ☁| HP作成関連 | このブログの読者になる | 更新情報をチェックする
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。