レイアウト作りを簡単にしてくれるCSSグリッドシステム
CSS でのレイアウト、段組み作りがとっても簡単にできる、CSS グリッドシステムをご紹介。既に使っている人もたくさんいるとは思いますが、未体験の人はぜひ試してみてくださいね！ Web デザインに欠かせない、CSS でのレイアウト作り。コンテナ作って、ここにラッパー作って、メインが 600px で padding が 20px だから、サイドバーが、えーと … なんてことになりがちです。そんな面倒な作業がイヤだなーという人におすすめなのが、CSSグリッドシステム。全ての Web デザインに使える訳ではありませんが、結構重宝します。すでに使っている人もたくさんいると思いますが、こんな方法もあるんだよーということでご紹介します。 1. CSSグリッドシステムとは？ CSS グリッドシステムというのは、レイアウトを均等に分けて、マス目上に考えるレイアウト。何が便利かっていうと、この段は4等分にし
たった一行を追加するだけでIE6/7/8をCSS3対応にする -CSS3 PIE
IE6/7/8でもCSS3の角丸、ボックスシャドウ、グラデーション、マルチバックグランドなどを使えるようにするbehaviorスクリプトを紹介します。
見出しデザインの参考にしたい CSSで作るhタグのサンプル集 | 日刊ウェブログ式
ブログの記事タイトルやサイドバーのタイトルなどで使えるオーソドックスな見出し（hタグ）のデザインサンプル集です。見出しにはCSS3や画像を使っていないのでシンプルですが、一応よく使うので、メモとしてエントリーしておきました。 ※追記6/24 HTMLのマークアップをpからh3に置き換えました。 見出し(Headline)のサンプル集 色やボーダーサイズ等の装飾部分は お好みで編集してください。 見出しサンプル01 .selector01{ border-left:7px solid #e3297d; padding:.6em .8em } 見出しサンプル02 .selector02{ border-left:7px solid #ccc; border-bottom:1px solid #ccc; padding:.6em .8em } 見出しサンプル03 .selector03{ bor
ASCII.jp：jQueryで作る多階層ドロップダウンメニュー｜Web制作の現場で使えるjQuery UIデザイン入門
多階層対応のドロップダウンメニューへ改造する サンプル01では1階層までのサブメニューを展開するメニューバーを作成しました。今度はより複雑な構造のサイトでも利用できるように、多階層対応のドロップダウンメニューへ改造します。 HTMLは次のようになります。サンプル01と同じようにul/li要素の入れ子で記述していきます。このサンプルでは、メニューA、Cは1階層目（子カテゴリー）までのサブメニューを、メニューBは2階層目（孫カテゴリー）までのサブメニューを記述しています。 ▼サンプル02（HTML部分） <ul class="menu"> <li><a href="#">メニューA</a> <ul class="sub"> <li><a href="#">サブメニューA</a></li> <li><a href="#">サブメニューA</a></li> <li><a href="#">サブメニ
HTML CSS ガイドライン – Kangaroonote
GitHub ディレクトリ構造 ディレクトリ構造、ファイル構成は案件毎に最適な方法を検討 ただし公開ファイルと公開不要なファイル（SASS や node_modules など）は明確に分ける 特に理由がなければ下記の形にする root/ ├── dist/ └── index.html └──css/ └──js/ └──images/ └── src/ └──sass/ └──style.scss └──_var.scss └──_mixin.scss └──_header-footer.scss └──_compo-list.scss └──_compo-table.scss └──_compo.scss └──_single-propery.scss └──_animation.scss 基本ルール 命名規則 ID名、クラス名、ファイル名で単語をつなぐ場合は -（ハイフン）を使用親要
CSSとdivを使った画像先読みテクニック:phpspot開発日誌
Better Image Caching with CSS ? Perishable Press CSSを使った画像先読みテクニック CSSの中に、background-image として指定しておくことで読み込ませるような方法もありますが、<div> と position を使って実現する方法 要は、position指定した見えないdivの中に<img>を仕込んで画像を先読みさせるというものみたい。 HTML <div id="preloader"> <img src="http://domain.tld/path/images/01.png" width="1" height="1" /> <img src="http://domain.tld/path/images/02.png" width="1" height="1" /> <img src="http://domain.tld
CSS HappyLife
もう放置して長い当ブログ...なので、Adsenseの自動広告ってのを試してみようかと思ってONにしたら、すごいことになった！ これは中々に酷いですね。 とまぁそれはさておき、すごい久しぶりに個人の趣味っぽい感じのサイト作りました。 - 探そう！好きな恐竜 なんで恐竜！？って感じしますね。 正直、恐竜には全然興味なかった側の人間です。 もう完全にただのお知らせや告知ブログ...！ 初版の発売から4年経ち、ありがたいことに改訂のお話を頂いたので、6月～8月辺りに森田 壮さんと執筆を行い、2017年9月15日に改訂2版が発売しました。 かなり頑張って加筆・修正などを行ったので思ってたより大変な執筆でした。 初版と改訂2版の詳しい違いに関しては、サポートサイト に載せておいたのでそちらを見て頂けるとありがたいです！ 初版と改訂2版の違い | Web制作者のためのSassの教科書 改訂2版 - 公
[CSS]実用的なものからマニアックなものまでリスト要素をスタイルするベストプラクティス
実用的なものからマニアックなものまでリスト要素をスタイルするベストプラクティスをDev Snippetsから紹介します。 Styling your Lists: 20+ Brilliant How to's and Best Practices
[CSS]特定の範囲からはみ出さないドロップダウン型ナビゲーションを実装するスタイルシート | コリス
ドロップダウンするパネルが特定の範囲から左右にはみ出さないナビゲーションを実装するスタイルシートをCSSplayから紹介します。 Any width dropdown/flyout menu with left and right dropdown/flyouts v2 demo デモではドロップダウンするパネルが、通常（2, 3番目）は左端を基準に展開しますが、一番右の（6番目）ははみ出してしまうので右端を基準に展開します。 また、配下もキャプチャのように特定の範囲内に表示されます。 対応ブラウザはIE5.5/6/7/8, Fx, Op, Safari(PC), Chromeで、IE8はIE7エミュレーションモードの必要はないとのことです。
css Zen Garden: The Beauty in CSS Design
A demonstration of what can be accomplished through CSS-based design. Select any style sheet from the list to load it into this page. Download the example html file and css file The Road to Enlightenment Littering a dark and dreary road lay the past relics of browser-specific tags, incompatible DOMs, broken CSS support, and abandoned browsers. We must clear the mind of the past. Web enlightenment
[使えるCSSテクニックVol.2] CSS を使った見栄えのいい引用文 | バシャログ。
第 7 回目は「CSS を使った見栄えのいい引用文」です。 他の記事を引用したり、出典の一文を掲載したり、というところに使用する「引用文」を CSS できれいにしてみようじゃないかという試みです。 01. シンプルに見栄えよくしてみる [サンプル] あ…ありのまま 今 起こった事を話すぜ！ 『おれは奴の前で階段を登っていたと思ったらいつのまにか降りていた』 な…何を言ってるのかわからねーと思うがおれも何をされたのかわからなかった… 頭がどうにかなりそうだった… 催眠術だとか超スピードだとかそんなチャチなもんじゃあ 断じてねえ もっと恐ろしいものの片鱗を味わったぜ… [HTML] <blockquote id="simple01"> <p>あ…ありのまま 今 起こった事を話すぜ！<br /> 『おれは奴の前で階段を登っていたと思ったらいつのまにか降りていた』<br /> な…何を言ってるのか
![[使えるCSSテクニックVol.2] CSS を使った見栄えのいい引用文 | バシャログ。](https://cdn-ak-scissors.b.st-hatena.com/image/square/1f4390ea5b2b558adfd9c349b9a080aae407daff/height=288;version=1;width=512/https%3A%2F%2Fbashalog.c-brains.jp%2Fshared%2Fpublic%2Fimg%2Fcommon%2Ficon_ogp02.png)
[使えるCSSテクニックVol.2] CSS を使った見栄えの良いページャー | バシャログ。
第 3 回目は「見栄えの良いページャー」です。 シンプルなコーディングで見栄えの良いページャーを実現します。 XHTML のサンプルは以下です。とてもシンプルです。 <ul class="pager"> <li class="prev"><a href="hoge">« PREV</a></li> <li><a href="hoge">1</a></li> <li><em>2</em></li> <li><a href="hoge">3</a></li> <li><a href="hoge">4</a></li> <li><a href="hoge">5</a></li> <li class="next"><a href="hoge">NEXT »</a></li> </ul> サンプル1： とてもシンプルなページャー とてもシンプルなページャーのサンプルです。 «
jQueryでtableの偶数行や奇数行に背景色を設定する方法 | バシャログ。
ishidaです。 tableで価格一覧や製品一覧などを表示する場合に、行数が長くなるとかなりメリハリのない印象になります。 行ごとにclassを設定すれば見やすくなりますが個別に設定するのも面倒なので、最近のishidaはjQueryを使って背景色を設定しています。 サンプルは以下です。 jQueryでtableの偶数行や奇数行に背景色を設定する方法サンプル 設置方法 設定方法は以下です。 htmlのhead要素に以下の処理を読み込みます。またjqueryはサイトからダウンロードしてください。 <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("table").each(function(){ jQ
[CSS]フロートしたナビゲーションを中央に配置するスタイルシート
リスト要素をフロートさせて作成したナビゲーションをブラウザの中央に配置するスタイルシートをCSSplayから紹介します。 ナビゲーションのwidthは指定無しの成り行きです。 Centering Float Left Menus デモでは、CSSハックやinline-block, table/table-cellを使用せずに実装されています。 下記に、それをシンプルにしたデモをアップしました。 シンプルにしたデモ IE6/7/8beta2, Fx3, Op9.5, Safari3, Chrome1で正常に動作しました。IE5.5, Fx2はダメでした。 追記：その1 リストを内包するdivに「text-align:center;」をしたら、上記ブラウザ＋Fx2に対応できました。 なんで、きくのだろう、、、？ シンプルにしたデモ（Fx2対応） 追記：その2 「ふ」さんのコメントにより、Saf
これさえやればCSSをマスターできるかもしれないCSSチュートリアル＆サンプル20:phpspot開発日誌
皆さん、新年あけましておめでとうございます。 今年も読んでいただき、ありがとうございます。 では、早速ですが記事のご紹介。 20 Ultimate CSS Tutorials That Will Help You Master CSS | DWSmg.com これさえやればCSSをマスターできるかもしれないCSSチュートリアル＆サンプル20。 全部、そのメカニズムについて覚えたらかなりCSSに詳しくなるのは間違いなさそう。 Advanced CSS Menu カーソルを合わせたときにメニューがCSSオンリーで切り替わる CSS Based Navigation こちらも同様。JavaScriptレスでメニューを切り替えます CSS Fancy Menu CSSとJSを使ってFlashばりのアニメーションメニューを作成 Expandable CSS Tabs Tutorial テキスト長に応
HTML をシンプルに保ちつつ、ブロック要素の段組みを実現する方法 パート3 | バシャログ。
「HTML をシンプルに保ったままブロック要素を段組みする方法」「HTML をシンプルに保ったままブロック要素を段組みする方法 パート2」の応用テクニックのご紹介です。 前回までは画像の横並びの解説でしたが、今回は段組みさせるブロック要素（サンプルの場合は div 要素）の内容が画像のみとは限らない場合です。 ボックスと余白の幅の値は以下です。 HTML ソースはこちら。シンプルなソースになっています。 <div id="content"> <div class="section"> <div class="box"> <h2>会社案内</h2> <p>株式会社シーブレインのご紹介</p> <!-- /.box --></div> <div class="box"> <h2>採用情報</h2> <p>プログラマ中途採用募集中！ まずはお問い合わせください。</p> <!-- /.box -
ウェブサイトの開発に役立つスクリプトやスタイルシートのポータルサイト
DevSnippetsは、ウェブサイトの設計や開発に役立つ、HTML/CSS、JavaScript、AJAX、WordPressなどのスニペットのポータルサイトです。 DevSnippets DevSnippetsに登録されているスニペットのカテゴリは、以下の３つとなっています。 Design Elements CSS Techniques JavaScript Libraries ローンチして日が浅く、登録数は多くありませんが、今後に期待大です。 DevSnippetsは、現在総額$4600のコンテストも行っています。詳しくは下記ページを参照ください。 DevSnippets has Officially Launched with a $4600 Contest Prizes
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[CSS]上部のエリアを確保しつつ、要素をページの中央に配置するスタイルシート
スクロールすると変化しながらついてくる画像 | SIMPLE*SIMPLE
[CSS]フォームをリスト要素で並べたスタイルシートのチュートリアル