たった１行で完成？凄まじくレスポンシブデザインなサイトの作り方 | DECONCEPTER
簡単に作れる！みんな大好き可変グリッド 先日話題になっていた「なんだこれ！！「NHKスタジオパーク」のレスポンシブ・ウェブデザインが凄まじくレスポンシブ！！」で紹介されていたNHKスタジオパークのレスポンシブデザイン。 こちらのサイト、プラグインを使ってとてもシンプルに作られています。キレイ。このシンプルさを伝えたくてうずうずしてきました。せっかくうずうずしたのでどんな作り方をしているのかサンプルを交えて紹介します。 まずはこちらのデモを御覧ください。 凄まじくレスポンシブデザインなサイトデモ 使われているのはjQuery Masonryというプラグインだ！ @planetofgoriさんのブログで紹介されているように、jQuery Masonryというプラグインが使われています。このプラグインたった数行でNHKのサイトのような可変グリッドレイアウトが作れてしまいます。可変グリッドのレイア
z-index―スタイルシートリファレンス
z-indexプロパティは、ボックスの重なりの順序を指定する際に使用します。 z-indexプロパティは、positionプロパティでstatic以外の値が指定されている要素に適用されます。 ■値 整数値で指定 重なりの順序を整数で指定します。0を基準として、値が大きいものほど上になります。 auto 親要素と同じ階層になります。これが初期値です。 スタイルシート部分は外部ファイル（sample.css）に記述。 p.sample { color: #000000; background-color: #99cc00; position: relative; top: 50px; z-index: 2; } img.sample { position: relative; top: -50px; z-index: 1; } HTMLソース <html> <head> <link rel="
初心者の頃分からなかったWeb用語：フレームワーク … CSSからHTML5、WordPressまで
Webを見ていると、フレームワークっていう言葉をよく目にします。初心者の頃は、このフレームワークっていうものがどんなものなのか、いまいち分かりませんでした。今回は、色んな例でフレームワークというものを紹介してみました。なので、フレームワークって何だろうっていう人向けの記事です！ Web制作関連のブログを読んでいると、ときどきフレームワークっていう言葉がでてきます。例えば CSSのフレームワークとか、HTML5 + CSS3 のフレームワークとか …。 今でこそ、このフレームワークって何だかわかりますが、初心者の頃は、このフレームワークっていう言葉が何だか難しそうで、意味の分からないものでした（私だけ？）。何となく雰囲気で、使ってみると便利なのかなーという感じはしましたけど、そもそもフレームワークという言葉自体の意味が分かっていなかった頃は、使ってみよう！というところまで行きませんでした。
:after疑似要素 (E:after)｜セレクタ｜CSS HappyLife ZERO
CSS2で定義された:after疑似要素は、contentプロパティとの組み合わせで、指定した要素の後に指定した内容を生成します。 また、:first-letter及び:first-line擬似要素を:beforfe疑似要素と組み合わせる場合は、生成された内容の最初の文字や一行目に適用する事ができます。 対応ブラウザ :after疑似要素 のサンプル ul li.new:after { content: " NEW!"; color: red; font-size: 85%; } <ul> <li><a href="http://css-happylife.com/">CSS HappyLife</a></li> <li><a href="http://cssnite.jp/">CSS Nite</a></li> <li class="new"><a href="http://www.yo
Bos138 | Agen Juragan Bos 138 Slot Login Link Alternatif
🎰 Game Online, 🎲 Angka Jitu, 🏆 Pertandingan Bola, 💸 Permainan Kartu Game Bos138 menawarkan berbagai jenis permainan slot yang tidak hanya menarik dari segi visual namun juga menjamin keamanan dan keadilan bagi para pemainnya. Di era digital ini, kepercayaan menjadi aspek penting dalam pemilihan situs judi online, dan Game Jackpot berupaya keras untuk memenuhi ekspektasi tersebut dengan menyedi
正しい知識を得たい人の爲のCSS2リファレンス
正しい知識を得たい人の爲のCSS2リファレンス 簡易目次 概要 CSS2の構文 基本データ型 セレクタ 値わりあて，カスケード処理，継承 メディアタイプ HTML文書へのスタイルシート適用 プロパティの定義 テキスト 色と背景 フォント ボックスモデル 視覚整形モデル テーブル 生成内容 リストとマーカー ユーザインタフェイス 附録 CSSに関するアクセシビリティ技術 CSS2.0のプロパティ一覧表 CSS2.1のプロパティ一覧表 CSS2.1の視覚整形モデル詳細 詳細目次 概要 CSSの概要 HTMLの経緯とCSSの役割 CSSの正式勧告水準について 改訂版CSS2.1と次世代CSS3 CSS2.1 vs CSS2 CSSの設計原則 CSS2の処理モデル カンヴァス（The canvas） わりあてモデル（addressing model） 用語の定義 CSS2の構文 構文（Syntax
float解除の決定版。clearfixを考えたら、進化した。
現在この中でclearfixでよく使用されているプロパティは display:inline-block; height:1%(min-height:1%) zoom:1; でも良く考えたら、全て微妙です。 zoom:1はIEの独自仕様ですし、heightを使用する場合は、IE6,7に対応させるために2つのプロパティが必要です。 display:inline-blockもボックスの要素を変形させることになります。 hasLayoutのスイッチを見た時に、一番理に適ったプロパティはwidthかなと思いました。 子要素を囲む要素として、divやulなどデフォルトCSSがdisplay:blockのプロパティのものが多く、display:blockのプロパティの場合、width:100%で問題ないと思ったからです。 現在のブラウザ状況に適したclearfix 上記を踏まえ見直したclearfixが
THE HAM MEDIA BLOG
先日、アスキー・メディアワークスの小橋川さんより、12月11日に発売された『HTML5マークアップ 現場で使える最短攻略ガイド』を献本いただきました！小橋川さん、そして著者のはましゅんさん、ありがとうございます！！ HTML5マークアップ 現場で使える最短攻略ガイド：Amazon 先日発売していたのをFacebookやTwitterで、インターネット・Web開発のカテゴリで１位！なんてのをみていたのですが、まさか私にもお送りいただけているなんて思いもよらず。姫実家にしばらくいたこともあり、宅配の不在票に気づいたのが先週末くらい、その後うけるとまで１週間もかかってしまいました。 早速内容に目を通してみましたのでご紹介をしたいと思います。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS : positionの「absolute」「relative」「fixed」のリファレンス | CSS Lecture
FreeWebDev.jp - WEB制作/開発に役立つフリー情報を共有
CSSデザインサンプル