セレクタで使用できる文字 - スタイルシートの基本 -- ごく簡単なHTMLの説明
HTMLは効率的に情報交換を行えるよう、文書の「構造」を記述することを目的にしています。そこに文字の色や形などの情報が混じってくると、せっかくの情報が不明確になってしまいます。 スタイルシートは、レイアウトを別の場所に定義しておき、それを構造に対して適用するという考え方です。いったん定義したスタイルは、複数の文書で共有できますから、全体のデザインに一貫性を持たせることができ、しかもメンテナンスがずっと容易になります。 目次： スタイルシート：文書の論理と表現を分離する カスケーディング・スタイルシート（CSS） スタイルの定義場所 クラス、idによる定義の局所化 文脈セレクタと一括設定 カスケーディングと継承 スタイルのタイプ指定 取り上げる要素： style スタイルシート：文書の論理と表現を分離する 本文とは別に表現ルールを設定するスタイルシートは、文書のメンテナンスを容易にし、また表
はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
KOROPPYの本棚 : トラックバック欄にスクロールバー
ココログでは、「本文」→「トラックバック」→「コメント」の順で表示されます。 トラックバックが沢山ある場合、なかなかコメントまでたどり着けなくて、不便だなと思っていました。 そこでトラックバック欄にスクロールバーをつけてみました。 CSSの記述は、以下の通りです。 /* トラックバック欄 */ .entry-trackback { overflow: auto; height: 230px; margin: 0px 0px 10px 0px; } これでトラックバックの多少に関わらず、すぐコメント欄を読むことができます。 IE以外のブラウザで確認していないのが、ちょっと心配です。 不具合等ありましたら、コメントでご指摘いただけると助かります。
初めてのココログ・カスタマイズ
□基本 / □第1回～第10回 / □第11回～第20回 / □第21回～第30回 / □第31回～第40回 / □ブログ便利ツール / □カスタマイズ・サンプル /□その他 ■第0回：ごあいさつ □基本 ■基本1：ファイルのアップロード ■基本2：マイリストの作成→サイドバーへの設置 ■基本3：記事欄への画像の挿入 ■基本4：自分のブログのCSSファイルを確認する ■基本5：カスタム・テンプレート用CSSの主な要素名一覧 □第1回～第10回 ■第1回：カウンターをつけてみよう ■第2回：バナーを貼ってみよう ■第3回：カスタムテンプレートを作ってみよう ■第4回：タイトルにオリジナルの画像を設定してみよう ■第5回：背景の色を変えてみよう ■第6回：背景に画像を表示してみよう ■第7回：コメントをツリー表示にしてみよう ■第8回：サイト内検索を設置してみよう ■第9回：アクセス解析を設置
CSS examples
Site not Updated!! This site hasn't been maintained or updated for a considerable number of years and is just left in place for historic reasons. Many of the techniques discussed here are not relevant these days and use out-dated techniques not applicable to today's web design structures. The demos may still be of interest as they show various techniques but most of these demos were created before
Collection & Copy - 上下左右の中央にボックスを配置する
(via Subtech Watchlist - typester) Collection & Copy - 上下左右中央の件、改善、補足コメント頂き、改善、補足を書きました。 CSS vertical center using float and clear 上記、CSSで上下左右の中央にボックスを配置するページを読みました。要約すると以下のHTMLになるようです(必要なものも削っちゃったかも)。ポイントとなるスタイルシート設定にコメントを入れました。 CSS、きっと分かってる人には、あったりまえなんだろうなぁ。「float:left」と「clear:left」がペアで対応してるんですね。あと、marginのautoはIEで、うまく動かないのか。余白用のブロック(distance)は、まず画面の縦半分の長さで空間を確保し、本文のブロックの半分のサイズだけマージンを減らして、ちょうどよい
Layout Gala: a collection of 40 CSS layouts based on the same markup and ready for download!
by Alessandro Fulciniti In November 2005 I presented on pro.html.it a three-part article on creating CSS layouts using techniques like negative margins, any order columns and in some case opposite floats. The main goal of the article was getting the maximum number of layouts based on the same markup, each with valid CSS and HTML, without hacks nor workaround and a good cross-browser compatibility.
CSSのレイアウト40種類を集めた「Layout Gala」 - GIGAZINE
サイトのコンテンツのレイアウトを考える場合、コンテンツをどのようなレイアウトでは位置すればいいのか悩む場合が多々あります。2コラムにするのか3コラムにするのか、それぞれのコラムの下にさらに子コラムを入れるのか否か、右サイドに置くのか左サイドに置くのか、などなど。 そんな場合に参考になるのがこの「Layout Gala」。CSSによるレイアウトの例が40種類あるので、自分の作りたいサイトのスタイルに近いレイアウトを実際に見てから、CSSファイルをダウンロードできます。Layout Gala http://blog.html.it/layoutgala/ 全部のレイアウトのファイルを詰め込んだファイルのダウンロードは以下から。 http://blog.html.it/layoutgala/allLayouts.zip また、「Yahoo! UI Library」にも単一のCSSファイルで100
はてな内の2カラムレイアウト - tikeda's blog
最近のリニューアルなどを経て、はてなのサイトは、2カラムでブラウザサイズに合せてメインカラムが可変するレイアウトが増えてるのですがキーワードページなどメインカラムの要素が様々だったり、カラムの上下左右と柔軟性が必要な場合が多く、色々やりくりした結果、floatを使った以下の方法で定着しています。 HTML <div id="main"> <div class="box"></div> <div class="box"></div> </div> <div id="sidebar"> </div> CSS #main{ float:left; width:100%; } #sidebar{ float:left; width:250px; background:#CCC; margin-left:-260px; } .box{ margin-right:260px; }こうすると、メインカラ
CSSレイアウトの定石 WinIE6バグ回避法
CSSを使ったレイアウトをする際にWinIE6のバグを回避するための「定石」をまとめておきます。 とくに重要だと思うものは強調してあります。参考としてバグ辞典へのリンクも用意しました（つまり回避法を用いない場合にどんなバグが発現するか）。 フォントサイズ関係 font-sizeは%かpxで指定する。 キーワードで文字サイズを指定すると標準モードと互換モードで文字サイズが変わる(IE6) em単位で指定した値が文字サイズ変更後に正しく反映されない(IE6) ボックスモデル関係 widthと同時に左右borderや左右paddingを指定しない。heightと同時に上下borderや上下paddingを指定しない。 ボックスの幅や高さを算出するときにパディングやボーダーのサイズを含めてしまう （ブロックレベル要素を内包するボックスにはpaddingを指定しない。） 左右ボーダーとパディングを設
Webベースですぐにデザインを反映できるCSSエディタ:phpspot開発日誌
Web-based CSS Editor Tamkey It is a very strong web tool for weblog owner. "Tamkey CSS Editor" can modify your current stylesheet and easily change it what you want. Styles will be updated with a single click and you can verify it at the same time. You can also find the CMS/BLOG special selector with "Red Mark". The current selector will be in a red box while you press the "Red Mark" button. Tamke
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
