忍者ブログ

World of granshe.

HTMLやCSS、JavaScriptに関する話題を中心に、Web制作について知ったこと、覚えておきたいことをメモしておく個人的スペースです。
[1] [2] [3] [4] [5

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

CSSで作る画像のロールオーバー

CSS Happylife様の
Javascriptを使わずにやるimg要素のロールオーバーサンプル
のエントリーを拝見しまして、
ロールオーバーの新しいやり方を発見したので、
今まで使っていたやり方もあわせてご紹介します。

  1. 画像をCSSの背景として指定する場合(文字ナビゲーションなし)
  2. 画像をCSSの背景として指定する場合(文字ナビゲーションあり)
  3. 画像をimgタグでHTMLにはりつける場合
PR

セレクタの指定方法-5年目の真実その2-

前回、clearfixのお話をしましたが・・・
まだ、私の知らない真実があったようです。
しかも超初歩的なこと。

今まで、
<div id="main">
  <ul>
    <li id="here">いち</li>
    <li>に</li>
    <li>さん</li>
    <li>よん</li>
    <li>ご</li>
  </ul>
</div>
こういう場面において
id="here"に対してCSSで指定をしたいときは

#main ul #here { プロパティ; }
と書いてごまかしてきたが

実は
#main ul li#here {プロパティ;}
って書けばいいんですよね!?


今までずっと、このくっつける記述方法を知らなくて
なんか違和感あるなーって思ってたんですが、

#main ul li #here (#mainの中のulの中のliの中の#here)じゃなくて
#main ul li#here (#mainの中のulの中の、#hereが指定されてるli)ってことなんですね!?


もうなんだか泣きたいです。

CSSのガイドライン

参照元 : taichi kaminogoya様

最近、自分以外の人のCSSをじっくり見る機会があって、
その時に思ったのは
「HTMLの書き方は、多少の差異はあれどあまり個人差はないが、
CSSは、書き方やファイルの作り方に個人差があるのではないか?」
ということです。

今まで、他の人の書いたCSSを研究してこなかったわけではありませんが、
顔が見える人(つまり知人)のCSSを見て比較する機会がほとんどなかったので、
CSSの書き方もその人の性格を表すんだろうか?なんていうことも思っています。


さて、本題ですが、
他人のことが気になると、自分のことも気になるわけで、
私はCSSを書く際にどうやってファイルを分けているのか?
セレクタはどういう書式で書いているのか?プロパティはどうなんだろう?
が気になり、

以下で現在の自分の作り方をまとめてみました。

clearfix-5年目の真実-

Web制作を始めて6年以上、
CSSをさわり始めて5年は経つでしょうか。

floatを使うたびに、最後に以下のおまじないを入れなければならず、
空のdivを使わなければならない自己嫌悪と共に生きてきました。
これ↓
 <div style="clear: both"></div>

先日、研究室で2005年には発売されたであろうWeb雑誌を見ていると、
clearfixなるコードが記述されていました。

そのときは、「なんかおもしろそうだ」程度で全く気に留めていなかったんですが。
友人に話を振ってみると、現在ではもう定番になっているものだそうで…。
はい、ごめんなさい、私は今の今までずっと <div style="clear: both"></div>で過ごしてきました。

というわけで、clearfixについてのメモ。

情報元:norisfactory様

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
display: inline-block;
}
/* Hides from IE-mac \*/
 * html .clearfix {height: 1%;}
 .clearfix {display: block;}
/* End hide from IE-mac */

これがclearfixなんですね!
今までずっと<div style="clear: both"></div>を使ってきた私って何なんでしょう!
仕様だと思って諦めずに、調べてみないと解らないこともあるんですね。

メモおわり。

<< 前のページ | HOME | 
プロフィール
名前: ゆーり
職業: コーダー(模索中
趣味: Web制作
自己紹介: 某Web製作会社の入社5年目のマークアップエンジニア。専門はHTMLとCSSとMT(自称)。
カレンダー
03« 2017/04 »05
S M T W T F S
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30
ブログ内検索
忍者ブログ [PR]