[CSS]使い勝手を考慮した、5つのスタイルシートのフォーマットdavid walsh blogのエントリーから、可読性・視認性やファイルの容量など、使い勝手を考慮した5つのスタイルシートのフォーマットを紹介します。 How I Format My CSS Files セレクタごとに1行で記述 セレクタごとに、プロパティ・値なども全てを1行に記述します。スタイルシートの行数が短くなり、ファイルサイズの軽減にもなります。 多くの人は、視認性が低くなると、意見するでしょう。
CSS - dtをfloatする場合の注意点 | Try | d-spica
dtをfloatし，margin, padding, borderなどをあてる場合の注意点です。 Tried at 2008-05-12 まず，マークアップは次の通り <dl class="recent"> <dt>2008-05-12</dt> <dd>ページ5を更新しました。テキストテキストテキスト。</dd> <dt>2008-05-10</dt> <dd>ページ4を更新しました。テキストテキストテキスト。</dd> <dt>2008-05-07</dt> <dd>ページ3を更新しました。テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。</dd> <dt>2008-05-06</dt> <dd>ページ2を更新しました。テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。</dd> <dt>2008-05-04</dt>
CSS, JavaScript, ActionScript, PHP, SQL, ASPなどのチートシート集
WebTeckerのエントリーから、CSS, JavaScript, AJAX/JavaScript Frameworks, ActionScript, PHP, SQL, ASP, C# and VB.NET, C++などのチートシートを紹介します。 Programing Cheat Sheets ActionScriptのチートシート ActionScript Cheat Sheet Ajax/JavaScript Frameworks Prototype Cheat Sheet Scriptaculous Cheat Sheet(PDF) MooTools Cheat Sheet jQuery Cheat Sheet YUI Cheat Sheet
2008-04-01
「こんにちわ、皆さんご機嫌いかがですか」 「3月21日から 公開デザイン祭2008春 が、始まっていますが、どうです？4月6日の締め切りに向けて制作は進んでいますか？」 「大賞はAmazonギフト券5万円分、と気になるものの、 『スタイルシートって難しいんじゃないか？』 と考えている人も多いかもしれませんね」 「でも、全然そんなことはありませんよ」 「今日は簡単に公開デザインを作る過程を紹介してみましょう、これを読んで皆さんも是非チャレンジしてくださいね」 「そもそも公開デザインとは何か？ついてはこちらを参考にしてください 他人のデザインをインポートする（公開デザイン一覧） - はてなダイアリーのヘルプ」 「はてなダイアリーに慣れない方が公開デザインを作るにあたって、最初につまづくのはどういう仕様なのか、分からないことでしょう。スタイルシートのことは分かっても、ダイアリーの構造までは把握し
GoogleっぽいCSS （会社ステルス閲覧用） - 朱雀式
ブログ用 Ｇｏｏｇｌｅ迷彩スタイルシート！ができました。構想３分！制作１５分！ 仕事中に自分のサイトを閲覧する機会は結構あります。（すみません！） 「そういえばあそこ、どう書いたっけな」とか「昼休みにちょっと書き直そう」とか「スター付いてないかな」とか。 しかしそういったときに、このデザインをあまり人目にさらしすぎるのは考え物です。「あいつ、サボってやがるな」くらいならまだしも、燦然と輝く「朱雀式」のロゴを手がかりにサイトばれ…など（再び）した日には、目も当てられません。 といわけで、SS切替スクリプトを使って、あたかもＧｏｏｇｌｅの検索結果を眺めているかのような、Ｇｏｏｇｌｅ迷彩スタイルシートを用意しました！ （ここです） まあ相当読みにくいんですが、右上にあるプルダウンのセレクターでスタイルを切り替えられるので、通常は「朱雀式」で見ていただければと思います。 お使いになりたい方は、適当
CSSの擬似クラス：IE6/IE7でも使う方法あります - builder by ZDNet Japan
年間5,000件の問い合わせに対応 疑問を解消したいユーザーも答える情シスも みんな幸せになるヘルプデスクの最適解 大事なのは”仕事の段取り” 幅広い業務を任されているからこそできる ひとり情シス流の業務改善術 Kubernetes活用の最適解とは？ 今、注目のコンテナを活用した柔軟なIT基盤 運用、管理の課題を解決しメリットを最大化 ハイブリッドクラウド時代の救世主 企業ITを素早く進化させるためのAVS サービス開始から1年で大幅に機能がアップ 電話営業・インサイドセールの革新 AIによる自動文字起こし・会話分析が 音声コミュニケーションの可能性を拓く 新OSのWin11はどう進化したか ビジネス上の役割、開発の要因と Win11が目指した5つのポイントを紹介 データ活用は次のステージへ トラディショナルからモダンへ進化するBI 未来への挑戦の成功はデータとともにある AWSとAzur
1枚の画像からサイズ可変な罫線を表示する（1）：FirefoxとSafariのCSS - builder by ZDNet Japan
現在のWeb制作では、画像を使ってサイズ可変な罫線を表示する場合、辺やコーナー別に画像を用意して対応する。しかし、画像を作成するのに手間がかかる上に、画像の表示先として複数の要素（タグ）を用意する必要があるなど、HTML/XHTMLソースやスタイルシートの設定が複雑になるという問題がある。 それに対して、CSS 3ではborder-imageプロパティを利用することにより、1枚の画像からサイズ可変な罫線を表示する方法が提案されている。border-imageプロパティでは、ブラウザが1枚の画像を9つに分割して罫線の表示を行うので、これまでのように制作者が辺やコーナー別に画像を用意する必要がない。また、スタイルシートも などの1つの要素に適用するだけで設定できるというメリットがある。 Safari 3ではこの機能をサポートしており、-webkit-border-imageというプロパティで利
CSSレイアウト時のよくやる失敗と対処法｜WEB制作（html,css(スタイルシート) )｜プログラムメモ
■floatでレイアウトしたときのボックスの間に隙間が出来る →隙間が出来るボックス要素全てに float 要素を追加 ■ <div>内に配置した<img>が<div>よりサイズが小さいと隙間が出来る → 下記を追加 img { display: block; } ■ Win IEだけずれる時があり、ずれる大きさがフォントサイズによって変わる →ずれる<div>等に vertical-align を設定する（top 又は bottom） ■ <td>内のフォントが正しく指定したとおりでない（Win IE Mac IE） →<td>の中に<span>をいれて対応する ■MacIEで<div>を floatさせると表示が崩れる。 → フロートさせるdiv の width height 属性を指定する ■<ul><li>で画像リンクを作成したときに WinIEでフォントサイズを変更すると 隙間
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のみでクールな階層メニュー作成サンプル:phpspot開発日誌
Stu Nicholls | CSSplay | Cross browser flyout menu examples using only css CSSのみでクールな階層メニュー作成サンプル。 次のようなカッコいい階層メニューのサンプルが公開されています。 クールなのでそのままサイトに組み込んで流用できそう。 IE5.5 , IE6, IE7, Firefox, Opera 等で動作。 関連エントリ CSSでちょっと変わっているピル風の形をしたナビゲーションを作成 セクシーに動作するスライドメニューバー実装JSライブラリ クールにスライドするメニューを作成するJavaScriptライブラリ「Image Menu」 CSSのクールなメニューをオンラインで簡単生成「CSS Menu Generator」
CSS 切り替えスイッチ用スクリプト修正
以前紹介した、「CSS レイアウト切り替えスイッチ」、及び 「12 のレイアウトを切替可能なテンプレート」 ですが、特定の状況でスクリプトエラーが発生して正常に... 以前紹介した、「CSS レイアウト切り替えスイッチ」、及び 「12 のレイアウトを切替可能なテンプレート」 ですが、特定の状況でスクリプトエラーが発生して正常に動作しないとの指摘を受けましたので、ちょこっと修正しました。 原因は CSS の切り替え用スクリプトとして使用していた 「styleswitcher.js」 で、(X)HTML ソース内に、rev 属性を指定した link 要素が記述されていると 「Error: a.getAttribute("rel") has no properties」 のようなエラーが帰ってきて終了という状態になっていました。 でちょっと見直してみたんですが、styleswitcher.js
クールにスライドするメニューを作成するJavaScriptライブラリ「Image Menu」:phpspot開発日誌
Image Menu クールにスライドするメニューを作成するJavaScriptライブラリ「Image Menu」。 メニューにカーソルを合わせると、カーソル部分がアニメーションしながら開くメニューを実装できます。。 画像を変えれば、よりクールなメニューを作れそうですね。 必要なJSライブラリ,CSSをインクルードした後、次のようなコードで簡単に初期化できる模様。 <h2>Example:</h2> <div id="kwick"> <ul class="kwicks"> <li class="kwick opt1"><span>Lanscapes</span></li> <li class="kwick opt2"><span>People</span></li> <li class="kwick opt3"><span>Nature</span></li> <li class="kwi
CSS レイアウト切り替えスイッチ | WWW WATCH
Web サイトのレイアウトに関しては、横幅を固定した固定レイアウト、ブラウザのウィンドウサイズと連動するリキッドレイアウト、文字サイズと連動するエラスティックレ... Web サイトのレイアウトに関しては、横幅を固定した固定レイアウト、ブラウザのウィンドウサイズと連動するリキッドレイアウト、文字サイズと連動するエラスティックレイアウトの 3種類がよく使われますが、どのレイアウトが一番文章が読みやすかったり、利便性が高いのかって考えたときに、当然好みは人それぞれ。 じゃあ、その人の好みで、3つのレイアウトを切り替えられるようにしたらいいじゃんということで、そんな CSS 切り替えスイッチを作ってみました。 サンプルはこちらで確認できます 全ファイルのダウンロードはこちら （zip ファイル / 10KB） デフォルトでは横幅固定のレイアウトになっています。スイッチを押すたびにレイアウトが選択
Tag Cloudのスタイル - 3ping.org
タグクラウドの必要性についての是非はここでは置いておいて、このアイテムのデザインって色々考えさせられますね。 Vicuna CMSでも真面目に対応しようと重いケツを上げましたので、とりあえずサンプルとなるCSSスタイルを色々と書いてみました。 表示例とCSSファイルを置いておきましたので、気に入った表示があったらどうぞ使って下さい。 2007.10/21 追記・編集 Tag Cloud 10,11,12で.level5のフォントサイズが.level4と同じになってたのを修正 応用編としてTag Cloud 13を追加 単純に該当する記事が多いタグが他より目立てばいいだけなので、大抵のスタイルは大小の区別で表示しているけど、それだけじゃちょっと味気ない気もするので サイズ 色 明暗 彩度 色彩 形 というところでタグの強弱をより強調してみました。 HTMLは以下のような要素とクラス名で作って
CSSデザインカタログ
対応ブラウザは Windows：InternetExplorer6，InternetExplorer7，Firefox2，Opera9 Mac：Firefox2，Opera9，Safari2 ですが，ブラウザによって若干表示が異なる部分もあります。 XHTML 1.0 でマークアップしてあります。 DOCTYPEスイッチによる標準モードに対応しています。InternetExplorer6 でXML宣言をし互換モードになった場合にも対応しています。 Netscape7，Mac InternetExplorer5 では期待通りに表示されないものがいくつかあります。 便宜上，分類コード（div011-hp，table010 など）を class名にしてありますが，実際にお使いの際には適切な class名に変更してください。 すでにお使いのCSSファイルに新たにCSSコードを追加した場合，既存
リニューアル後のmixiを2カラム/750px幅化するユーザースタイルシートを書いてみた : akiyan.com
リニューアル後のmixiを2カラム/750px幅化するユーザースタイルシートを書いてみた 2007-10-01 別に2カラム原理主義者というわけではないのですが、カラム変更オプションが無くなったのでついカッとなって書いてみました。 目次 適用前、適用後 適用前 適用後 解説 Firefox向けで、ユーザースタイルシートの適用は「Stylish」拡張をインストールすると便利です。 2カラムにするだけではなく、個人的にほとんど使わない機能へのナビゲーションまで削除しちゃってるので、ちょっと注意が必要です。リニューアル後のmixiのHTMLはid名とclass名が変態的なまでにきっちり設定されているのでCSSがわかる方はソース眺めつつ調整してください。ユーザースタイルシートの内容は以下の通り 調整 全体の横幅 750px化 全体を中央揃え フッターリンク左右の余白調整 非表示 右カラム全部 ロゴ
CSS HappyLife
もう放置して長い当ブログ...なので、Adsenseの自動広告ってのを試してみようかと思ってONにしたら、すごいことになった！ これは中々に酷いですね。 とまぁそれはさておき、すごい久しぶりに個人の趣味っぽい感じのサイト作りました。 - 探そう！好きな恐竜 なんで恐竜！？って感じしますね。 正直、恐竜には全然興味なかった側の人間です。 もう完全にただのお知らせや告知ブログ...！ 初版の発売から4年経ち、ありがたいことに改訂のお話を頂いたので、6月～8月辺りに森田 壮さんと執筆を行い、2017年9月15日に改訂2版が発売しました。 かなり頑張って加筆・修正などを行ったので思ってたより大変な執筆でした。 初版と改訂2版の詳しい違いに関しては、サポートサイト に載せておいたのでそちらを見て頂けるとありがたいです！ 初版と改訂2版の違い | Web制作者のためのSassの教科書 改訂2版 - 公
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Scriptを使わないCSSエフェクト、Tipsいろいろ - DesignWalker
CSS Spriteを活用しよう - DesignWalker
HTMLテーブルの行を見やすくするテーブルクロスJavaScript*ホームページを作る人のネタ帳
