実践向・CSSを短期間でマスター｜無料ブログ比較検証

前後の記事

更新:2008年3月21日（金）

実践向・CSSを短期間でマスター

CSSに関する書籍や情報は、何も知らない初心者からすれば、非常にとっつきにくく感じる方も多いと思います。

そこで、このコーナーでは、友達や後輩に教えるようなノリで、誰でも簡単に明日からでも使えるようになって頂こうという趣向で少しづつレクチャーしていこうと思います。

HTMLの細かい文法を覚えなくてもブログやCMSを使用する事で、もはや誰でも簡単にウェブ構築が行えるようになりましたが、より自分好みのサイトにする為には、CSSはマスターしておきたい所。

突然ですが、ここでは、本当に何も知らない方を救済するが為に、参考書にあるような小難しい理論的な内容は思い切って排除します。

例えるなら自動車教習所でいう第一段階の、交通標識を知らない状態で車をひたすら運転するだけの段階だと思って頂いて結構。そして、ある程度、ご自身でスタイルシートを書けるようになったその後に、予備知識として参考書を各自でお読みいただくと良いと思います。

ちなみに下記がこのブログを見てCSSマスターになる為のカリキュラムです。

と、こちらに項目を書いていたのですが、モチベーションが上がらないのでやめました。

正直、ブログで書いた所で読む人も少ないと思いますので、やっぱり完全静的ページで公開していく事にしました。

少しづつですが暖めながらCSSのたまごを育てて行きたいと思います。

ちゃんと読んでくれさえすれば、きちんとCSSを使いこなせる、書ける人になれますのでご安心下さい。

夜中に突然目が醒めてハイな状態がやって来た時に一気に書く感じの更新頻度ですので、不定期ですがよろしくお願い致します。

かなり特殊な方法で展開していますが、気長にお付き合い下さい。

CSSのたまご

それから、CSSがどんなものなのか、イマイチよくわからない方の為に下記にどんなものなのかを簡単にご説明させて頂きます。

ブログで覚えるCSS！

スタイルシート(CSS)って何？: スタイルシートというのは、見た目を自由にデザインしたい場合に使用するレイアウトに特化した命令文です。では、実際にこのスタイルシートを記述すれば、どんな事が出来るのでしょうか？

それは、サイト全体のレイアウトを決めたり、文字の色を指定したり、背景画像を指定した位置に自由に配置したりなんて事が出来るようになります。
どうしてみんなCSSを使いたがるの？: それは、一度、定義してしまえば、後は、自動的に色やレイアウトが出来上がる為に、後の更新が楽になるからです。HTMLで有名なタグの中にFONTのCOLORタグやBタグがありますよね？

もちろん、これらのタグでも色を変えたり、文字を太くしたり大きくしたり出来るんだけど、毎回それを定義してあげないといけない。

でもそれだと、どうしても余計なタグが増えてしまうし、長文になると管理するのが大変。そこで、CSSであらかじめ、フォントのサイズはこの位の太さで、文字のサイズは150%にして、さらに背景に画像をおいて、行間は180%開けるようにする。

といった細かい指定を最初にしておけば、勝手にやってくれるんです。

無料ブログ比較検証 : ハッスル寅男

最初はランキングサイトで訪問者を増やそう

伸び悩んでいる方は、ランキングを科学するを参照

[ 11:36 PM | comments (10) | trackback (0) ]

[後でまた読む]

記事貼り付け

実践向・CSSを短期間でマスター

投稿者ナランチャ

外部cssファイルで定義しても、rel="nofollow"というのはちゃんとわかってくれますかね？

もし反映されるなら、アフィリエイトリンクにむやみにページランクを渡さずにすむと思います。おまけにリンクコードを改変したわけでもありませんし。

id="follow"も作っておけば内部リンクは価値あるものとなりませんか？素人の浅知恵でしょうか…。

[ URL | 2007年6月20日, 11:01 PM ]

投稿者ハッスル寅男

最初、CSSなのにはて…　と一瞬悩みましたが、なる程、発想的には面白い考え方ですね。

残念ながら、CSSの定義の中はid　#hoge{margin:0px;}　や、class　.hoge{margin:0px;}

