2011年11月10日

CSSの編集には、どのエディタを使う?

CSSの編集に、一体どのエディタを使うと便利なのか?といった感じで検証してみたわけですが、CSSスタイルシートの編集にもそれぞれ好みがあると思います。

  • オンラインで編集する、ジェネレータ系
  • WYSIWYGタイプっぽい、イメージしやすい初心者向けのタイプ
  • ゴリっと、テキストエディタ(ただし入力補完あり)

 ザッと考えてみると、以上のような感じですが・・・個人的にWYSIWYGタイプ的なCSS専用のエディタは使ったことがありません・・というか、興味がない。

 基本的に筆者の場合は、テキストエディタ【入力補完付き】で作成する場合が殆どで、今まで特に苦労した試しがありません。
というか、オフラインでも使えるのがテキストエディタですたい。


 そんな使い方にマッチしているエディタは、意外と種類が多い
というのが実情でして、CSS編集に関しては便利な事この上ない。


 もちろんCSS2.1止まりではなく、CSS3.0までカバーするには、辞書の編集が出来る、テキストエディタでないと困るじゃろ?というのが正直な感想ですがね。

で、使える候補を、簡単にドバッと書きだしてみると・・
 
Mana(真魚)

シンプルで.extフォルダの中にcss.textという辞書ファイルを設けていればCSSの編集時に、簡単に入力補完を呼び出せるので、かなり便利だと思います。

oedit&otbedit

標準ではCSS編集モードがないので、チョィとコツが必要ですが、dataフォルダの中に、css.cfgファイルとして設定ファイルを作成し、辞書は.txtで作成すれば、全く問題なしで入力補完が行えます。

Mery

基本的にはMana(真魚)と同じで、編集モードも標準であるため、辞書の充実さえ出来ていれば、全く問題なく使える。

Mk Editor

CSS編集モードを設定して、辞書ファイルをキチンと指定してやれば、問題なく仕えるレベルです・・・が実は筆者は好みではない。

Sakura Editor

これもMk Editorと同じ感じで設定してあげると、働いてくれますが・・全くエディタそのものに触れる機会が少なかった人ですと、高機能なだけに最初は設定項目だけでかなりの時間が必要になるかも知れませんね。

 とまあ、勝手なことを言っているのですが、個人的に使用率が一番高いのは、あまりメジャーではない真魚とかoeditなんかが活躍してくれています。

 Meryも機能としては、同じなんですけど、マクロの登録でHTMLエディタと化してきている傾向が強いもんですから、現在はoeditを使うことが多いですね。

 で・・最初に悩むdataフォルダ内のcss.cfgファイル作成ですが、コピペしてしまえば簡単ですから、ここに記載しておきますね。

【oedit&otbeditのCSS編集モード追加用css.cfg】

 
// language setttings for css
KeywordNocase:TRUE
KeywordFile:css.txt
OpenComment:/*
CloseComment:*/
RowComment:
BreakChars: ,.:;(){}[]'"=><-|&*+-/%!^
OperatorChars:=!&|^~*/+-%<>;:.,(){}[]
BracketChars:)}
QuoteChars:"'
EscapeChar:\
LanguageKeywordChars:#{};:"
CStyleIndent:FALSE
TagLanguageMode:FALSE
 

 加え忘れてはいけないのが、language.txtファイルの作成です。

languagedefault.txtというファイルがあるのですが、こちらは編集してはいけないファイルですから、新たにlanguage.txtというファイルも同時に作成するわけですね・・エッ(゚Д゚)理由ですか?

 それはoeditエディタの編集モードに、しっかりとCSSの表示をさせるためなんですよ。

language.txtの内容ですが

