はじめに // 配布テンプレ&利用規約

よくある質問集

えーコメントをつける方は最低でもよくある質問集はチェックしてください。この記事にコメントつけてるのに、ここに書いてある項目を見ていないとか???ってなってしまいます。 今後はここに書いてあるのに、っていうコメントを頂いた時はコメント数の氾濫を防ぐためにも解答後そのコメントを削除させて頂きます。


ユーザー助け合い掲示板にもあるんですが
目次の意味も兼ねて。随時追加予定。
自分のスキルを上げたい、1から身につけたいって人は
まずcss講座xhtml講座を見てください。


■基本的なことである色換えや背景、文字装飾などは下のcss。
アイコン追加、不要項目削除などはhtmlと独自タグを見てください。


■具体的カスタマイズ

スポンサーサイト

一定期間更新がないため広告を表示しています

| | Comment 0 | - |

analogueのメニューの問題点

ですが一応メモ。
カスタマイズ用4には公式テンプレanalogueの
メニューを搭載してありますが
これよく見たらcssでvisibility: hidden;
になってるんですね。


display:noneなどとちがって、こういう指定だと
見えないだけで高さが生まれるので
擬似フレームなどをつかってコンパクトにしていると
下に大きな空白が出来ることがあります。
その場合はMENUにもoverflow:auto;と
高さ指定をいれてやってください。


scriptは外部ファイルでいじれなかったのですいません。
小窓に向かないテンプレなのかも。



| 21:20 | Comment 3 | - |

レイアウトの作り方(floatとposition)

今回はcssがちょっと分かってきた人向けの
レイアウト方法入門。
css講座なのでテーブルレイアウトは除外です


cssでのレイアウトは大雑把に分けて2種類あります。
それはfloatを使用するかpositionを使用するかです。


●floatレイアウト
floatはrightかleftを指定してその方向に浮かせます。
右カラムにはfloat:right;
左カラムにはfloat:left;って感じに分けるんですね。
centerはありません。
centerはmarginとtext-align:centerでやってください。
(これが知りたい人は後日エントリに起こします)


A
B
C
とdivがあり、全てにfloat:right;が指定されていた場合
C B Aと並ぶことになります。
ただし含有ボックスや全体のwidthを越えちゃった場合
その分は下に落っこちます。
よくサイドメニューが下に落ちちゃった!っていう現象は
メインかサイドに幅のあるものを置いた為
全体の幅を越えて落ちちゃってるわけです。
これを避けるのには含有と左右全部に
pxででもwidth指定しちゃうといいですよ。
window可変の方が最先端の人には評判よかったりしますが


また画像などをfloatさせると分かると思いますが
一部だけfloatすると、その部分が終わると、
その下に残りの部分が
流し込まれます。
■□
□□□
って感じですね。■が画像で□が本文。
□にはfloat指定なしです。
これを完全に2カラムに分けるには
□にmargin-leftを取るか、float:rightをすればいいわけです。


★floatを使う時の注意点。
必ずfloatが終わった時にclearしてください。
じゃないと含有ボックスの背景が表示されなかったり
色々不具合がでます。
A B
ってなっていてhtmlソースに
A
B
って順番に書かれていた場合
Bの後にclearします。


あんまりスマートではないんですが
よくhtmlでfloatが終わったところで
<br class="clear" />て書いてあってcssに
.clear {
clear:both;
}
って書いてあるのはclearの為の記述です。


また他に含有ボックスの背景が出ない場合は
その含有ボックス自体にもfloatを記述して浮かせるという
解決法もあります。結構慣れてきた人向けですね。


★またIE6にはfloatを指定している方側にmarginを取ると
何故かmarginが2倍になってしまうというバグがあるので
出来ればpaddingを取った方がいいです。


●positionレイアウト
もう1つのレイアウト方はposiiton使用です。
positionは大体relativeとabsoluteの二つを使います。
訳せば分かると思いますが、相対と絶対です。
で、どっちかというとabsoluteを駆使する為に
relativeを入れるって感じですね。


absoluteを指定されたものは、他のものとは独立して動きます。
本来なら他のブロックとは重ならないで配置されるものが
まるで2枚重ねた様にabsoluteはすいすい他のものの上や下に
重なることが可能なわけです。
イメージマップに何かを重ねたりするのはこれを使ってます。


absoluteは何もないと画面の左上が0 0になります。
そこからtop:10px;left:10px;とか開始位置を指定するわけです。
ただ含有ブロックにもpositionが指定されている場合
その含有ブロックの左上が0 0に変更されます。


