CSSソースコードをコピペしたのにうまくいかない原因はコレでした | パソコンが好きになるブログ〜表技・裏技・便利技伝授!

パソコンが好きになるブログ〜表技・裏技・便利技伝授!

北海道札幌市中央区 大通駅徒歩7分のパソコンスクール「リズ札幌・ライフデザインスクール」パソコンインストラクター川上雄大によるパソコン・IT・ワンポイントレッスン。
スクールでのいろんな方のパソコンレッスンだったり、パソコンとは関係ない話だったり…

こんにちは、パソコンワンポイントレッスン!

PCインストラクターの川上です。


ワタクシのこの記事↓↓↓を見て、

ヘッダー画像に文字を埋め込んだ場合のタイトルや説明文を非表示にする方法(CSS)

そのままやったのに、うまくいかない(汗)

といったご質問、よくいただきます。




ヘッダを変えるのは出来たのですがその後の
非表示ができません。
全部コピペしたのですが・・・



CSSのソースをコピペしたのに、うまくいかない、というケースですね。


この場合、まず3つ想定されます。
(もちろん、それ以外にもチェックポイントはありますが)


 ブラウザの更新がされていない
→『ヘッダーやメニューバーを設置したのにうまく表示されないのですが・・・

 コピペのミス
→最後の閉じカッコ「}」を忘れてしまっている

 CSSソース内で、今回コピペしたコードより上のところで、何かミスがある


今回は、この中のでした。


そう、このコードが問題でした↓↓↓


.jidou{
border:1px solid #cccccc;/*枠線*/
background-color:#F2F2F2;/*背景色*/
padding:10px;/*余白*/
margin:10px 0;/*マージン*/


一瞬、どこも間違っていないと見えますが・・・



実は・・・、最後の閉じかっこ「}」が問題です^^!

半角の「}」でなければならないのに、全角の「」になっているのです(苦笑)


結局、この全角の「」より下のCSSコードはまったく効いていないことになります。


・・・で、この1文字を直せば、バッチリうまくいきました~、めでたし、めでたし!!


そうなのです、コードは半角でないとならないのです。


たかが1文字・・・、されど1文字・・・、ですので^^!





CSSを使われる方は、今一度こちらの過去記事も復習してくださいませ(笑)

CSSに余計なモノ入っていませんか?【CSSの整理・整頓 その1】



それから・・・

CSSの閉じカッコ『}』の書き忘れ、コピペ漏れをチェックするには、アメブロカスタマイズの松本さん作成のツールをお使いになるといいですね↓↓↓

CSS閉じカッコ抜けチェック





以上、パソコンワンポイントレッスンでした。


LIDS澄川・ライフデザインスクール
川上 雄大