// oedit language settings←当然otbeditでもいいわけです。
Text,Txt,text.cfg,*.txt
Html,Html,html.cfg,*.htm;*.html;*.shtml
CSS,CSS,css.cfg,*.css
PHP,PHP,php.cfg,*.php
JavaScript,JS,js.cfg,*.js;*.dms
C++,C++,cpp.cfg,*.cpp;*.c;*.h
Java,Java,java.cfg,*.java
Perl,Perl,perl.cfg,*.cgi;*.pl
SQL,SQL,sql.cfg,*.sql
Visual Basic,VB,vb.cfg,*.vb
Scheme,SCM,scm.cfg,*.scm


 ちょっと関係ない編集モードもありますが、まあ(゚ε゚)キニシナイ!!

 上記の部分をコピペして、oeditエディタのdataフォルダの中に、css.cfgとlanguage.txtという2つのファイルを保存してから、oeditもしくはotbeditを起動させてみてください。

しっかりCSS編集モードが追加されているはずです。

oedit.png

 そうしたら、同じdataフォルダ内にcss.txtという辞書ファイルを作成しておけば、CSS編集なども行うことが可能になります。
タグ:CSS
posted by アラフォー親父 at 18:30 | Comment(0) | TrackBack(0) | CSS | このブログの読者になる | 更新情報をチェックする
2011年04月30日

