背景画像の表示方法-基本編
今回は、「角が丸い背景（角丸）の実現方法」をご紹介していきます。 サイドメニューや、コンテンツをグループ毎に表示する際など、 角が丸くなっている枠で囲まれているページを見たことがあるかと思います。 この角が丸くなっているボックスのことを通称「角丸」といいますが、 みなさんはこの角丸をどのようにコーディングされていますか？ css3では、角を丸くするスタイルや １つの要素に複数背景画像を設定することができますが、 まだ策定段階（対応していないブラウザがほとんど） のため、今回は触れません。 角丸の実現方法はいくつかあると思いますが、 私からは下記の3パターンご紹介します。 ・分割なし ・2分割 ・3分割 （通常はこちらを使用） 「分割なしのパターン」 これは、普通に背景に設定するだけのパターンです。 （htmlコーディング例） <div class="entry1"> テキスト<br />
正規表現をいまのうちに覚えておきたい人のためのリソース集
HTML5で正規表現がサポートされる、といったことをきっかけに、正規表現はプログラマだけでなくWebクリエイター全体のスキルとして求められていくものになっていくのではないでしょうか（参考：あまり知られていないけれど、HTML5では正規表現が使えるようになる ）。 ここではそうした正規表現の初学者や、一度挫折したけど再入門したい人、そしてより高度な内容をマスターしたいすべての人のためのリソース集を作りました。 初学者向けには「はじめての正規表現」 「はじめての正規表現」は、文字通り正規表現という言葉は知っていても中味はよく分からない、という初学者の方にぴったりのコンテンツ。紙芝居形式のプレゼンテーションで楽しく正規表現について把握できます。 はじめての正規表現 初学者の方には、次の2つの記事も手っ取り早く読めて概要を把握できますので紹介しておきます。 使うほどに良さが分かる正規表現（1/2）
[CSS]さまざまな指定方法によるフォントの見え方を比較 -メイリオ・ＭＳ Ｐゴシック・ヒラギノ角ゴシック | コリス
スタイルシートを使用してフォントサイズの指定を行う場合、いくつかの方法があります。 absolute size キーワードで指定、フォントサイズはUAに依存 ex.)small, medium relative size 親要素に対しての相対指定 ex.)smaller, larger length 正数で指定、使用できる単位は「in, cm, mm, pt, pc, em, ex, px」 ex.)10pt, 1em percentage 親要素に対してのパーセント(%)指定 ex.)100%, 120% この中から、キーワード、em、pt、px、パーセントで指定をし、主要フォントでどのように表示されるかを比較しました。 フォントスタイルは、上から「メイリオ」「ＭＳ Ｐゴシック」「ヒラギノ角ゴシックW3」「Osaka」の順番で、「メイリオ」はWindows Vista、「ＭＳ Ｐゴシック
AcidテストとWebブラウザの仕組み（1/2） － ＠IT
Webブラウザ非互換性の温床となったのは何か？ 株式会社ピーデー 川俣晶 2008/7/3 Ｉｎｔｅｒｎｅｔ Explorer 8.0やFirefox 3.0で注目されるWebブラウザ。いまこそ、復習しよう。Webブラウザの非互換性の発生源は何だったのか？ （編集部） Webブラウザを総復習 Internet Explorer 8.0のベータ版が提供され、Firefox 3.0が正式リリースされるいま、Webブラウザをめぐる状況は再び激動しようとしています。 ここで、私たちWebブラウザのユーザーは、新しく提供されるWebブラウザのどれを使うべきか、あるいは、従来どおりのWebブラウザを使い続けるか、選択を行う必要に迫られます。 しかし、いまの私たちは、Webブラウザ選びを行うために必要な基礎知識を本当に持っていると、自信を持って断言できるでしょうか? そんなことは分かっている、と思うかも
自分的HTMLテンプレートの組み方 | Takazudo Clipping*
自分的HTMLテンプレートの組み方と例です。 まぁ、やるたびにちょこちょこ変えてるんですけど、2009年7月版ってことでざっくり説明。 空テンプレ モジュール一覧 サンプル ダウンロード用 エリアとモジュール 繰り返し使用される要素の塊をモジュールと呼び、エリアの中にこれを並べてページを作成するのを基本とする。 モジュールの開始要素には、「mod_moduleName」のようにclass（もしくはid）をつける。 モジュールやエリアのclass/idを起点に全てのスタイルを指定する。p、h1～h6、blockquote、table等、要素自体に直にスタイルを指定してはいけない。（グローバル変数を使っているような状態になってしまうため、以降考慮するのが面倒。リセット程度に済ます。） モジュールにスタイルを指定する際には、mod_moduleNameを起点としてスタイルを指定し、カプセル化を
[CSS]実用的なものからマニアックなものまでリスト要素をスタイルするベストプラクティス
実用的なものからマニアックなものまでリスト要素をスタイルするベストプラクティスをDev Snippetsから紹介します。 Styling your Lists: 20+ Brilliant How to's and Best Practices
CSSでfloatを指定したボックスを含むボックスの背景が出なくなる件 - Fsiki
「CSSで段組したらFirefoxで背景が出ねーよっ」て話をよく聞くので色々試してみました。 コンテンツメニュー 元になるHTML 特に何も考えずfloatを使った場合 外のボックスに幅を与えてみる 一般的な解決方法 その他の解決方法 overflowを使う 最終回答 番外編 更新履歴 このドキュメントについて 元になるHTML <div id="container"> <div class="leftBox">内容</div> <div class="rightBox">内容</div> </div> 例1(ブログ) class="leftBox"のボックスの内容は「サイドバー」。class="rightBox"の内容は「記事部分」。 例2(ウェブサイト) class="leftBox"のボックスの内容は「ローカルナビゲーション」。class="rightBox"の内容は「情報」。 例3
CSS Flamework -CSSによる段組レイアウト-
CSS による段組レイアウト 文書構造を極力いじらずにレイアウトを変更できるようなフレームワーク。 以下の各サンプルでは分かりやすいように head 要素内の style 要素でスタイルを指定、先頭で defaultReset.css と common.css をインポート。 実際に使用する際には、style 要素ではなく link 要素で core.css などにリンクして、そこに defaultReset.css などとともに layout.css としてインポート。 この文書の詳細については、「CSSによる段組レイアウトのフレームワーク」を参照してください。 2 カラム 文書構造は以下の通り。メイン、サブの順番。 div.container -div#head -div.content --div#mainContent ---div.section --div#subContent
HTMLの提案書を書こう | Takazudo Clipping*
HTMLなんかどこに頼んだってかわんねーよ！というわけじゃない。 ちょっと前に、会社がコンペに参加するとかでHTMLの提案書を書いた。要件は、もう設計とか完了していて、ワイヤーフレームとかチャートとか用意しちゃっている気合いの入ったクライアントで、デザインとCMSに組み込むためのHTMLテンプレート（とガイドライン）を作ってーというもので、自分が書いたのはHTMLのところ。 まー、最初は自分が全体書いてて、ユーザーありきで設計してデザインしてコーディングしてってやってるんですーという、ワークフローな感じのことを書いたのだけれども、社内のWeb仙人に駄目だしされ、もっと特化したものを書け！大体、デザイン以降が要件なんだから、前半まったく意味ねーよ！ってことで自分の書いたものはフルボツになり、自分はHTMLのとこだっけ書くことになりました。 しかしまぁ、前からこんな、HTMLで何がいいわけ？み
PhotoShopのPSDファイルをXHTML＆CSSに一発変換できる「psd2css」:phpspot開発日誌
Free, Fast and Easy CSS webpages! | psd 2 CSS Online psd2css online converts your fantastic, creative, artistic, no holds barred web page designs into strict XHTML compliant CSS web pages automatically. PhotoShopのPSDファイルをXHTML＆CSSに一発変換できる「psd2css」 PSDファイルをアップロードすると、内容を読み取った上で、レイヤーごとにブロックが分けられた状態のXHTML＋CSSを取得できます。 簡単なPSDファイルを送ってみたところ、完全ではないですが、再現することが出来ました。 PhotoShopにも同じような機能はありますが、必要な画像のみトリミングしてくれ
3キャリア対応ケータイXHTMLのTIPS 8つ : アシアルブログ
最近ケータイサイトの開発を行っているのですが、キャリアや機種によって動作にいろいろと違いがあり、なかなか面倒ですね。 キャリアごとにテンプレートを分けて記述するのは手間なので、基本的に共通テンプレートで記述したいところですが、どうしても振り分けをしないと駄目なこともあるため、今回やってみて気がついた違いなどについてまとめてみました。 なお、いわゆる第三世代携帯電話(DoCoMo FOMA, au WIN, SoftBank/Vodafone 3G)でXHTML対応機種のみを対象としています。 ■文字コード UTF-8で統一して大丈夫そうなのですが、DoCoMoのみ特定の文字(三点リーダーや丸数字など)をフォームから入力した場合に消えてしまったりするようですので、DoCoMoは入出力をShift_JISにする必要があります。 ※上記で特定の文字のひとつとしてあげました三点リーダーですが、UT
PearBlog » Blog Archive » Ktai Styleでi-modeのXHTML
※下記はVer0.92でのことで現在の0.93Ver～で即時反映されています。 WordPressでケータイサイト構築にかかせない、Ktai Style。大変お世話になっております。 現在、WPJフォーラム（http://phpbb.xwd.jp/）の調子が悪く書き込みしようと思ってもNGなんで、あれやこれやと調べてみました。 で、何を調べていたかっていうと、「i-modeでXHTML書式でスタイルシートが反映されない。はて、さて？auはOKなんだけどもなぜ？」っていう問題。 まだ、ぐぐってもあまりないネタということで、だれかの為になるかもですのでメモっておきます。 「WordPressでKtai Styleプラグインを使って、ドコモi-modeのXHTMLでCSSを反映させる」 のをどうやるか。で、ここ半日ほど調べた結果のメモです。 結論から先に。 １）Content-Type: app
2010年に勧告される「HTML5」は「HTML4」と何が違うのか？ - GIGAZINE
現在、ネットで一般的に使用されているHTML言語は「HTML 4」であり、1997年12月18日にW3C勧告として仕様が発表されたものです。これが実に10年以上の月日を経て、バージョンアップと言っても差し支えない「HTML 5」になるとのこと。最終版が登場するのは2010年9月頃の予定。 というわけで、来たるべき「HTML 5」時代に向けて、一体何がどう変わったのか、何が便利になるのかを見てみましょう。 HTML 5 HTML 5 differences from HTML 4 HTML 5 における HTML 4 からの変更点 面白いのがブログや記事向けの「article」要素や、画像やビデオなどの埋め込み内容に説明文やキャプションを付加する「figure」要素、マルチメディアのための「audio」および「video」要素、さらに新しい属性としてリンクをたどるときにpingされるリソース
もう、class名やid名で悩まないんだからっ！！｜CSS HappyLife
class名やid名って付ける時悩みませんか？ 今でもボクは結構悩むんですが、そんな悩みを解決する為に、人さまのソース覗きまくってよくあるclass名とid名を拾ってきました。 これで、チョットだけ作業効率アップ！？ 2010年6月10日追記： この記事自体、2007年 1月15日に書かれてるんでかなり古いです。 あくまでも参考程度に留めてもらうのが良いかと思います。 今だったら、html5の要素を参考にしたりして付けるのが、今後の事を考えると良いのかなーと思います。 また、善し悪しの判断はせずに公開しているものですが、位置に関するのは仕様変更に弱くなるのでオススメはしません。 全体に使えそうな感じ wrap wrapper top-wrapper wrapperAll frame mframe all-frame container page pagetop all allContent
新規サイト制作セット（CSSライブラリ＋基本フォルダ構造＋HTMLテンプレート）、一式zipでダウンロードできるようにしました
Account Suspended This Account has been suspended. Contact your hosting provider for more information.
JavaScriptを使わないでブラウザ別に画像を振り分けて表示するHTMLを書く
ちょっと思い出したのでクイズを書いてみます。 以下の条件で、IEでは、imgie.gif、 Firefoxでは、imgfx.gif、その他多くののブラウザでは、imgother.gif ノミを表示するHTMLを作ってください。 JavaScriptなどのスクリプトは使わない CSSを通じてハックしない HTMLの書き方のみで勝負するが、validでなくても良い ※最新のブラウザで実現できなかったらすみません。なんだお、とか叱らないでくださいませ。 このテクで、ブラウザごとにJSファイルや外部スタイルシートとかを分別できないのかなぁと昔、妄想したことがあります。 hasegawayosukeさんへ http://d.hatena.ne.jp/hasegawayosuke/20070927/p1 なんと申しますか、すごいものを拝見させて頂きました。ある意味勉強になります。ありがとうございます。
SoozyConference2 - mala
mala トップページページ一覧メンバー編集 SoozyConference2 最終更新： mala__ 2007年08月10日(金) 10:45:39履歴 Tweet SoozyConference #2 刺身の上にタンポポを載せる仕事とマークアップエンジニアの区別が付きません 最速廃人研究会 主任研究員 ma.la これまでのあらすじ http://del.icio.us/miyagawa/戦争 http://b.hatena.ne.jp/t/cssnite などをご覧ください。 こんなぐあい 1 cssniteの飲み会で鷹野がエンジニア差別発言 河野さんが金の匂いが強すぎる発言 空前の収支決算報告ブーム amachangがmixi日記にCSS Nite嫌い発言 こんなぐあい 2 鷹野の全然空気読めてないコメント amachangがぶち切れて、表日記に書く malaが便乗 刺身が乱入
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[CSS]クロスブラウザ対応のフリーのナビゲーション集 -Styled Menu
Dynamic Drive CSS Library- Practical CSS codes and examples
ウノウラボ Unoh Labs: 3G携帯のみに限定したサイトを作る場合