<div id="layout">
<div id="main">
</div>
</div>

となっていてlayoutにもposition指定があった場合
mainにposition:absoluteをするとlayoutの左上が0 0
になるわけです。
これを利用するために起点としたい親ブロックには
position:relative;をいれておくという手段を使ったりします。


私のC-MAPアイフレもどきのカスタマイズに
#layoutにposition:relative;を入れてください
となっているのは
#layout(=窓画)の左上を起点にして
iframeもどきを配置する為です。


positionを指定したボックス同士はcssのz-indexで
重なり順を指定することができます。
数字が大きいほど上に来るので
下に置きたいものはz-index:1;
上に置きたいものはz-index:2;
と書けばokです。position入ってないものには効きません。


ただabsolute使用時の注意としては
absoluteを指定したボックスを親ボックスが含有する時
親ボックスはabsoluteボックスの高さを自動算出しません。
だからiframeもどきを使っていない普通のブログで
どんどん下に伸びてくとかいう場合は、注意した方がいいです。
親ボックスを突き破って下に伸びてったりします。


普通の2カラムならfloat使用
窓画有りのiframeもどきならposition使用
って感じでしょうか。
入門なので大分大雑把な説明ですが
検索時の参考にでもなさってください。


positionと擬似フレームについて、ホイールによる
スクロールの問題についてこちらのエントリをかきました。
あわせてご覧下さい。

| 08:45 | Comment 0 | - |

cssのどこを弄るんだろうという時。

初心者講座です。
htmlは大体分かるんだけど、この部分のデザインは
cssのどこを弄るのか分からない!という時。


cssは


AAA {
●●:▲▲;
}

って感じになってますが
AAAの部分には大きく分けて2タイプあります。


1 .entryや#layoutのように.や#が前につく場合
これはhtml側でclassやid指定がされている箇所に
適用させる為の記述です。


2 ul imgのように前に何もない場合
これはhtmlタグにそのまま直結してます。
<ul>や<img以下略 タグに適用するわけです。


またこれら二つは半角スペースをとることで
徐々に適用範囲を絞ることもできます。
#contents #main .pad
はid名contentsの中にあるid名mainの中の更にclass名pad
に適用させますよ、ってことです。
a imgはaタグの中のimgタグに適用させるってことです。
.linktext liはclass名linktext内のliタグに適用です。
ここまでこんがらがってませんか? ok okって人は続きを。


classやidはhtmlタグの中に紛れて指定されます。
<div id="layout">や<img src="URL" class="pict" />
って感じですね。
で、デザインを変えたい場所があるのに該当css項目が
分からない!って場合はまず、htmlソースをみて
問題の箇所の手前にあるタグを疑います。


<div class="entry_body">ここを変えたいな</div>

って時には.entry_bodyを疑うわけです。
でもここを変えても何にもならない!
って場合は更に親になっている指定を疑います。


<div class="entry">
<div class="entry_body">ここを変えたいな</div>
</div>

ってなってたら.entryが怪しいです!
ただ


<div class="entry">
<p class="entry_author">猫</p>
<div class="entry_body">ここを変えたいな</div>
</div>

みたいになってた場合、
.entry_authorはとりあえず関係がないです。
変えたい箇所とは並列に完結済みですよね。
変えたい箇所は.entryと.entry_bodyの
入れ子の中に入ってますが
.entry_authorの中には入っていません。


ただ二つのものの隙間を狭めたい時などはまた変わってきます。
その時は隣接する箇所の指定も疑わないといけません。
猫と変えたい場所の隙間を狭めたい場合は
猫のmarginやpaddingが影響しているのか、
変えたい場所のmarginやpaddingが影響しているのか、
また二つを内包しているもののline-heightが影響しているのか
全部見て見ないといけません。


これらは実際何度もtry&errorを繰り返すことによって
どこが怪しいのかすぐ分かるようになってきます。
私も何度も、何でこうなるんだろう・・・・ってのを経て
現在に至ってたりするわけです。


これとcssの適用範囲を調べるborder技を組み合わせると
css熟練度が身についていきます。
頑張ってください!

| 16:51 | Comment 0 | - |

とりあえず書き換えてみよう。

よく23のブログ質問板にいるんですが
多分私、回答者としては不親切な方だと思います。
Fxで変に見えてもIE6でチェックして普通なら
指摘しないことが多いですし、
どうしてこうなるのか、ということを回答に混ぜることは
あんまりありません。
(勿論聞かれればお答えしますし、
 このブログの講座カテゴリでは説明してます)


