[B! Webデザイン][class] amanoiwatoのブックマーク

amanoiwato id:amanoiwato

Webデザインとclassに関するamanoiwatoのブックマーク (3)

<DIV>ボックスをヨコとタテに段組する -2step脱テーブルスタイルシートCSSレイアウト講座-
.box1{ width: 200px; height: 100px; background-color: #FFCCCC; float: left; } .box2{ width: 100px; height: 100px; background-color: #66CCFF; float: left; } .kaijyo{ clear: left; } 段組するボックス１、２は、特別な変化はありませんが、タテヨコの段組をするための必需品、段組解除用のボックスを新しく定義してあげる必要があります。上の、.kaijyoのことです。ここで、使ってるclear属性は、float属性で定義された回りこみ指定を解除する働きをもってます。くわしくは、<DIV>をタテヨコに段組していこうで解説しております。そして、気になるHTMLソース部分はというと、
amanoiwato 2012/11/26
class

web制作

webデザイン

css

html

tips
リンク
[CSS]まるでFlashのように画像とキャプションをアニメーションで替えるテクニックいろいろ
画像をホバーすると、小気味良いアニメーションを伴ってキャプションに替えるCSS3のテクニックを紹介します。デモは10種類あり、CSSでここまでできるのか！って感じです。 Original Hover Effects with CSS3 [ad#ad-2] 基本となるHTML 基本となるCSS 必見の10種類のかっこいいデモ基本となるHTML HTMLは非常にシンプルです。キャプションはタイトルとテキストをdiv要素で内包しclassに「mask」をつけ、そのキャプションと画像をdiv要素で内包します。 <div class="view"> <img src="image.gif" /> <div class="mask"> <h2>Title</h2> <p>Your Text</p> <a href="#" class="info">Read More</a> </div> </d
amanoiwato 2011/11/08
CSS

デモ

アニメーション

HTML

web制作

css3

class

webデザイン

!ji実用
リンク
もう、class名やid名で悩まないんだからっ！！｜CSS HappyLife
class名やid名って付ける時悩みませんか？今でもボクは結構悩むんですが、そんな悩みを解決する為に、人さまのソース覗きまくってよくあるclass名とid名を拾ってきました。これで、チョットだけ作業効率アップ！？ 2010年6月10日追記：この記事自体、2007年 1月15日に書かれてるんでかなり古いです。あくまでも参考程度に留めてもらうのが良いかと思います。今だったら、html5の要素を参考にしたりして付けるのが、今後の事を考えると良いのかなーと思います。また、善し悪しの判断はせずに公開しているものですが、位置に関するのは仕様変更に弱くなるのでオススメはしません。全体に使えそうな感じ wrap wrapper top-wrapper wrapperAll frame mframe all-frame container page pagetop all allContent
amanoiwato 2010/06/10
web制作

css

webデザイン

tips

html

class

まとめ

!gtd 資料
リンク
1