今更聞けない！エンジニアのための CSS の基礎講座 〜ボックスモデル編〜 | 株式会社ヌーラボ(Nulab inc.)
注意 HTML5 からは 見た目は CSS に任せ、HTML は文書の構造（セマンティック）を表すことのみに重点を置かれるようになりました。例えば箇条書きリストを作るのに div と display: list-item; を使って構築するより、箇条書きリストを表す ul li を使ったほうがよりセマンティックです。このように目的にあった HTML 要素を使うようにしてください。 ボックスモデルとは CSS でレイアウトをする際には、 ボックスモデル を理解する必要があります。 CSS の定義するボックスモデルは以下の図のように 4つの領域で構成されています。 ボックスモデル解説図 content（コンテンツ） テキストや画像など、要素そのものの内容が表示される領域です。この領域のサイズは width（幅） と height（高さ）プロパティで指定することができます。 padding（パデ
ボックスごとリンク化する - かちびと.net
Result jQuery $(document).ready(function() { //class="box"をクリックでイベント発火 $('.box').click(function() { //a要素からhref属性を探して中身を取得し、そのURLに飛ばす。別窓なら('href'), '_blank'とすればOK window.location = $(this).find('a').attr('href'); return false; }); }); HTML5ならボックス要素にリンク貼れますのでこのコードは不要ですね。 css .box{ background: #eee ; padding: 50px ; margin:50px; height: 200px ; width: 200px ; cursor: pointer; } .box:hover{background
デザインに使えるちょっとしたCSSのスニペットいろいろ
Webサイトのデザインには、画像が必須といってもいいと思うんですけど、画像を使わずにピュアな CSS でできるデザインにも、とても素敵なものがあったりします。これからはスマートフォンサイトを作ることも増えそう ...。回線の遅いスマートフォン向けのサイトでは、画像を使わないで CSS のみでデザインする ... っていう機会も増えそうですね。 8 になっても CSS3 が使えない IE ですが、CSS3 を使わなくても、工夫しだいでいろんなデザインエフェクトを表現できますよね！記事中 CSS3 を使ったスニペットもたくさんでてきますが、どれも簡単にできて、ちょっとデザインを素敵にする？コード集です。自分のブログなどでやっているものを中心に、少しまとめてみました。 ちょっとした CSS スニペット 目次 ボックスに使うCSSスニペット テキストに使うCSSスニペット 画像に使うCSSスニペッ
DIV一個で洒落たボックスを作ってみる！最近知ったCSSを使ったボックス装飾とか色々！ | バンクーバーのうぇぶ屋
CSS3からDIV一個で出来る表現なんかも色々あるんですね。ちょっと前まで超面倒だったボックスのオシャンティーな線の装飾とかぼかしとかグラデになんやらかんやら。DIVボックス一つとっても色々な装飾効果をもたせられるなぁと思う今日この頃。 それこそ、ONE DIVのような一つのDIVで表現できるアイコンを作ってるサイトもあって、CSS3を突き詰めると色々知ることも出来て面白いなぁと思うわけです。 っていうわけで、ONE DIV程凝ったことはできませんが、今日はそんなDIV一個で使えそうなボックスの作り方をいくつかご紹介！擬似要素使ってちょっとちょめちょめしたら縫い付け効果のボックス出来たりと、以外と使えそうなものを選んだつもりなので、一度見てみてもらえると嬉しいです！ちなみに、IEチェックは9だけしてます。8とかはCSSPIE当たりで頑張ってなんとかする方向で…何か変なとこあったら直しますの
これだけでデザイン力アップ間違いなし!CSS3で作るBox Shadowエフェクト徹底解説
最近はフラットデザインに押されて急速に使われなくなった感があるCSS3エフェクトなんですが、こうも使わないと忘れちゃいそうなので、今回はCSS3で作るエフェクトの再勉強を兼ねて記事を書いていきたいと思います。 初めに引用元を紹介します Paulund 例のボックスシャドウなんですが2012年このサイトのエフェクトは日本に居るweb系の人ならば一度は見ているくらい有名になったんじゃないでしょうか? 敬意を込めて引用させて頂きます。 目次に戻る CSS ボックスシャドウエフェクト - デモ & 解説 8種類のエフェクトがどう記述されていて、それがどう表示されているのかを解説していきます。 まず初めに、そのエフェクトをかけるボックスのCSSを見て下さい。 .box { background: none repeat scroll 0 0 #F3F3F3; border-radius: 2px 2
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
