[B! css] miya__yumiのブックマーク

CSSでレイアウトするなら絶対覚えておきたい配置のルール：フロートや絶対配置、z-index とかいろいろ

最近改めて CSS の基本、要素の配置、レイアウトについて学習しました。過去に CSS でのレイアウトなどの記事を書いた事があるんですけど、改めて勉強してみたら、いろいろ間違えて解釈していたなー ... っていうか、基本が分かってなかったんだなーと反省 ...。今回は CSS の基本中の基本、視覚整形モデルについてまとめてみました。 Webデザインをする上で、必須とも言えるのが CSS …。このブログ – Webデザインレシピでも、過去に CSS について書いた記事がいくつかあります。最近 … でもないけど、以下のふたつは CSS でのレイアウトについて、いろいろと書いた記事でした。 CSSでレイアウトするなら絶対覚えておきたいブロックレベル要素のクセとかいろいろ – 2011年 6月17日 CSS：初心者の頃にハマったスタイルシートのあれこれ … IE7多め -2011年 4月21日で

miya__yumi 2012/08/13

リンク

IE6などのクロスブラウザに強くなる、22のHTML+CSSコーディングの基礎

IE6などのクロスブラウザに強くなる、22のHTML+CSSコーディングの基礎 2011-06-04 Twitterなどを見てると、「IE6がー！」とか「IE6,7,8,9、Firefox、webkit系、Operaで同じレイアウトにするの大変」などのツイートをたまに見るので、クロスブラウザでも差が出にくく、効率の良くなるコーディングの基礎を紹介します。気をつけるHTMLの記述方法 HTMLの記述方法を間違えていると、ブラウザCSSの解釈が変わってきます。以下のようなことは基本的なことですが大切な事です。 DOCTYPEを書く。 HTMLの先頭にDOCTYPEを入れるようにして下さい。 DOCTYPEがないと、ブラウザ間での誤差が起こりやすい状態になります。 DOCTYPE スイッチについてのまとめと一覧表 (HTML 5 や IE 8 Beta 2 のモードスイッチなどの情報も含

miya__yumi 2012/08/13

リンク

i474.info

i474.info This domain is expired. The domain owner has to renew it from the admin setting if you continue using it. 2018 Copyright. All Rights Reserved. The Sponsored Listings displayed above are served automatically by a third party. Neither the service provider nor the domain owner maintain any relationship with the advertisers. In case of trademark issues please contact the domain owner directl

miya__yumi 2012/08/13

リンク

LESSで3倍ラクするスマートフォンコーディング記事一覧 | gihyo.jp

miya__yumi 2012/08/08

リンク

【CSS】CSSで簡単にぶら下げインデントをする方法 | バシャログ。

自宅用に新しいパソコンを買った sakai です。スペック重視とお店で伝えたら「ちょっと値が張りますよ～」と店員に言われたのでドキドキしていたのですが、CPU が Core i7、メモリが 6GB、ハードディスクが 1TB、ディスプレイや OS も付属して 13 万円くらいでした。前回パソコンを買ったときの感覚では 30 万円くらいなのかと思ってました。安くなりましたね… 今回は小ネタで失礼します。 Web ページ中の注意書きなどでよく使用される手法で、「※」マークを使って文字をぶら下げる方法をご紹介します。このように表示されます。 XHTML ソースは以下です。 <p>※ここに注意書き。<br /> 改行しても見栄えがいいです。</p> CSS のソースは以下です。 p { margin-left: 1em; /* ブロック全体を 1em 右に */ text-indent: -1e

miya__yumi 2012/06/27

リンク

[使える CSS テクニック] 実案件でも使える！フッターをブラウザ下部に固定する方法 | バシャログ。

暑い夏がやってきそうなので、久しぶりにツーブロック的な刈り上げにしてみましたishidaです。今回は最近作業した案件で、これまであまり実践的に使わなかったCSSレイアウトを2サイト連続で使ってみたので、ご紹介。自分も忘れないようにメモ的エントリーです。ページ下部に固定されるフッターを実現するためのCSSレイアウトです。 positionで実現する方法もありますが、コンテンツ量によっては表示が崩れるので今回は直球勝負です。 XHTML ソースはこんな感じになります。 <div id="container"> <div id="header"> ヘッダー </div> <div id="content"> <h1>フッターをブラウザ下部に固定するサンプル</h1> <p>本文が入ります。本文が入ります。本文が入ります。</p> <!-- /#content

miya__yumi 2011/10/14

リンク

http://www.themeflash.com/45-cheat-sheet-desktop-wallpaper-for-web-designers-and-developers/

miya__yumi 2011/01/10

リンク

ごちゃごちゃしたCSSを見やすく自動整形してくれるサイト「ProCSSor」*二十歳街道まっしぐら（FC2ブログ時代）

「ProCSSor」はごちゃごちゃしたCSSを自動整形してくれるサイトです。自分の書いたCSSをみて、「あーごちゃごちゃしてて見にくいなぁ」て感じてる方には朗報！ CSSを貼りつけて、変換すると綺麗に整形されたCSSをはきだしてくれます。無駄な改行やらも省いてくれるという気が利くサイトです。以下に使ってみた様子を載せておきます。まず「ProCSSor」にアクセスしましょう。「ENTER OR COPY-PASTE YOUR CSS HERE」に整形したいCSSを貼りつけます。「options」より、整形のルールを決めることができます。「process」をクリックして、変換開始！するとこのように整形されたCSSがはきだされます。「download」からダウンロードできますよ。この色付け、けっこう見やすいので、CSSを整形＋色付けしたいときにも使えそう。やっぱり綺麗にコー

miya__yumi 2010/09/13

css

リンク

715 Awesomely Simple and Free CSS Layouts

Frustrated with the quality of free CSS templates online but aren’t quite to the level of building your own? Tired of spending hours trying to customize lame pre-fab designs? Today we bring you over seven hundred freely downloadable CSS templates that focus on providing you with only a basic layout to build upon. Using these cross-browser layouts you can avoid endless CSS positioning woes and focu

miya__yumi 2010/08/29

リンク

画像の下にテキストが回りこまないレイアウト | ヨモツネット

概要画像の横にテキストがあるようなレイアウトですがテキストが画像の下に回りこまないという CSS の書き方です。float を使うと、画像の下部にテキストが流れ込みますが、この方法は、画像の下にはテキストは流れ込みません。さらに、画像の大きさは自由に設定できて、スタイルの使い回しが可能なレイアウトです。(画像が配置されるスペースの横幅は画像のサイズにフィットします。) これにより、画像のサイズごとに class 属性を設定したりスタイルを作る必要がありません。また、画像がない場合でも画像分が詰められて表示されます。これを応用すれば柔軟に対応できるコンポーネントをつくることができます。動作確認用の demo 動作確認用の demo (左右逆版) 説明 display プロパティに table や table-cell を設定して実現します。構造を table 要素に置き換えて考えて

miya__yumi 2008/08/29

リンク

idの命名に迷ったら | d-spica

idの命名に迷ったら 2007-10-19 0 0 XHTML/CSS Role, XHTML 以前こんなエントリーを書きました。 id="header"で問題ないのでは id，class名をどうふるとよいか，しばしば悩みます。いくつかのパターンがあって，そのどれかを使うのですが，明確な基準というものはありませんでした。 XHTML Role 属性モジュール先日W3Cから，「XHTML Role 属性モジュール」の最終草案が出されました。 XHTML Role 属性モジュール（日本語訳）部分的に引用してみます。概要この仕様で定義される XHTML Role 属性は、作成者が要素に役割を与えるための属性です。機械で抽出可能な意味情報を要素に与えることで、XML を用いた言語に注釈を与えることができるようになります。ユースケースとして、アクセシビリティやデバイスアダプテーション、サー