CSS3はボタン画像がいらん(●´⌓`●)

 なんですかね、未だにIEがCSS3の対応が遅れているもんで、

実装したくても、PCサイトでは中々上手くいかんだろ!というか

メンドクサイ事この上ないという状態です。

【ほんと、IE6の頃から、CSSにはIEハックを適用するしかないのです】

simi.png
 

 そんなもんですが、やはりCSS3の魅力は多大ですので、

使える処で、何だかんだと使い倒すしか方法がないわけです。


 特に筆者が気に入っている部分は、

CSSだけで、ボタンの作成が出来たりするといった部分です。


 何と言ってもね、今までの手順を考えたら・・


  1. ボタンに適した画像を作る【影入れたり、レイヤーを何枚も重ねたり】

  2. HTMLにはinput type="button"などの、長ったらしいフォームを作ったり

  3. CSSでは、ボタンの配置位置の指定位で・・それ以上は・・・


 そんなこんなでしたので、ボタン一個だけでも時間はかかるは、

いいと思っても、プロの人なんかは、

優柔不断なクライアントにかかると、そりゃ〜もう、やり直しの嵐

mikusyoke.png

 ところがCSS3では、画像が不必要になりますので、

使い方さえ間違えなければ、その場で修正をかます事ができます。


 まずは、border-radiusを使って、ボタンにする画像をまる〜く

いわゆる「角丸画像と同じ」ようにしてしまいます。


 そしてbox-shadow …… ボックスに影をつけるを使って、

ボタンらしく見えるようにしてしまいます。


マウスオーバーした時に、画像に変化が起きるようにrgbaを使って

色を調整・・・ん?よく判らない?

rgbaのa値は、1へ数値が近づくほど透明になりますので、

その辺りは0.6〜0.9の間で調整してみたらどうでしょう。


で、今までjQueryが無いと、実装できなかったアニメーション系は

transitionプロパディを使って、何とかしてしまいます。


 それから、ボックス内部のテキストにも、text-shadowを使って

見た目をボタンらしくしてしまえば・・いいよね。


で、サンプルソースとして下にグダグダと
yu.jpg

html { font-family : verdana, sans-serif; }

body { min-width : 480px; }

ul li {

list-style-type : none; }

ul li a {

display : block;

width : 300px;

padding : 8px;

border : 3px solid #fff;

color : #fff;

font-size : 24px;

text-align : center;

text-decoration : none;

background-color : orange;

text-shadow : 0px -1px 0px #ccc; /* FF4.0+, Opera 9+, Saf1+, Chrome */

border-radius : .5em;

-webkit-border-radius : .5em;

-moz-border-radius : .5em;

box-shadow : 0 0 5px rgba(0, 0, 0, .5);

-webkit-box-shadow : 0 0 5px rgba(0, 0, 0, .5);

-moz-box-shadow : 0 0 5px rgba(0, 0, 0, .5); }

ul li a:hover {

box-shadow : 0 0 8px rgba(0, 0, 0, .8);

-webkit-box-shadow : 0 0 8px rgba(0, 0, 0, .8);

-moz-box-shadow : 0 0 8px rgba(0, 0, 0, .8); }

ul li a:after {

content: "\00BB";

padding-left : .5em; }

ul li a {

-moz-transition: -moz-box-shadow .4s ease-out; /* FF4.0+ */

-o-transition: box-shadow .4s ease-out; /* Opera 10.5 */

-webkit-transition: -webkit-box-shadow .4s ease-out; /* Saf3.2+, Chrome */
 

上のCSSを、このHTMLタグに適用させればOKですな。

<ul>

<li><a href="">ボタンです</a></li>

</ul>


 適用しても、動かんという人は、IEです・・以上【FireFOXで見てね】。
タグ:CSS3
posted by アラフォー親父 at 19:21 | Comment(0) | TrackBack(0) | CSS | このブログの読者になる | 更新情報をチェックする
2010年06月12日

CSSで覚えておきたいチョットしたコツ!

 CSSスタイルシートを制作する時に、これは覚えておくと便利だぞ!
といった感じのコツを少し書いておこうと思います。

margin:0; padding:0;
margin:0; padding:0;と設定しておけば、とりあえずIEやFireFOXなどのブラウザ標準で設定されている余白を無くす事ができます。ブラウザごとにこの余白の設定はまちまちなもので、まず筆者の場合は最初は0という事にしています。
(デザインで違う事もありんす)
line-height:1.4;
行間の設定は、line-hightで指定しますけど、値の1.4という数値は、モニターで文章を読むときに、人間が一番読みやすいと言われている行間設定になりますねぃ
(まあ・・一般論ですけど)
font-size:0.9em;
12pxとか14pxとかpxで指定される方も多いかと思われます。実際筆者も最初は12pxを基準にしていましたね。しかし1em位に設定しておくと、ブラウザの標準設定では、実際には16pxで表示されるようです。
(%表示はどうなんだ!というのは横に置いておいて・・・)

 簡単な事なのですが、このfont-sizeに関しては、日本語のような2バイト文字ですと(S-JIS系ですね)16pxにいしてしまうと、チョイデカになってしまいますので、0.9em位に設定しておきます。
なんで?という理由ですが、16(px)×0.9(em)=14.4(px)ですから
(掛け算ですがな)
ブラウザの設定を変更していないユーザーさんやPC買ったばかりの人なんかの目には、14.4pxという大きさで表示されてる事になるわけです。

 まあ・・これがfont-familyの設定を、単純にArial, sans-serifで指定しておくとHONDAのCMになるのですけど・・・MSPゴシック Osakaなどが加わる場合は、少しデカクなっちゃいます。
 font-familyは置いといて、sizeとmargin:0; padding:0;は使えると、勝手に思っているわけなんですがね・・・どうでしょうか?
タグ:CSS
posted by アラフォー親父 at 19:00 | Comment(0) | TrackBack(0) | CSS | このブログの読者になる | 更新情報をチェックする
2010年05月25日

アイコン画像をリストで使う時

 まあ〜なんだかんだで、このブログの更新をサボっていたアラフォーなのですが
久しぶりに、忘事録的な意味合いを込めて、CSSスタイルシートでの

値の設定について書いておこうと思います。


 現在一般的になっている、XHTML+CSSスタイルシートの組み合わせで、

特にmarginやpaddingの指定などで、必ず値を設定しますが・・

値の個数で、どこを指定するのかという或る決まりがあります。

 すなわち!(なんか古風な言い回しですが)



値が一つ

「上下左右」といった、全てにその値がが適用されます

値が2つ

「上下」「左右」にいう感じで、値が設定されます

値が3つ

正直、あまり使う事はないかもしれませんが、「上」「左右」「下」といった設定です。

値が4つ

筆者が時々混乱してしまうのですが、必ず「上」「右」「下」「左」といった順番で値が指定されます。


一番良く使うのに、一番筆者が間違うのが、最後の4つ指定の方法でして・・
(単に、しっかりしていないだけですが)

時々、「あれ?最初の指定は、左だったっけ?」となりやすいのですが、これも筆者だけでしょうから、上から始まって時計回りに指定していく!という覚え方でいいと思います。


 時々<ul>指定などに、アイコンを用いる場合など、

どうしても、ulの部分をpadding指定したりするのですが・・

 例えば簡単な指定として(ちょいとした小技ですがな)


#main ul {

list-style: none;/**リストの指定はプラウザに依存しない(none)という意味です**/

}



#main ul li {

margin-top: 10px;/**マージン上は10px取ります**/

padding:0 0 7px 25px;

/**paddingの間隔は上が0、右0、下に7px、アイコンの大きさが18px幅あるので、とりあえず25pxほどpaddingの間隔を開けます**/

background: url(imges/Marker.png) no-repeat 0 0;/**アイコン画像の指定を行います**/

color: #014701;/**ここはul,liで指定した箇条書き文の色です、フォントの色ですね**/

}


 こんな感じで指定すると、箇条書きリストの項目に、普通の●ではなく、アイコン画像を利用して指定を行うのです。

 そこで、paddingでアイコン画像の幅+スペース+文字の開始位置分のスペースを確保しておくために25px程度の幅を利用したわけです。この幅は、色々試してみて下さい。

といった具合にしておくと、ulで指定するリストタグの開始位置に、自分が使いたいアイコン画像を使う事が出来ます。

このpadding指定の際に、先に説明したとおり、指定開始位置がコンガラガッテしまうと、筆者と同じ様に「あれ?」となってしまいますので、賢いブログ訪問者の方は真似をしないで下さい(笑)

タグ:CSS
posted by アラフォー親父 at 19:27 | Comment(0) | TrackBack(0) | CSS | このブログの読者になる | 更新情報をチェックする
2010年05月03日

リスト・スタイルタイプの指定方法

 どうしてもGWに入りますと、ブログの更新などにやる気が出なくなってしまいます。
つまり、モチベーションの低下というやつです。


 しかし、そうも言ってはいられないので、多少ながらも役に立つ事をと考えました。

 前回はborder-styleについて記載したので、

今回はlist-style-typeについて、スペル間違いをしない様に記載しています。



  • ● : disc

  • ○ : circle

  • ■ : square

  • 1,2,3... : decimal

  • i,ii,iii... : lower-roman

  • I,II,III... : upper-roman

  • a,b,c... : lower-alpha

  • A,B,C... : upper-alpha

  • マークなし : none


何も指しなければ、このリスト・スタイルでは、<ul>では小さな点、

<ol>では、数字番号となっているのですが、ちょっと変えたい時などは、

この項目を覚えるか、PCにテキストとして保存しておくなどすれば、

以外と便利に使えます。


 ま〜今は、リスト項目にアイコンをくっ付けて、(つんまりnoneという事)
番号リストでも、アイコン画像を使って、使い分けをしたりすることもあります。

 (これ・・定義リストでも、同じ様にアイコン画像などを使いますね)

まあ・・また細かい指定方法は次回にといった感じでしょうか・・。

タグ:CSSリスト
posted by アラフォー親父 at 10:31 | Comment(0) | TrackBack(0) | CSS | このブログの読者になる | 更新情報をチェックする
2010年04月28日

ボーダースタイルは、どんな決まり?

 スタイルシートを作っている時に、「あれ?ドットのスペルは・・」

というような事になりがちな筆者なのですが、

CSSを作る時にメインで使用しているCrescent EVEですと、

プロバディは入力補助が効いているのですが、

値については自分で記入しなければいけないので、

このスペル違いのせいで、後から修正という事をよくやらかしてしまうのです。


 そんなわけで、スペル間違いにならない様に、忘事録的な感覚で記載してみました

罫線のborder、border-style


  • : none /**無し**/

  • : solid /**実線**/

  • : dotted /**点線**/

  • : dashed /**粗い点線**/

  • : double /**二重線**/

  • : groove /**谷線**/

  • : ridge /**山線**/

  • : inset /**内線**/

  • : outset /**外線**/


ちなみに筆者は、これらの値はMeryの辞書Tera Padのツールで使用している、Tera Pad HYPER HTMLに記載して使っています。

タグ:ボーダー
posted by アラフォー親父 at 20:50 | Comment(0) | TrackBack(0) | CSS | このブログの読者になる | 更新情報をチェックする
2010年03月26日

CSSで行間の調整に悩んだら・・・

 ということで、久しぶりにCSSについて記事にしてみます。

 WEBぺーじを作っている時に、な〜にも指定しないと

行間は少し詰まって見えてしまいます。


 そんな場合のCSS調整方法は、


  • line-height・・・・行間調整

  • letter-spacing・・・文字間の調整


 ほぼこの2つの指定で何とかなるわけなんですね。
 
tu.jpg

 

 まずはline-heightを調整する時のコツですが、

基準として考える事に、そのサイトでどんなフォントの大きさにしているのか?
という事が重要になってきます。


 例えば、一般的な12pxのフォントの大きさですと、

line-heightは12pxよりも大きくしなければいけません

 そうしないと、文字が重なったりして、文章が読めなくなるわけです。

 つまり、文字が重なってしまった時は、

このline-heightを大きくして解決するわけです。


 基準はフォントサイズよりも大きく設定しておく!

という事です。



  • フォントが12pxならば⇒line-height18pxにしておくとか

  • フォントが1emならば⇒line-heightを1.6emにするとか

  • フォントが100%ならば⇒line-heightを175%にしておくなど


 通常フォントで指定していても、<h2>タグの場合などで、

フォントを大きくしている時などは、気持ちもっと大きめにしておくと

非常に見やすいサイトになるわけです。


 もう一つのletter-spacing・・・文字間の調整ですが、

これは何も指定していないと、当然初期値の0という事になります。


で・・画像中心のフォトサイトでしたら、そんなに問題はないのでしょうが

テキスト中心のサイトですと、途中でフォントの特徴が変わるとか

(太字や色・大きさ)

特に指定してがなく、同じ調子でフォントが続くと、

どこに特徴(注目していいのか?)があるのか?わかりにくい文章として感じてしまいます

(内容が大変参考になる場合でもです)

 そこで、文字と文字に少しのスペースを開けてあげると

特に指定の無い場所でも、文章の読みやすさが違ってくるわけですね。

letter-spacing・・・文字間の調整で使う値は、

あまり極端にしないと覚えておくと便利です。


 等幅フォント並みに、極端にしてしまうと・・

 言わなくても分かりますよね。


 そんなわけで、自サイトが見にくいと感じたら

line-height中心で調整する事をお奨めしておきます。

タグ:CSS
posted by アラフォー親父 at 19:42 | Comment(0) | TrackBack(0) | CSS | このブログの読者になる | 更新情報をチェックする
2009年12月10日

SeesaaブログのCSSに施した事

emとiは見た目はイタリックでも意味が違います

 最近ぼやきすぎているせいか、どのネタをブログに書いておこうか多少迷いも出ていますが、
このSeesaaブログのテンプレートに施した部分を書いておこうかと思います。

 その前にといっては何ですが、タグの中で<i>と<em>がありますが、この2つは見た目が
同じイタリック(斜体)になっています。
が、しかし・・・見た目は同じでも、意味合いが全く違ってくる事は知っていますよね。

 それに加えて<i>は、実は物理要素になっていて、HTML文法の基準を決めているW3Cでは
物理要素は“非推奨”とされている事は知っておく必要があります。
そんなわけで必然的に<em>を使う事になるのですが、意味は強調ですが、そのままでは
当然のように斜体になってしまいます。
 ちょっと使いにくいですよね。    そこで・・・・

 CSSスタイルシートに、細工を加えるわけですが、これは簡単なので覚えておくと便利です。
 あくまでも、一般的な例として挙げておきます。
  •   em {
  •   font-style: normal;   /*フォントを斜体にしない*/
  •   font-weight:bold;   /*フォントの文字を強調らしく、やや太く*/
  •   color: カラーコードで色を変える;  /*色を変えて見栄えを変える*/
  •   }

 と、こんな感じでスタイルシートに加えておきます。
するとこの文章のように色が変わり、斜体が消えやや太い文字になります。

 このパターンで、もっとも強調になる、<strong>も簡単に変更出来ます。
変えるとしてもemと違う色にするくらいでしょう。

  •   strong {
  •      color: #コード;
  •      }

 これだけで、例えばこの様に色を変える事が出来ます。
個人的にはemの斜体が無くなり、strongタグとは違う形で使えるのがメリットになると考えています

 seesaaの場合ですと、スタイルシートの上からすぐの部分にある#containerの下
   a{  〜  h1{ の間にいれておけば、このブログのようになります。

posted by アラフォー親父 at 10:51 | Comment(0) | TrackBack(0) | CSS | このブログの読者になる | 更新情報をチェックする
2009年11月06日

IE対応CSSハックの書き方

 久しぶりにCSSの話題といいますか、スタイルシートの技について記載しておこうと思います。
 つい先日、CSS3について触れましたが、日曜日にFireFoxがまたまたアップグレードしてしまいましたね。
 (IEに比べて早い事と言ったら・・)
 
 とまあ、前振りはこの位にして
 今回はCSSハックについて記載しておこうかな?と考えました。
 
 CSSハックと言っても、基本的にはIE対策といった方が適当なのですが、CSSサポートの良くないIE6・7に対する対策みたいなもんです。

 この二つのプラウザは、シェア範囲が広いので、どうしてもターゲットプラウザから外す事が出来ないのですが、
 CSSへの対応度がイマイチ・・・

 まずはIE7のみCSSファイルを適用させる為には

 <!--[if IE 7]>
 <link rel="stylesheet" type="text/css" href="css/ie7.css" />
 <![endif]-->
 
と、このような記載が必要です。
 
 これに直接CSSソースコードなどを記載したり、Javaを記載したりする事もありです。
 例えば
 
 <!--[if IE 7]>
   <style type="text/css">
     body{ color: #000000;
   }
   </style>
 <![endif]-->

 と、いった感じで直接記載していく方法ですね。
 
 この条件コメントでは「特定バージョン」「以上」「未満」という感じで柔軟に行う事が出来ますが

 Mac版IE5には実装されていないので、効果が出ない

 IE5.5を指定する時は、「IE5.5000」としなければいけない
 
 という注意点があります。
 
 特定バージョンへの記載方法は先に例を書きだしましたが
 
 特定バージョン以上の書き方は

 <!--[if get IE 7]>
 <link rel="stylesheet" type="text/css" href="css/ie7-8.css" />
 <![endif]-->
 
 この場合はIE7・8でCSSが読み込まれるという内容です。

 if get IE バージョンで、「・・以上」というわけです。

<!--[if lt IE 7]>
 <link rel="stylesheet" type="text/css" href="css/ie6-5.css" />
 <![endif]-->
 
 この記載方法ですと、IE7以下のIE6とIE5を対象にしています、という内容になり
 if lt IE バージョンで、「・・未満」という意味になるわけです。
 
 IEのCSS対応がきちんと出来ていれば、こんな記載は必要ないのですが、致し方ありませんので
 CSSスタイルシートを作って、確認したらOK・・・しかし確認プラウザがIEでは無い

 プラウザでの確認をFireFoxで行っている場合などは特に、このIEハックを記載し忘れる事があります。
 Webデザインを行う場合、やりがちなので(筆者だけ?)忘れないでおきましょう。

 
posted by アラフォー親父 at 10:23 | Comment(0) | TrackBack(0) | CSS | このブログの読者になる | 更新情報をチェックする
2009年10月27日

CSS3.0という規格とは?


 前回HTML5について少しばかりお話させていただきましたが、プロの人達は当然対応しているわけですよね?

 それで今回は再びCSSの話題について、小耳にはさんだお話をばと考えました。

 現在CSSの規格で一番使われているのが、CSS2.1という規格なんです。
ここでプラウザの対応度についてのデータですけど、FireFox・safari・Opera・というプラウザは早々に対応が済んでいました。

そうです、終わっていたんです・・・・・

 ところがIEの方はといえば・・・XPに標準装備されていたIE6ではNG。VISTAでの標準装備だったIE7でもまだまだ・・(オイオイですけどね)

 Win7が発売される前に、IE8が登場してやっとこさ追いついたという状態です。

 まったく昔のTV・CMでありましたが、MAC君パソコン君と同じですね・・・。


 そこでCSSの方なのですが、既にCSS3.0という規格が誕生(まだ正式ではないのですが)してしまい、これまた当然のごとくFireFox・safari・Operaなどのプラウザは早々に対応済み!
 IEはどうするんですかね?まだまだみたいですけど・・・・

 
それでこの新規格のCSS3.0ですが、メリットが多大にあります。というかあるんです。

 従来でしたら、JavaScriptを使用しなければ不可能だった事が、HTML+CSSで実現出来てしまいますので、スマートフォンなどのWebプラウザ表現力がかなり向上していきます。

 しかし現在IE6やIE7でインターネットに接続している人は、まだまだ多数存在しています。

 小型端末の方がデザインやWeb表現力がドンドン向上してきている実態がありますので、キャパに余裕があるパソコンの方で、プラウザを今一度再考してみる必要が出てきているのではないでしょうか?

 つまり、最新のプラウザで見るインターネットと、ちょい昔のIEで見るインターネットでは、もしかしたら全然違って見える事が、これから増えてくるというわけなんです

 これはまずiPhineユーザーが増えてきている事も関連が無いとは言い切れませんので、ますますサイトデザインの重要性などが高まってくると思われます。(なんかニュースの解説みたいですが・・)

 今までのCSS2.1とCSS3.0の違いといってはなんですが、まずはセレクタの種類が増えています
 CSSについて理解していないと、もう訳が判らん状態ですけど例えば
属性セレクタがEであると、これは要素Eがその属性attributeを持っているのですが、CSS3.0ではこれに加えてその属性値valueが前方一致で含まれるという事まで含まれてきます。
 (もう全然解らなくなりそうですけど)
 記載方法は
CSS2.1                                  CSS3.0
a.title{                               a.[title^="BP"]{
        backgraund: #ffffff;                    backgraund:#ffffff;
}                                                 }

 とまあ、こんな感じで変化していきます。
  もっと実践的な例ですと
/*CSS2.1では*/
a doc {
      padding-right: 12px;
      backgraund: transparent url(icon_doc.gif)no-repeat center left;
}
/*CSS3.0では*/
a[herf $="doc"] {
      padding-right: 12px;
      backgraund: transparent url(icon_doc.gif)no-repeat center left;
}

 といった感じで、セレクタの表記が違ってきます。

 記載方法が若干違ってくるので、「また覚え直しかよ!」とつい考えてしまいますが・・

 CSS3.0では、新しいプロバディも登録されていますので、例えば色の透明度まで設定することが出来ます。
 ぶっちゃけOpacityという指定方法になるのですけど・・・
正式なリリースはまだまだなんですけど、他にも可変ボックスが設定出来たり、今までアイコン画面を作って対応していた影付きアイコン(box-shadow)が設定出来たりと、完全にユーザーインターフェースの向上目的のプロバディが追加されてきます。
 個人的にはJavaScriptまで手が回っていなかったので、CSS3.0の規格には早いとこ慣れておいた方が、JavaScriptを覚えなくていいかな?と、ズボラな性格丸出しのコメで締めたいと思います(笑)

タグ:CSS3.0
posted by アラフォー親父 at 20:57 | Comment(0) | TrackBack(0) | CSS | このブログの読者になる | 更新情報をチェックする
2009年10月23日

CSSで使いやすいエディタってあるの? あるんですね〜これが。

 cssでのサイトデザインに慣れてきますと、今までのエディタでは役不足かな?と思えたりしてきます。 
 そんなわけで、CSSを入力しやすいエディタを紹介していませんでしたので、ご紹介しておきます。

1・Crecent Eve
 文句なしで一番です。入力補助の優秀さは特筆者で、CSS入力にかんしては現在8割の使用率です。

 長所は素晴らしいので、何回も紹介していますが、当然使いにくさもあります。

 それはCSSの値を入力する時ですね、値の候補は出てきませんので、自分で入力する必要があるだけですから、一般的に使う値を覚えれば、全然OKです。

2・この値の入力がしづらい面をカバーできるかな?と思うのが、manaとmaryの2本のソフトです。

Ctrl+spaceで入力補助が出てきますので、これが大変使いやすいわけですね。

またこの入力補助ファイルは、txtファイルになって収められていますから、自分で編集が出来ますから、これまた便利なわけです。

3・裏技にあんるかもしれませんが、へてむるクリエイターとHTMLプロジェクト2の登録タグにCSSの要素をいれておく方法もあります。
 意外と使用しやすいので、へてむるを使い慣れた方にはお勧めの方法です。

4・スタイル・ノートを使う。
Vectoer・ダウンロードソフトの種類で、インターネット通信の項目で、HTMLエディタの部類を検索して、いくつものエディタが出てきますが、この表示の上にJavaやDHTML・CSSが出てきます。
この項目をクリックすると、スタイル・ノートが一番上にでてきますが、これもCSSでは使いやすいとおもいますよ。
 ただし文字コードの選択範囲が狭いので、S-jisは問題なしですがutf-8でスタイルシートを作ろうか?と考えた場合は、ちょっと使いづらいですね。

そんな感じですから、ちょっと参考までに・・。
 
posted by アラフォー親父 at 15:05 | Comment(0) | TrackBack(0) | CSS | このブログの読者になる | 更新情報をチェックする
2009年10月12日

CSSプロバディの基本的な考え方


 プロバディとは・・?初めは、もう解らねぇ〜よこんなの!といった感じに私はなりました。

 つまり、リファレンスを先に見て、何の意味があるのか訳が判らないといった感じになりましたのです、

 しかし手元に紙(用紙)があると、大変解りやすくなってきます。

 まずはXHTMLとCSSは連携しているという事は、説明させていただきましたが、このXHTMLの色々な要素は、それぞれ要素の領域があります。

 この要素が及ぼす範囲は、○や△ではなく□の範囲内で「ボックス領域」という事に決まっています。
 レポート用紙やB5の紙、おりがみなどを思い浮かべてもらえると、解りやすいと思います。
 
 つまり、背景などを、A4サイズの紙とすると、少し青みがかったB5の紙をcontent(コンテンツ・内容)として、A4の紙の上に置くと考えて下さい。

 このB5の紙のにあたる部分の事を、border(ボーダー)と呼んでいます。

 縁がありますから、B5の紙いっぱいを使って、文章は書けませんので、少し余白を作ると見やすくなります。

 この余白の事を、padding(パディング)として指定します。

 あとはA4とB5の紙を重ねていますから、このA4とB5との紙を重ねた余りの部分を、margin(マージン)として考えますと、このプロバディが判りやすくなります。

 B5用紙の内容には、折り紙の文章が入ります。この折り紙の始まりの位置をどこからに指定するのか(始まりの位置ですね)で、高さのheightを用いて、始まりの位置を指定します。

 折り紙サイズの横幅は、widthで指定します。

 初めは、値とかうんぬんとか考えずに、紙を重ねる!という感覚を持って頂けると、CSSの構造が解りやすくなると思いましたので、プロバディとはなんじゃらほい?の原点として、押さえておいて欲しい構造になります。 
posted by アラフォー親父 at 22:42 | Comment(0) | TrackBack(0) | CSS | このブログの読者になる | 更新情報をチェックする
最近のコメント