タグ

webdesignとcssに関するkeloinwellのブックマーク (35)

  • IE7.js登場 - IEのCSS/HTML非準拠はこれで対応 | エンタープライズ | マイコミジャーナル

    Dean Edwards氏は7日(米国時間)、IEの動作をW3C標準仕様へ準拠させるためのライブラリIE7.jsの最新版を公開した。IE7.jsはJavaScriptで開発されたMS Internet ExplorerのHTML/CSS表示を調整するライブラリ。IE7.jsを使うことでMSIEのHTML/CSSまわりの表示処理をよりW3C標準規約に準拠したものにする。IE5やIE6で透過PNGを表示できるようにもなる。 IE7.jsは基的にMSIE5/6向けに用意されていたライブラリをIE7に対応させたもの。これまでのモジュール構造は廃止され、IE7.jsやIE8.jsといったように個別のファイルに分離されている。ホスティング先もGoogle Codeへ変更された。IE7.jsはサイズも縮小され、圧縮した状態で11KBほど。またbase2.DOMのセレクタエンジンを使うことでより高速に動

  • ブログテンプレート作成ツールで簡単ブログデザイン! - CSSEZ

    Cssez : ผลบอล บอลวันนี้ วิเคราะห์บอล ข่าวฟุตบอล เราคือผู้นำของเว็บดูผลบอลสดออนไลน์ ผลบอลสดภาษาไทย 7m ข่าวฟุตบอล สรุปผลบอล ไฮไลท์ ที่สามารถเช็คผลบอลทั่วโลก มีทั้งภาษาไทย Livescore 7m 888 ผลบอลมีเสียงวันนี้ล่าสุด พรุ่งนี้ หรือเมื่อคืน รวบรวมเว็บผลบอลต่างๆมากมายมารวมไว้ที่เดียวเช่น livescore.com 7m.cn 888scoreonline.com thscore.cc และ spbo.com รวมทั้งมีวิเคราะห์บอล ตารางบอล คะแนนบอล และดูบอลสดออนไลน์

    keloinwell
    keloinwell 2007/07/28
    一応、メモ。
  • 画像を角丸にしたり影を付けたりできる「Corner.js」

    画像の角をまるっこくしたり、影を付けたりといったことが簡単にできる「Corner.js」というのが公開されたようです。これらを組み合わせることも可能なのでかなり応用の幅は広いかと。 実際のサンプルは以下の通り。 Corner.js http://www.netzgesta.de/corner/ これはノーマル状態 グラデーションシェードを付ける 影を付ける 角を丸くする へこんだ感じの影にする そしてそれらを全部組み合わせることも自由自在 これぐらいまるくすることも可能 オリジナルのアイディアは「reflection.js」から来ているようですが、それにしてもすごい。

    画像を角丸にしたり影を付けたりできる「Corner.js」
    keloinwell
    keloinwell 2007/04/22
    角丸みんな大好き。
  • 最初に指定しておくと便利なCSS | Tech de Go

    keloinwell
    keloinwell 2007/03/12
    メモ。
  • サイトを訪問する時間帯によって読み込むCSSを切り替える方法 - GIGAZINE

    ページの見かけを決めるCSSについていろいろなデザインが今までありとあらゆる場所で検討されてきましたが、今度はそのCSSを時間帯によって切り替えるという方法です。朝なら朝っぽいCSSで、夜なら夜っぽいCSSを使うというようにして、いろいろと応用が利きそう。 詳細は以下の通り。 Katgal.com: New and Improved このアイディアをさらに延長したアイディアが以下にあります。 nicholasjon.com :: Time Sensitive {1/14/2007} 上記サイトでは以下のような感じで時間だけでなく、天気によっても変わっていけばおもしろいというように提案しています。 はれ くもり 夜

    サイトを訪問する時間帯によって読み込むCSSを切り替える方法 - GIGAZINE
    keloinwell
    keloinwell 2007/03/12
    メモ。
  • TRANS [hatena] - 印刷用CSSをまとめてみた。

    以前、絵文禄のことのはさんのところで、サイトの横幅を640ピクセルにする理由――統計と現状に基づく結論というエントリーがあった。それから、ちょっと印刷用CSSに興味を持って、色々と調べてみたり、自分で書いてみたりした。そのまとめ。 ちなみに、#naviがグローバルナビゲーション、#primaryがメインコンテンツ、#secondaryがサブメニュー、#footerがフッター。 とりあえず、最低限やっておいたほうがよいこと。 body { font-size: 12pt; color: #000000; background-color: #FFFFFF; } a:link, a:visited { text-decoration: underline; color: #000000; } img { border: 0; } 印刷で読まれることを勘案するのなら、font-sizeはある程度

    TRANS [hatena] - 印刷用CSSをまとめてみた。
    keloinwell
    keloinwell 2006/12/09
  • 小粋空間: CSSでブログに影をつける - ドロップシャドウ画像ファイルの作り方

    CSSでブログに影をつける(ドロップシャドウ)」でドロップシャドウを背景画像として設定する方法を説明しましたが、肝心の背景画像の作り方で悩んでいる(かもしれない)方のために、Photoshop 6(CSは持ってません)を利用した作成方法を紹介します。 [ファイル]-[新規]で(固定レイアウトの場合は)ブログ幅のウィンドウを作成。実際の横幅はもっと広いと思いますが、説明上、ここでは 250px に設定しています。 新規作成のウィンドウはこんな感じになります。 [レイヤー]パレットに表示されている[背景]をダブルクリック。 開いたウィンドウのレイヤー名は「レイヤー0」になっていると思いますので、そのまま[OK]をクリック。これは、[背景]から任意の名前に変更することで、レイヤーのロックを外してドロップシャドウ等の効果を設定できるようにするための操作です。 これで[レイヤー]パレットに表示され

    keloinwell
    keloinwell 2006/11/30
    影付き画像の作り方。
  • CSSデザイン格付けサイトいろいろ - GIGAZINE

    CSSでデザインされたサイトを集めた「csstux」は、CSSを使ってかっこよくデザインされたサイトがいろいろノミネートされており、それぞれにトラックバックを送ったり、コメントを付けたりすることが可能です。また、各サイトはレートによる格付けがされているので、人気の高いデザインがどれなのかもすぐにわかるようになっています。 これ以外にも同様のサイトはいろいろあるので、知る限りのCSSデザイン格付けサイトをまとめてみました。ウェブデザインの際の参考になるのではないかと。 今回最初に紹介する「csstux」はこれらのCSSデザイン格付けサイトの中ではかなり新参の部類なので、知らない人も多いのではないかと。 以下のフォームから自分のサイトをノミネートさせることも可能です。 csstux - Submit your site 2つめは「CSSElite」 ノミネートするには以下のページに書いてあるメ

    CSSデザイン格付けサイトいろいろ - GIGAZINE
    keloinwell
    keloinwell 2006/09/20
  • 100%、CSSのみで構成されるメニューの作り方 - GIGAZINE

    JavaScriptがオフになっているブラウザでも問題なく利用できるメニューです。なおかつ操作性は損なわれていません。ほとんどのDHTMLをサポートしているブラウザで動作してくれます。 作り方や実例は以下から。 Pure CSS menus http://www.howtocreate.co.uk/tutorials/testMenu.html 以下も同じ種類のメニューです。 Pure CSS Menus http://meyerweb.com/eric/css/edge/menus/demo.html CSS / DHTML Hybrid Navigation Bar http://www.brothercake.com/scripts/navmeister/page.php CSSだけでもけっこうなんとかなるものですね、めもめも。

    100%、CSSのみで構成されるメニューの作り方 - GIGAZINE
    keloinwell
    keloinwell 2006/08/02
  • Dreamweaverの代わりになるフリーソフト「Aptana」 - GIGAZINE

    JavaScriptの開発環境、要するにJavaScript用IDEという位置づけなのですが、HTMLCSSの構造をアウトラインで示してくれたり、文法の間違いを指摘してくれたり、やっていることはほとんどDreamweaverの持っている機能と同じです。 特に面白いのはJavaScriptCSSなどがInternetExplorerとFirefoxに対応しているかどうかが一発で分かる点。JavaScriptのエラーについても細かい部分まで指摘してくれます。つまり、実行しなくてもエラーがドコにあるのか分かる「静的解析」が可能というわけ。 WindowsMacintosh、Linux版があり、Eclipseプラグインとして動作するバージョンもあります。 スクリーンショットや実際に動かして機能を解説しているムービー、ダウンロードは以下から。 Aptana: The Web IDE http:

    Dreamweaverの代わりになるフリーソフト「Aptana」 - GIGAZINE
    keloinwell
    keloinwell 2006/08/01
    フリーでWeb開発。
  • ちょっと小粋なCSSのナビゲーションメニュー「ADxMenu」 - GIGAZINE

    WindowsXPやOfficeXP風のメニュー、シンプルなメニュー、ミニタブ型、横に展開するタイプなど、いろいろな幅広い応用が可能です。 例とコードのダウンロードは以下から。 ダウンロードや設置方法は以下のページから。 aplus :: ADxMenu http://www.aplus.co.yu/adxmenu/intro/ 実際の例は以下にあります。 http://www.aplus.co.yu/adxmenu/examples/ 例その1:WinXP style http://www.aplus.co.yu/adxmenu/examples/winxp/ 例その2:Simple style http://www.aplus.co.yu/adxmenu/examples/simple/ 例その3:Minitabs http://www.aplus.co.yu/adxmenu/exam

    ちょっと小粋なCSSのナビゲーションメニュー「ADxMenu」 - GIGAZINE
    keloinwell
    keloinwell 2006/07/24
  • 高品質でフリーのウェブサイトテンプレート集「TemplatesBox.com」 - GIGAZINE

    通常のウェブサイトだけでなく、Flashサイトのテンプレートやロゴマークのテンプレート、バナーやボタンまで置いてあります。これらがすべてフリーというのが驚き。全部で200個以上あるようです。 TemplatesBox.com http://www.templatesbox.com/ ウェブサイト用テンプレートは利用したPSDファイルやフォントも同梱されており、DreamweaverかFrontpageで編集しやすいようにできています。 ウェブサイト用テンプレートあれこれ http://www.templatesbox.com/templates.htm ロゴデザインのテンプレートはPSDファイルとフォントファイルが同梱されています。親切。 ロゴデザインのテンプレート http://www.templatesbox.com/free-logo-templates/index.htm ウェブサ

    高品質でフリーのウェブサイトテンプレート集「TemplatesBox.com」 - GIGAZINE
    keloinwell
    keloinwell 2006/07/17
    フリーのテンプレート。
  • ブログのCSSデザイントップ20 - GIGAZINE

    CSS BloomというブログなどのCSSデザインをみんなで評価するサイトにて、高評価のデザイントップ20です。 日のブログデザインのコンセプトとちょっと違うのが多く、見ているだけでも面白いです。ブログデザインの展示会といった感じ。また、どんなデザインのブログにしようかな~と思っている場合にはかなり参考になります。 Top 20 Blog Designs | Blog http://silentbits.com/?p=339 http://silentbits.com/?p=385 以下、上記サイトで出てきたトップ20のサイト第1弾。 Veerle's blog 2.0 - Webdesign - XHTML CSS | Graphic Design Avalonstar. The Aries Project. By Bryan Veloso. Matt Brett Joshuaink

    ブログのCSSデザイントップ20 - GIGAZINE
    keloinwell
    keloinwell 2006/07/08
    参考に
  • CSS3に関する情報をまとめたサイト「CSS3.info」

    次のIE7やFirefox、Opera、Safariなどでサポートされる「CSS3」に関する情報をまとめたサイトです。テーブルの角を丸くするとか、文字に影を付けるとかの効果を確認できる実際にCSS3を使ったサンプルもあります。 Everything you should know about CSS3 - CSS3.info http://www.css3.info/ プレビューいろいろ。 CSS3 Preview - CSS3.info http://www.css3.info/preview/ 例としては以下のような感じです。なお、FirefoxなどのCSS3に対応したブラウザで見ないと効果がわかりませんのであしからず。 角を丸くする、四隅の内2つとか、上だけとか下だけとかも可能 http://www.css3.info/preview/rounded-border.html 文字に影

    CSS3に関する情報をまとめたサイト「CSS3.info」
    keloinwell
    keloinwell 2006/06/14
    CSS3に関する情報。
  • IE7 は CSS ハックと DOCTYPE スイッチを過去のものとするか?

    IE7 で従来の CSS ハックが使えなくなることは予告されていた。 Cascading Style Sheet Compatibility in Internet Explorer 7 Internet Explorer 7で使えなくなるCSSハック 一般向けの IE7beta2 の公開を受けて書かれた佐藤信正さんの記事は、文書型宣言の書き方次第で描画ルールを切り替える機能(いわゆる DOCTYPE スイッチ)と CSS ハックの違いがうまく説明されておらず、一部に誤解を招いているように思う。 Internet Explorer 7ベータ2の不具合からWebデザイン業界の混乱が見えてきた(佐藤信正さん) IE の DOCTYPE スイッチは、基的には、新しい HTMLCSS 解釈モードを搭載したブラウザに、古い(誤った)解釈をさせるために用意された機能だ。多くのウェブ製作者が文書型宣

    keloinwell
    keloinwell 2006/05/28
    IE7でのCSSなどの話。
  • GIGAZINE - CSSで角をもっと丸くする方法いろいろ

    「スライディングドア」と呼ぶ方法で全体をヘッダー、ボディ、フッターの3つに分割して、コーナー部分などはオーバーレイとか使ってみましょう、という方法。 Another attempt at CSS rounded-corner dialogs using the sliding doors technique http://www.schillmania.com/projects/dialog/ 使用しているコードと画像のダウンロードはこちらから http://www.schillmania.com/projects/dialog/dialog.zip また、こちらに透過PNGを利用したバージョンもあります。 Another attempt at CSS rounded-corner dialogs using the sliding doors technique http://www.s

    GIGAZINE - CSSで角をもっと丸くする方法いろいろ
    keloinwell
    keloinwell 2006/05/25
    流行りだね。
  • CSS+JavaScript によるカラムレイアウト切り替え

    公開テンプレート(Movable Type/Serene Bach/sb/ FC2ブログ/Seesaaブログ)でカラムレイアウトをリアルタイムに切り替えるカスタマイズです。ここでは公開テンプレートをサンプルに説明していますが、同様の構造であればどのようなテンプレートでも実現可能です。 とりあえず、どのような動作になるかをサンプルでお試しください(中央上部のプルダウンメニューで操作できます)。 以前、類似の記事でスタイルシート切替や3カラム可変と3カラム固定を切り替えるをエントリーしていますが、これらはいずれもスタイルシートを新たに追加する必要がありました。つまり「スタイルシートを切り替える」というカスタマイズでした。 今回のカスタマイズでは、スタイルシートの追加や切り替えなしにレイアウトを切り替えることができます。 その理由は、現在公開しているテンプレートでは1つのスタイルシートに 3カラ

  • 効率よく育てやすくデザインする - tikeda's blog

    デザイナーが1人だと効率のよいデザインワークってのが肝で最近意識してる事です。 CSS 言わずとしれてますが、後でページ追加したり、機能追加する時など上の項目をコピーして書き換えただけで、デザイナーじゃなくても項目追加を簡単にできます。 テキスト要素はなるべく画像にしない 特にタイトルとか画像にすると、後でページ追加したり項目を増やすのにデザイナーの作業が入るので。なるべく避けてます。 シンボルイメージはグローバルなイメージで サービスシンボルは一番の特徴を捉えるだけのシンプルに(ダイアリーだと「日記を書く」、人力だと「質問と回答」)。細かい特徴を含ませると後で追加された特徴や削除された機能がある度に手を加えないといけないので。 シンボル作りはillustratorで粘る 特にサービスのシンボルや利用頻度の高いアイコンはどんな使い方をどんなサイズで利用されるかが分からないので、photoh

    効率よく育てやすくデザインする - tikeda's blog
    keloinwell
    keloinwell 2006/05/16
  • GIGAZINE - 使えるCSSコードいっぱい「Dynamic Drive CSS Library」

    CSSを使ったタブ型の各種メニューとか、CSSによる画像のポップアップとか、ドロップシャドウやページカールの作り方などのコードが実際の例と一緒に置いてあります。実例を見てから選ぶことができるので、希望通りのものが手に入りやすいです。 Dynamic Drive CSS Library- Practical CSS codes and examples http://www.dynamicdrive.com/style/ RSSもあるので新しいコードが追加されればすぐにわかります http://www.dynamicdrive.com/style/csslibrary/rss/ コードの種類としては以下のような感じでカテゴリ分けされています。 横型のメニュー http://www.dynamicdrive.com/style/csslibrary/category/C1/ 縦型のメニュー h

    GIGAZINE - 使えるCSSコードいっぱい「Dynamic Drive CSS Library」
    keloinwell
    keloinwell 2006/05/11
    CSSの例がいっぱい。
  • 角丸ライブラリ - tikeda::Diary:

    最近角丸を作る機会が多かったので、今後の為に色々整理してたんですが、公開しておきます。使えそうだったらいじって使ってください。中身の文書を書き換えれば上下左右と可変するように柔軟になっています。また、一部PSDも同封してます。 0501curve.zip 中身はこんな感じ。 ベーシックなタイプ 01:小さ目な角丸 02:大き目な角丸 03:斜線の角丸(背景画像をループ) 04:ストライプの角丸(背景画像をループ) 05:木模様の角丸(背景画像をループ) 06:リボンのついた角丸(背景画像を固定) 4つ角をの内側を透過GIFにしてるので、大枠の背景を変えれば発想次第で色々と使えると思います。HTMLCSSは大体こんなんです。divが多いのがちょっと嫌な感じですが。はてな内ではspanでやってたりもします。 HTML <div class="curve-01"> <div class="cu

    角丸ライブラリ - tikeda::Diary: