2006年11月03日
CSS編集をしましょう
ブログの壁紙やタイトル、記事内の文字飾り、画像の枠など見栄えを設定するのがCSS（Cascading Style Sheets）編集の目的です。この記事では、CSS編集に必要な最低限必要な知識をちょっとまとめてみました。習うより慣れろ！で一緒に楽しみましょう♪
各部分の名前
<div class="sango_title">各部分の名前</div>を例にとって各部分の名前を確認しておきましょう。といってもそんなにこだわることはありませんから安心してください。
（ここは読み飛ばしてもいいと思います。ヾ(￣o￣;)ｵｲｵｲ ）
- 要素 <div class="sango_title">各部分の名前</div>
- タグ <div class="sango_title">各部分の名前</div>
- 属性 <div class="sango_title">各部分の名前</div>
- 属性名 <div class="sango_title">各部分の名前</div>
- 属性値 <div class="sango_title">各部分の名前</div>
- 要素内容 <div class="sango_title">各部分の名前</div>
- 要素名 <div class="sango_title">各部分の名前</div>
要素について
ここについても色々な要素があって大きく分けて２種類あるんだって程度でいいでしょう。
- ブロックレベル要素
h1〜h6(見出し)、div（範囲）、ｐ（段落）、blockquote（引用）、table（テーブル）、ol（番号付きリスト）、ul(番号なしリスト)、form（フォーム）など一つのまとまった単位になっている要素のことです。 - インライン要素
a（アンカー）、span（範囲）、q（引用）、abbr（略語）、img（画像）、object（オフジェクト）、input(フォームの入力用部品)、select（メニュー）、textarea（複数行の入力フィールド）、label（ラベル）など行の一部として使われる要素のことです。
※img、input、object、select、textareaなど要素自体が特定のもので置き換えられるものは置換要素と呼ばれています。
CSSの書式
この部分も名称は特に気にしなくても構いませんが、書式はしっかり覚えておきましょう。
すべて半角英数文字です。.（点）、空白、:(コロン)、;(セミコロン)などもすべて半角英数文字で記入しましょう。
セレクタ{プロパティ:値;}
＜例１＞
.imgright{float:right;}
＜例２＞改行を入れて見やすくしてもかまいません。
.imgright
{
float:right;
}
コメントアウトについて
コメントアウトは便利ですから、しっかり覚えておきましょう。
※コメント ここでのコメントとはブログのコメントと別の意味になります。プログラム文の中に書いても、無視される文のことを意味します。
/*〜*/の間に書いた文章やコードは表示には影響しません。このように無効化することをコメントアウトといいます。CSSコードを追加したり変更したりするときには、その目的や注意事項などのメモをコメントを利用して書いておくと、わかりやすいコードになります。
＜例＞
/*画像の回り込みの設定*/
.imgright
{
float:right;
}
FC2ブログでCSS編集をする方法
参考までに、ここのブログFC2ブログでCSS編集をする場合の方法を案内しておきます。
- FC2ブログにログインして、管理者ページの左サイドの「環境設定」の項目[テンプレートの設定]をクリックします。
- 「ダウンロードしたテンプレートの一覧」の表の中で、「現在設定されているスタイル」の[ 編集 ]をクリックします。
- 「テンプレートの編集」にある、「スタイルシートの編集[テンプレート名]を編集しています。」の欄の中で編集します。キーワードがわかっているのなら、[Ctrl]＋[F]([Ctrl]キーを押しながら[F]キーを押す意味です。)で、検索ダイアログが開きますから、これにキーワードを入力して、検索すると編集がスムーズにできますよ♪
- 必ずバックアップしましょう！
いつも書いてますが、編集する前に、必ずCSSのコードをコピーして、「css_bk.txt」(例)のようにバックアップファイルを作成しておきましょう。間違って失敗しても、「css_bk.txt」の内容をコピペすれば、元に戻すことができますよ♪ - [プレビュー]で編集状況を確認して。完了したら、[更新]をクリックしましょう。
FC2ブログでHTML編集をする方法
- FC2ブログにログインして、管理者ページの左サイドの「環境設定」の項目[テンプレートの設定]をクリックします。
- 「ダウンロードしたテンプレートの一覧」の表の中で、「現在設定されているスタイル」の[ 編集 ]をクリックします。
- 「テンプレートの編集」にある、「HTMLの編集[テンプレート名]を編集しています。」の欄の中で編集します。キーワードがわかっているのなら、[Ctrl]＋[F]([Ctrl]キーを押しながら[F]キーを押す意味です。)で、検索ダイアログが開きますから、これにキーワードを入力して、検索すると編集がスムーズにできますよ♪
- 必ずバックアップしましょう！
いつも書いてますが、編集する前に、必ずHTMLのコードをコピーして、「html_bk.txt」(例)のようにバックアップファイルを作成しておきましょう。間違って失敗しても、「html_bk.txt」の内容をコピペすれば、元に戻すことができますよ♪ - [プレビュー]で編集状況を確認して。完了したら、[更新]をクリックしましょう。
↓ ぽちっと応援お願いします♪ m(_ _)m
≪New HAPPY NEWS がたくさんだといいですね♪ | Top | 画像を左に配置してそのとなりに文字を書く。（CSS編集） Old≫
トラックバックURL
コメント
勉強したら、ラブログにもトップのフリースペース作れるかしら・・・？
なんて思ってます･･･
今一度ｃｓｓをジッと見つめてみまっす...A=´、｀=)ゞ
Posted by ウッキ at 2006.11.03 22:03 | edit
コメント
今日は色々とありがとうございました。
先ほど アドバイスしていただいた件
なんとか出来たみたいです♪
ほんとうに手取り足取り ありがとうございました。
そしたら まあなんと 私の知りたかった内容が
こんなにも詳しく書かれていて またまた感激しちゃいました（*´▽`*)
頭の方はチンプンカンプンですが
＞習うより慣れろ！で一緒に楽しみましょう♪
のお言葉に 今 やる気まんまん(笑）
色々試して頑張ってやってみますので
よまたまた よろしくお願いしますね(^_-)〜★
Posted by miyu at 2006.11.03 23:22 | edit
コメント
＞勉強したら、ラブログにもトップのフリースペース作れるかしら・・・？なんて思ってます･･･
あらら・・・どうでしょうか？（;￣ー￣A ｱｾｱｾ･･･
とりあえずここのブログのトップにあるフリースペースはFC2の独自タグを使っているんです。だからFC2なら、楽勝でできると思いますが・・・ｳ･･ ｳﾝ(･_･;)
ラブログでも同じようにされている方がいらっしゃったら、その方の真似をして、発展させるのがいいのですが・・・・・・
Posted by ウッキさんへ at 2006.11.03 23:46 | edit
コメント
＞今日は色々とありがとうございました。先ほど アドバイスしていただいた件、
＞なんとか出来たみたいです♪ほんとうに手取り足取り ありがとうございました。
わぁ♪そーなのですか♪では、ちょっと失礼して・・・
----------------只今訪問中でっす----------------
できましたね！ｵﾒﾃﾞﾄｰｺﾞｻﾞｲﾏｯｽ♪(*⌒ｰ⌒)o∠★:ﾟ*PAN!
CSSの追加も、文字も回り込みもばっちり設定できていましたよ。
これでCSSの追加もできるようになりましたね。v(｡･ω･｡)ｨｪｨ♪
＞そしたら まあなんと 私の知りたかった内容が
＞こんなにも詳しく書かれていて またまた感激しちゃいました（*´▽`*)
あはは・・・yozoもこの記事の内容はよく見直すことがありますよ。ブロックレベル要素かインライン要素かでCSSの書き方が変わってきますからね。詳しくはこれからちょくちょく記事にしていきますね。なにしろyozoもあまりCSSは得意じゃないですからね♪(＝⌒▽⌒＝) ﾆｬﾊﾊﾊ♪
＞色々試して頑張ってやってみますので、またまた よろしくお願いしますね(^_-)〜★
やるき満々ですか♪それが一番ですよ♪やっぱりなんとかしたいという気持ちがないと、続きませんからね。ｙｏｚｏも一緒に＼(*⌒0⌒)ｂがんばっ♪ しますよ♪(*^-ﾟ)vｨｪｨ♪
Posted by miyuさんへ at 2006.11.04 00:02 | edit
コメント
オオーw(*゜o゜*)wこれはまた分かりやすい記事ですね!!
初めの各部分の名前、タグは分かっていたのですが、
他の部分の名前はよく分かっていなかったです。
あちらこちらでよく見るんですけどね。
＞習うより慣れろ！で一緒に楽しみましょう♪
そうそう、私は細かいことを言うよりも
とりあえずやってみようって感じでカスタマイズしています。
バックアップを取っておけば安心ですからね!!
このようにアドバイスされているのは素晴らしいですね!!
CSS編集についてもとっても分かりやすく書かれていますし、
挑戦しやすくなっていていいですね!!
さすがyozoさんです!!(ﾟ-ﾟ*)(｡｡*)ｳﾝｳﾝ
この記事を見てやってみようと思う方がきっといると思いますよ。
Posted by まゆび at 2006.11.04 00:15 | edit
コメント
＞他の部分の名前はよく分かっていなかったです。
そうでしたか♪yozoも部分の名前とか、ブロック、インラインの区別の確認はよくやってます。そんなときにでもこの記事は役に立つかなぁ~ってね。もちろん文法も基本を書いていますから、これからも参照してもらえる記事になってくれたらいいなぁ~って思ってるんですよ。(^○^)
＞私は細かいことを言うよりもとりあえずやってみようって感じでカスタマイズしています。
ふふふ・・・そうですよね♪別にプロになるわけでないし、先生になるわけでもありませんからね。できればいいじゃん！くらいの気軽さで取り組みたいですね。めちゃくちゃ手の込んだことであってもね (*^-^)
＞この記事を見てやってみようと思う方がきっといると思いますよ。
えへへ・・・気軽にCSSを触るのに必要な知識は、そのレベルに応じて変わってきますよね。何度も繰り返して参考になる記事ってことで書いたんですがまだまだこれからですね。どんどん改良していきたいって考えています。o(*^▽^*)oｴﾍﾍ!
Posted by まゆびさんへ at 2006.11.04 11:28 | edit
コメント
解かりやすい解説でとっても勉強になりました！
ただ記事をアップするだけじゃなくて
ブログを色々カスタマイズしていけると楽しさも倍増ですねぇ。
私もyozo殿のブログを教科書に
少しずつ勉強していこうと思います☆
Posted by babar at 2006.11.04 15:08 | edit
コメント
＞解かりやすい解説でとっても勉強になりました！
ありがとーございまっす♪m(_ _)m この記事を見て、あとは各記事のCSSのソースコードを追加したり、変更したりすれば簡単にできるようになりますよ。色、幅、高さなどを自分で変化させて、試すのが一番わかりやすいし、楽しいですからね。最低限知るべきことだけ知っていれば後は必要に応じて、勝手に身についてくるものだと思ってまっす (^○^)
＞私もyozo殿のブログを教科書に少しずつ勉強していこうと思います☆
あはは・・・yozoも一緒に勉強しまっす。楽しみながら進めていきましょうね♪ (*^-^)
Posted by babarさんへ at 2006.11.04 17:33 | edit
コメント
とても丁寧に書かれているので、とても参考になります。
ウチのBlogPeopleのLinkListにも入れて、更新されるたびに
おじゃましています。
Posted by iserin at 2006.11.05 20:24 | edit
コメント
参考になりましたか？それはうれしいですね。励みになります。
またリンクまでしてくださっているとのこと。とてもうれしいです。
いつでも遊びに来てください。m(_ _)m
Posted by iserinさんへ at 2006.11.06 00:04 | edit
コメント
あーーー!!!これか!!!
CCS編集って!!!これなのね。
yozoちゃんお言うとおり、
＞習うより慣れろ！で一緒に楽しみましょう♪
だよね。納得♪
でもね・・。正直言ってわからないことも多いの・・・。
コメントアウトって。。。、なんだろう・・・。
これって大事なんだよね。なんだろうなぁ・・・。
ごめんね。初歩的な質問だよね・・・。
でも、習うより慣れろって言う気持ちでやってみるのが一番だよね。
楽しくやってみよう♪うんうん。
Posted by enu at 2006.11.06 12:21 | edit
コメント
＞CCS編集って!!!これなのね。
そーなんですよ♪今までのように、一つ一つの記事に同じ操作を書くと記事のポイントが見えにくいので、基本事項をいつでも参照できるように別記事にしてみました。いつでもこの記事を見ればわかるような記事にどんどん発展させていきたいと思ってるんですよ(*^-^)
＞コメントアウトって。。。、なんだろう・・・。
ごめんなさいね。説明不足でしたね。そんなに深刻にならなくてもいいのですよ。修正しておきますね。(^-^;
ブログのコメントとは別の意味なんですけど、ここでいうコメントというのは、プログラム文の中に書いても、無視される文のことなんです。CSSコードを追加したり変更したりするときには、その目的や注意事項のメモをコメントを利用してつけると、わかりやすいコードになりますよね。（記事の例を見てくださいね。）
CSSの場合は、/*と*/で囲むと、CSSファイルの中の文なのにCSSとしては無効な文にすることができるんです。このように無効化することをコメントアウト（コメントにして無効化するって感じの意味かなぁ〜）っていうんですよ。なんかカッコイイでしょ(￣∀￣*)ｲﾋｯ
＞でも、習うより慣れろって言う気持ちでやってみるのが一番だよね。楽しくやってみよう♪
そうそう♪言葉の意味なんて、そんなにこだわらなくてもいいんですよ。使っているうちに慣れますからね。そうしたら、必要な言葉は、嫌でも覚えないといけなくなってきます。そのときに最低限を追加して覚えればいいのですよ。はじめから隅々まで理解するなんて無茶でしょ♪
別にプロになるわけでなし、楽しみましょうね。みんなで悩みながらね。ヾ(￣o￣;)ｵｲｵｲ
Posted by enuちゃんへ at 2006.11.06 17:57 | edit