自分で調べなさいとか、仕組みを学びなさいって
いって解説サイトや調べ方を紹介してくれる方が
実は一番親切だということを私は知ってます。
私みたいに、ここをこう書き換えろ、とだけ言っても
何も仕組みも分からないまま書き換えて
次の改装の時にまた同じところで
わかんない!ってなりますからね。
非常に効率が悪いです。言ってて憂鬱になってきた。


私はどっちかというと100人に教えて1人が
cssコーディングに興味を持って勉強を始めてくれる
くらいの結果を期待してます。
cssって面白いですよ。それにプログラミングより簡単です。
(プログラミングも面白いけど敷居高め!)


自分でばりばりやれるようになりたい!
って人にお勧めなのは
とりあえず書き換えてみる。これにつきます。
数字を増やしてみる、減らしてみる。
カラーコードを書き換えてみる。
から始まって、borderをいれてみる
marginを加えてみる
こうやって1個ずつ書き換えて、どうなったかなーって
チェックする。これが一番の近道です。
cssなんて書き換えてえらいことになったりすることは
まずありません。
({}や:;を消しちゃうとえらいことになるけど)


特に数字なんて一番いじるべきところですよ。
23でmarginを調節してください、って言われて
具体的にどの数字にすればいいのか
増減どっちか分からない!なんて考える前に
適当な数字をいれてみてください。
どこが変わってるか分からねーって場合には
極端な数字を入れてみてください。
変になったらまた戻せばいいんです。大したことじゃないです。


私が最初から答を言ってしまうのは
親切ではなく細かく教えるのが面倒だからです。
あちこち弄ってみて、どうしても分からない!
でも答をまるまる聞くのは口惜しい!
って気骨のある方でしたら、
ヒント下さいor仕組み教えてください
ってこのブログで聞いてくだされば拝見します。
まず、とりあえずはあちこち書き換えてみましょう。
答を聞いちゃうより、絶対身になりますよ。

| 16:08 | Comment 13 | - |

letter-spacingに要注意。(IE)

つい最近ご相談を受けたんですが
字間を開けるにはcssでletter-spacingを
指定すればいいわけです。
letter-spacing:1px;とかですね


だけど、大抵の人が使っているIEですと
letter-spacingを指定すると
その部分の行間がおかしくなっちゃうんですね。
行間が狭まったり、2回改行しないと1行空かなかったりします。


そういう場合はcssに


br {
letter-spacing: 0;
}

て書いてください。
一種のバグ対策です。豆知識ok

| 16:53 | Comment 1 | - |

cssの適用範囲を調べよう。

cssを理解し始めて最初に躓くのは
このid or classはどこを指定してるんだろう。。。
ってことかもしれません。
私も今でこそhtmlとcssを見れば、大体どういうページになるのか
予想がつくようになりましたが、最初は他人のソースを
読み解くのに苦労しました。


そんな時に知っておくと便利なのがcssの適用範囲を調べる小技。
cssの調べたい項目に
border:1px solid #000;
って指定しちゃうんです。
そうするとそれが適用されてる範囲に黒枠がでるので
あー、ここのことなのねー、って分かります。


実は今でもチェックの為によくやってます。
私の相方なんかは何色かに分けて同時に複数箇所を
チェックしてたんですが
borderを指定しちゃうのはいい見分け方ですね。


borderを指定したのに黒枠が現れないor四角にならない場合は
・中身が空っぽの上widthやheightを指定していなく
 出力されていない。
・display:none; がかかれている。
・floatがclearされてなくて親要素が子要素を含んでいない。
・子要素がposition指定されいて親要素が以下略
って理由が怪しいです。
あとは単なる書き間違え。


私のテンプレなんかも
#layoutって結局どこなのよ!
って方は#layoutの中にborder:1px solid #000;
って書いてみてください。あーここねーってなりますんで。

| 17:15 | Comment 0 | - |

cssの書き方。

初心者さんはまずこちらのエントリから読んでください。


JUGEMはhtmlにcssを書く必要がありません。
cssはcss専用編集画面があるからです。


cssはhtml側で
<h1 class="site_title"></h1>

<div id="layout"></div>
<img src="" class="pict" />
のようにidやclassの名前を指定し、
それをcss側で装飾します。
idやclass名がつけられてるエリア内は
対応するcssの記述が反映されるわけです。