という属性はありますが、rel　に対応する属性はありません。もし、仮に、%というのがそのrelに対応する属性だとしたと仮定すると、　%{○○:nofollow;}　的なものになるのかもしれませんが、CSSはあくまでも、ブラウザがどのような表示（色や行間、画像といった見た目に関する情報）をするのかを指定する場所である為、検索エンジンに影響を及ぼす事はありません。

逆に言い換えれば、現時点での検索エンジンのアルゴリズムは、外部CSSを評価の対象とはしていないと私は考えています。その為、本来ならば、上部に書いてある内容を下部に配置換えをするといった意味でのSEOは残念ながら今でも有効で、それを利用しているサイトもちらほら見かけます。

寧ろ、外部からJavascriptを読み込む形での行いが、ナランチャさんの内容に近く、Javascriptで似たようなヤンチャな事をしている人はわりとあちこちで見かけたりします。ですが、これは立派な規約違反ですので、くれぐれも、真似をしないように。

最後に、followに関する記述ですが、基本的に検索エンジンは、何も書かなくても普通にクローリングし、インデックスしていってくれますので、特に記述する必要はありません。ある意味、一種のおまじない的なものに近いです。

内部的な強化を計りたいと強く望まれる場合は、結局の所、沢山の人に食いついてもらいやすい、ネタにされやすい話題で沢山のブログにリンクしてもらう事こそが重要です。

そして、よく見られるようになった記事が目に見えてわかるようになりはじめたら、その当たった記事をまとめたり、トップページの目につく位置に配置したり、新しい記事からさりげなく誘導したりといった事を行う事が、訪問者を意識した内的要因の強化に繋がるのだと考えています。

さらに、Aのページが「○○○」でよくヒットされているならば、BやCにはその○○○というキーワードでAに対してリンクを貼って支援し、Bが「△△△」でよくヒットされはじめたらAやCはBに対して「△△△」というキーワードで支援してあげる。

こういった、譲り合いをサイトの中で行いあう事こそが、互いの長所を伸ばし、さらなるアクセスアップを生む礎となるものだというのが私の見解です。

少しクドい説明になりましたが、ナランチャさんのそういった枠に捕われない発想はいずれ何らかの形で役立つような気がします。実際、プログラム等でも、「これって○○してみたらどうだろ…えっマジで？これってアリだったんだ」といった発見があったりする事も多々あります。

[ URL | 2007年6月21日, 01:09 AM ]

投稿者ナランチャ

すいません。舌足らずでした。
<meta>ではなく、リンクタグの<a href="hustle-user.mobi" rel="nofollow">を予め外部CSSで定義できないものかなって思いまして。そしたらタグ改変じゃなくなりますから。

しかしよく考えれば"スタイルシート"ですから、スタイルしか変えられないですね。
ということは個別ページで<meta>タグを変えていった方が良さそうですね…。

ところでSEOテンプレートのソースを調べていると、ヘッダよりも前に本文がきているものもありました。見た目は普通の左メニューなのに。そんなことができるんですね。

[ URL | 2007年6月21日, 12:30 PM ]

投稿者ハッスル寅男

ナランチャさんこんばんわ。

私も書きながら、リンクでのrefの事だなと途中で気付いたのですが、勢いよく書いていたので、そのまま送信しました。ナランチャさんの仰るとうり、CSSでヘッダの部分よりも先に本文を書く事は可能です。

私の作成しているSEO対策テンプレート素材も、メニューよりも先に、本文を読み込ませたり、極力ムダなDIVで包まないようにしたシンプルなSEO対策済みテンプレートです。

実は、また新たなSEO対策済みテンプレート素材を作成しました。今回のタイプは、ニュースサイトっぽい雰囲気のものです。全てCSSでこしらえたものではなく、訳あって、一カ所だけテーブルを使用したタイプのものです。

これは実際に見て頂かなければ説明は難しいのですが、一言で言うと怠け者の為に作ったテンプレート素材です。３カラムを意識するとそれを意識するが為に逆にDIVが増えてしまうというディレンマに悩まされます。

