レスポンシブ・ウェブデザインでの CSS コードの書き方 | Yomotsu net
いわゆるレスポンシブ・ウェブデザイン、つまりメディアクエリーを採用した Web サイトを構築する際の一番管理しやすいと感じるコードの書き方をまとめました。ただし、あくまでも個人的な、経験から感じた意見ですので絶対ではありません。 CSS のコードの配置広く知られている方法はいくつかあります。 CSS ファイル自体を分ける方法 @media 規則で 1ファイル内にメディア特性単位に書く方法 @media 規則で 1ファイル内にパーツ単位で書く方法 それぞれをコードで表すなら以下の書き方が該当します。 方法1 : CSS ファイル自体を分ける方法この方法は管理が大変でおすすめできません。これでファイルごとコード分割されてしまったらコード検索しづらいわけです。 <link rel="stylesheet" href="desktop.css" media="(min-width:769px)">
ハイパーテキストリンクのスタイル大全
ハイパーテキストリンクをデザインする上で知っておきたい基礎知識から、実用的なチップス、やってはいけない間違いなど、すぐに役立つテクニックをSmashing Magazineから紹介します。 The Definitive Guide To Styling Web Links 以下は、各ポイントを意訳したものです。 はじめに ハイパーテキストリンク（リンク）はウェブページをつなぎます。Web Standardistasによると「ハイパーテキストリンク無しではウェブはウェブではなく、それはただ別個の、無関係なページのコレクションでしょう」と言っています。 我々はページにたどり着いたら、ある種のリンクをクリックする必然性があります。 1. CSSのセレクタと擬似クラス リンクをスタイルする時には、ユーザーはページを流し読みすることを忘れないでください。そのため、リンク箇所はしっかりと明示すべきです
ヘッダとフッタを固定して常に表示 « (X)HTML+CSS Tips « XHTML+CSS Webサイト制作Tips « ScuderiaWeb
少し前までのWebサイト制作ではフレームによって簡単に実装されていましたが、Web標準が重視されフレームの使用がご法度になった今、画面全体がスクロールするWebサイトが一般的になりました。しかし、コンテンツ部分が長くなると、コンテンツ上部にあるメニューボタンの利用が不便になるなど、ユーザビリティの低下も否めません。 好みや慣れもあると思いますが、XHTML+CSSでフレームのようにヘッダとフッタを画面の上下に固定し、常に表示する方法をご紹介します。 ページの情報量が少ない場合も画面最下部にフッタを表示する方法は、フッタ固定で紹介しています。 サンプル ヘッダとフッタを固定して常に表示するサンプル（別ウィンドウで表示） ソース 上記サンプルで使用しているソースです。 body{ margin: 0; padding: 100px 0 50px 0; } * html body{ overfl
第27回 フォームとCSS
今回のポイント formの幅や高さは指定しないのが無難 divの中にformを含めてレイアウトする IMEをCSSで制御する フォーム（form）もHTMLを形成するタグの一種ですから，当然CSSによる装飾が利きます。これまで多くのWebデザイン解説書が世に出てきましたが，formの装飾にページを割いたものは多くはありませんでした。 しかし，エンジニアがformを使わないWebサイトに関わることはほぼ皆無です。サーバー側でのプログラムを必要とするサイトでは，ほとんどの場合，ユーザーがformでデータを入力するからです。 ページにたくさんのエレメントを並べるのだけがformではありません。Googleのスタートページのように検索語句を入れるテキストボックスと，その語句を送信するボタンがひとつずつというのも立派なformです。ですからエンジニアの方々は，formの装飾の仕方をどうしても習得して
IE6でよく遭遇するCSSのバグとその解決方法 | コリス
Dave Woodsのエントリー「IE6 -CSSのバグとその解決方法」から、IE6でよく遭遇する３つのCSSのバグとその解決方法の意訳です。 IE6 - CSS Bugs and Fixes Explained IE6で、マージンが２倍になってしまうバグ IE6で、hasLayoutプロパティによって起こるバグ IE6で、小さい高さを指定した場合に起こるバグ IE6で、マージンが２倍になってしまうバグ IE6で、フロートした要素のマージンが２倍になってしまうバグと解決方法の紹介です。 下記のコードで、IE6はマージンが20pxになります。 sample:バグ #navigation{ float: left; width: 200px; margin-left: 10px; } #content{ float: right; width: 500px; margin-right: 10p
CSS HappyLife
もう放置して長い当ブログ...なので、Adsenseの自動広告ってのを試してみようかと思ってONにしたら、すごいことになった！ これは中々に酷いですね。 とまぁそれはさておき、すごい久しぶりに個人の趣味っぽい感じのサイト作りました。 - 探そう！好きな恐竜 なんで恐竜！？って感じしますね。 正直、恐竜には全然興味なかった側の人間です。 もう完全にただのお知らせや告知ブログ...！ 初版の発売から4年経ち、ありがたいことに改訂のお話を頂いたので、6月～8月辺りに森田 壮さんと執筆を行い、2017年9月15日に改訂2版が発売しました。 かなり頑張って加筆・修正などを行ったので思ってたより大変な執筆でした。 初版と改訂2版の詳しい違いに関しては、サポートサイト に載せておいたのでそちらを見て頂けるとありがたいです！ 初版と改訂2版の違い | Web制作者のためのSassの教科書 改訂2版 - 公
53 CSS-Techniques You Couldn’t Live Without | Smashing Magazine
CSS is important. And it is being used more and more often. Cascading Style Sheets offer many advantages you don’t have in table-layouts - and first of all a strict separation between layout, or design of the page, and the information, presented on the page. Thus the design of pages can be easily changed, just replacing a css-file with another one. Isn’t it great? Well, actualy, it is. Over the la
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA
CSS Layouts: Grid and CSS Layouts
新規でサイトを作る際に僕がいつも使ってるCSSのセットを公開するよ::::::STOPN' LISTEN::::::to the silence:::::::