よくタグ配布サイトや講座サイトで


<STYLE type="text/css"><!--
色々かいてある
--></STYLE>

をhtmlファイル内に書いてくださいってところもありますが
これはJUGEMでは必要アリマセン。
色々かいてあるの部分だけcss編集画面につけたせばいいわけです。
逆にcss編集画面に


<STYLE type="text/css"><!--
--></STYLE>

とか書き込むとちゃんと動かなくなるので注意です。


またhtmlのタグの中にstyle="width:500px;"
のように書くよう勧めてるところもありますが、
これも整理のしやすさからcssファイルに収納すると楽です。
style=""指定を消して、代わりにclass="tekitou"でも指定して
cssファイルにstyle="と"の中身を


.tekitou {
ここに移す
}

という感じですね。


では具体的にcssの書き方ですが、
cssは以下のような記述でワンセットです。


#layout {
width:500px;
margin:1em;
padding:1em;
border:1px solid #000;
}

中身は例です。では説明してきますね。


#layout {

}

これが外側です。これでhtmlからidで呼び出されているlayout
の指定部分という意味になります。
html側ではここで指定したい部分を


<div id="layout">中略</div>

など囲んで呼び出してます。
これが


<div class="layout">中略</div>

のようにclassで呼び出す場合は、cssの方は


.layout {

}

と#から.になります。
idとclassの違いは
idは全体で1個しかないもの。classは何度も使うもの
の違いです


ここまでいいでしょうか。では中身を見ていきますね。
中は


width:500px;

のように ▲▲:●●;
という行が並んでます。
これは▲▲は●●でお願いしますよ、おしまい。
と言う意味です。:がbe動詞のようなもので、;が区切りですね。


どんな▲▲があるか、▲▲にはどんな指定ができるかは
リファレンスサイトなどをみればのってます。
では続きにて代表的なものを紹介しますね。

read more...

| 16:00 | Comment 55 | - |

cssを使おう。

JUGENはxhtmlとcssの両方が編集できるようになっています。


cssって何?という方。
cssはとーっても便利なんですよ。


JUGEMのblogはhtmlとcssの両方で出来ています。
htmlはこういうものを書き出すよ!という実際の内容や
その枠組みの構造を書いているものです。
じゃあcssは何かというと
デザイン全般を担当しています。


これをあそこにおきたいとか、右に寄せたい中央に寄せたい
色を変えたい背景をつけたい幅を変えたい線をつけたい
みーんなcssです。


数年前はそれでもhtml内にfontタグでデザイン指定とか
一般的にされていたのですが、
最近はそういうやり方はどんどん消えていってます。
HPを見るためのソフトがどんどん新しくなって
それらがcssの力を発揮させてくれるからです。
一方古いやり方はいまいち、ちゃんと表示されなくなったり
なっていくそうです。


じゃあhtmlとcssの関係ってどうなってるの?
という方、htmlを見るとタグの中に
class="なんとか"とか id="なんとか"とかありませんか。
それがcssと連動しています。
htmlでここのタグはこのclassね!とすると
css側でじゃあそのclassはこうするよ!と受け取ります。


たとえば
<div class="linktitle">Archive</div>
とhtmlに書かれていた場合、htmlはArchiveという文字を
表示するまでがお仕事です。
一方cssは
.linktitle {
color:red;
}
と指示を受け取って、その文字色は赤にするよ!
と働いてくれるわけです。


classで呼び出されるものはcssでは.(ピリオド)から始まり
idで呼び出されるものはcssでは#(シャープ)から始まります。
だからテンプレカスタマイズの時に
htmlのこの部分は何てcssが担当しているんだろう、って
対応する項目をcssで探すと色変えが簡単にできたりします。


htmlでfontタグを使ってデザインを変えたりすると
1箇所1箇所にかかないといけませんが
cssを使えば、全部、ここはlinktitleに任せた!とだけ
htmlに書いておけば
cssのredをblueに書き換えるだけで、自動的に
全部変更してくれるわけです。
便利ですねー。


htmlでデザインを行わず、cssに任せたサイトは
軽かったり、検索にかかりやすいという話もあるので
cssを頑張って活用してみましょう!


ちなみにJUGEMはhtml内にcssをかかなくても
css編集boxに書けばokです。
説明サイトではhead内に挿入してね、ってところもあるかもしれませんが
cssなら無視してcssboxに書けばokですよ!
具体的なcssの使い方はまた次回!

| 18:59 | Comment 0 | - |

+ 1/1PAGES +