そこで、それならば、テーブルタグをあえて、使い、ソースをシンプルなものにし、さらには、文章を入れるか入れないかで、３カラムにも、２カラムにも果ては１カラムにもなる優れもの＆伸縮自在テンプレートみたいな感じです。おそらく、こうゆうのもアリだなと思って頂ける方もいるのではないでしょうか。

話が大幅に脱線してしまい、テンプレートの宣伝までしてしまいましたが、CSSはまだまだ奥が深いです。今後もシンプルでありながら一風変わったタイプのテンプレートを公開していけたらいいなと思っていますのでよろしくお願い致します。

[ URL | 2007年6月22日, 12:40 AM ]

投稿者いずれ

携帯電話向けページへのCSSはどうしたらよいのでしょう？
例えば外部のcssを読み込む場合、auでは対応しているがdocomoでは対応していない、と聞いた覚えがあるのですが…

余談ですが、SEO対策のテンプレートはメニューの部分のｃｓｓを共通部分をまとめればもう少し小さくなると思うのですがいかがでしょう
ｃｓｓをよくは知らないため間違っている可能性も大で恐縮です。

[ URL | 2007年8月02日, 02:29 AM ]

投稿者ハッスル寅男

携帯サイトはいまだにcssに対応していないものが多いです。auでも少し古い機種であれば、対応していないものが多く、そのcss自体も使える記述方法がまだまだ少ないのが現状です。

現状としては、少しでも沢山の人に閲覧されたいとお考えであれば、cssはまだ使わない方が良いのではないでしょうか？

もし、あえて使いたい場合は、端末ごとに振り分けて、対応機種ごとにサイトを別途制作し、そちらに振り分けるという方法を行う必要があります。

あと、SEO対策テンプレートに関してですが、文字は、cssの中にあるfont-size:　という記述で自由に大きくしたり小さくしたり出来ます。

私の場合、大きめのサイズで作る事が多いです。理由は、お年寄りから目の不自由な方でもせめてメインの記事位は、読みやすい文字で読んで頂きたいなと思っているからです。

[ URL | 2007年8月04日, 09:06 PM ]

投稿者いずれ

説明不足ですみません。
文字サイズや見た目の大きさではなく、ｃｓｓファイルのメニュー部分（リンクの定義済みクラス）の記述内容に共通部分があったのでそれを定義済みクラス抜きの記述（：linkなど無しのa）を追加してそこにまとめればファイルサイズが小さくなるかと思ったのです。
が、カスタマイズ性を考えるとそのままの方がよいのでしょうか。

[ URL | 2007年8月05日, 01:34 AM ]

投稿者ハッスル寅男

成る程、そうゆう事でしたか。テンプレートに関する事ですが、実は、10月の末に向けて宅建を受験してみようと思い、現在、猛勉強中だったりします。

試験が終われば、時間にも余裕が出来ると思うのでその時に１から練り直したちゃんとしたイケてるテンプレートを作ろうと予定しております。

とは言うもののその試験勉強の時間すら捻出しきれておらず、先行きは不安です。ここで公言してしまった以上、意地でも受かりたい。こう心に誓う寅男なのでした。

[ URL | 2007年8月07日, 01:17 AM ]

投稿者いずれ

ざっと調べてみたところ人のためになるような資格のようで。
受かるといいですね。

では長い目でナウなギャング・・・もとい、ヤングにバカうけなテンプレートを期待するとします。

[ URL | 2007年8月07日, 09:53 PM ]

投稿者ハッスル寅男

資格だけだと、直接人の為になる訳ではありませんが、学んだ知識はブログ等で公開していくつもりでいますので、そういった意味では間接的には何かのお役に立てるかもしれません。

宅建を取得しておくと家主や、不動産屋に舐められるといった事も無くなり、悪質な所に引っかからないようにする為のポイントも知る事が出来ると思います。

不動産屋に勤めるつもりで取ろうと思っている訳ではなく、民法がどこまで理解出来ているのかを見極める為のものなので、いつもの如く出し惜しみせずどこか新しいブログでガンガン書いていきたいです。

でもその前にファンキーでモンチーなテンプレートを充実させなければいけませんね（汗）

[ URL | 2007年8月07日, 11:11 PM ]