Recent Entries

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

[CSS Naked Day] 今日は裸になる日だそうです。

今日はCSS Naked Dayだそうです!
CSS Naked DayはCSSを脱ぎ捨ててWebサイトが裸になる日です。
知ってしまったので参加します、でも、なんか恥ずかしいな(*´д`*)

CSS Naked Day

というわけで、外部スタイルシートのリンクを外します。

<link rel="stylesheet" type="text/css" href="<%css_link>" media="all" />

ほー、久々に我がブログの裸を見ました。あまりセクシーじゃないですねぇ。
リストに点線が入っているのは、タグにstyle属性を使っている為です。(修正)
所謂手抜きってやつです。プラグイン部分なのでつい…。

また、プラグインタイトルもセンタリングされてます。(修正)
これもプラグインの「&align」をそのまま使っているからです。
まぁ、文章は段落タグとか付けてるので何とかみれるようですけど。

CSS Naked Dayの意義

さて、CSS Naked Day(ネイキッドデイ)の意義についてですが、私も今日知ったばかりなので下記サイトより引用してみました。
今年の「CSS Naked Day」は4月9日に開催 at ブログヘラルドより。

ウェブ標準を称賛することが目的である。 このイベントの目的は、明確でシンプルなウェブ標準をプロモートすることである。この中には、(x)htmlの正しい使い方、セマンティックなマークアップ、良質な階層構造、そして、古き良き言葉遊び等が含まれている。まさに<ボディ>を見せびらかすイベントである。 最高のデザインとは、スタイルシートを読み込めない可能性がある別のデバイスを使っている閲覧者にも、気を配っているデザインである。

CSSを脱ぎ捨てても綺麗なボディ(<body>)でいれるかしら?って事ですね。違うか…。
CSSでHTMLとデザインを分けてあれば、外してあってもちゃんと見えるもんです。
CSS Naked Dayではマークアップの大切さを再確認できますね。

さて、私もプラグイン部分を見直そうかな。
CSS Naked Dayは自分のブログやWebサイトを見直すいい機会になりますよ。
いやぁ~スッキリしてて結構いいかも。

スポンサーサイト

超簡単!CSSで画像にシンプルな枠をつける方法

ブログに載せる画像は枠を付けてあげると綺麗に見えます。
ちょっとしたひと手間で画像が綺麗に見えるなら…と思って画像ソフトで枠作りしました。
でも、意外と枠作りって面倒くさかった…。みたいな。

そんなあなたにお勧めの、超簡単・超適当なCSS技をご紹介します。
この技を使えば画像ソフトで枠を付けなくてもOK!うまく使えば、ブログに貼り付ける画像に常に枠を付ける事もできます。また、外す事も容易です。
まずは下の画像をご覧くださいませ。

CSSで枠を付ける前の画像。なんか味気ないですねぇ。
画像に枠を付けない

CSSで枠を付けた画像。ひと手間かけた風だけど超簡単。
さりげなさを重視して色を控えめに設定するとCool!
画像に枠を付ける

上の画像のソース

<img src="http://blog-imgs-24.fc2.com/m/i/r/miracleblues/kumo.png" alt="画像に枠を付ける" style="border:solid 1px #ccc;padding:4px;" />

こんな感じのシンプルな枠なんですけどいかかでしょう?気にいった方は続けて読んでね。
基本的にシンプル枠です。色、幅など少しは弄れますが、もしも豪華な枠が必要になった場合は迷わず画像ソフトを使ってください。
個人的には単なるボーダーを付けるのならばこちらの方がイイ感じだと思いますよ。

CSSで画像にシンプルな枠を付ける方法

方法はいくつかあります。でも、やってる事は同じです。
要は画像にCSSでborderとpaddingを指定できればいいのです。
(padding部分は背景の色が適用されます。)

方法1

imgタグに直接スタイルを追加する。(border + padding)
特徴 : その都度、枠を付けるか付けないかを決めやすいが、外部CSS化と逆方向…。

style="border:solid 1px #ccc;padding:4px"

※線の太さ、線の色、画像と線の間の間隔(padding)はお好みで変更してください。

方法2

ブログの記事欄のidを使ってCSSに記述する。
特徴 : まとめて指定できる。過去の記事にある画像にも簡単に枠を付けられる。

div#entry_body img{
     border:solid 1px #ccc;
     padding:4px;
}

※うちのブログの場合、#entry_bodyが記事欄のidです。
ただ、絵文字も画像なので絵文字を使っている方はNG・・・。

方法3

枠を付けたい画像をdivやpなどで囲ってid、classを付けてCSSに記述する。
特徴 : htmlとCSSを分けられる。一番良い方法かな。

画像のソース

<div class="wakkuwaku"><img src="http://blog-imgs-24.fc2.com/m/i/r/miracleblues/kumo.png" alt="画像に枠を付ける" /></div>

※「wakkuwaku」の部分は自由です。idでもOK!

もしもpadding部の色と画像の色が同化してしまって外側の枠線のみになっちゃう場合は、backgroundに色を指定してあげると見やすくてグー!
画像に枠を付ける

というわけで、シンプルすぎるけど誰でも驚くほど簡単に画像の枠が付けられます。
なかなか便利で面白いから色々試して遊んでみてね。
※画像float時にpadding部のサイズが変になる不具合があるかもしれません。
その時は、プロパティに「vertical-align:bottom;」を追加すれば良いようです。

CSSのボックスモデル

意味わからない方の為にCSSのボックスモデルも軽く紹介しますので参考にどうぞ。
CSSで色んな設定をする時にとても重要な考え方です。
いい機会なので覚えちゃいましょ(*´д`*)グヘヘヘヘッ
CSS ボックスモデル

この画像全体をひとつのボックスとして考えます。
何かを配置した時には必ずこれらの要素が関係してくると思ってください。

  • width : コンテンツの幅
  • height : コンテンツの高さ
  • border : 枠線
  • padding : コンテンツと枠線の間の余白
  • margin : 枠線より外側の余白

コンテンツの外側にpaddingやmarginやborderがありますね。
トータルの幅やトータルの高さという場合、widthやheightだけではなくpaddingやborderの値も関係するという事です。
ここを間違えているとCSSを弄る時にパニックになりますのでぜひ頭に入れておいてくださいな。
(と常に自分に言い聞かせるのであった…。)