タグ

WebとCSSに関するshozzyのブックマーク (16)

  • ウィンドウサイズに応じてレイアウトを調整するJavaScriptライブラリ「Dynamiclayout.js」:phpspot開発日誌

    ウィンドウサイズに応じてレイアウトを調整するJavaScriptライブラリ「Dynamiclayout.js」 2006年12月27日- Particletree Dynamic Resolution Dependent Layouts ウィンドウサイズに応じてレイアウトを調整するJavaScriptライブラリ「Dynamiclayout.js」。 読み込んでおくだけで、750px以下、750px以上/950px以下、950px以上の3つのウィンドウサイズに応じて自動でCSSを切り替えることが出来ます。 JavaScriptの知識が一切なくとも、利用者の端末に合わせて、最適なUIを選択することができ、なかなか面白い&便利。 アイデア次第で凄く優れたWEBサイトになりそうな感じですね。 (750px 以下) (750px以上/950px以下) (950px以上) 関連エントリ AjaxでSS

  • 段落(pタグ)とアンカー(aタグ)さえあればどこにでも配置できるさ

    免責事項:サイトに含まれる情報は、一般的な情報提供のみを目的としています。情報はスペシャルベストによって提供され、当社は情報を最新かつ正確に保つよう努力しますが、いかなる目的においても、ウェブサイトまたはウェブサイトに含まれる情報、製品、サービス、関連グラフィックスに関する完全性、正確性、信頼性、適合性、利用可能性について、明示または黙示を問わずいかなる表明または保証も行いません。従って、これらの情報に依拠することは、あくまでもお客様ご自身の責任において行われるものとします。 当社は、当ウェブサイトのご利用に起因するいかなる損害についても責任を負いません。 ウェブサイトから、スペシャルベストの管理下にない他のウェブサイトへリンクすることができます。当社は、それらのサイトの性質、内容および利用可能性を管理することはできません。リンクは必ずしも推奨するものではありませんし、リンク先で述べら

  • 一行あたりの文字数を制限するリキッドレイアウト - 2xup.org

    2006-12-20T02:12:30+09:00 今回のリニューアルでは、これまで px で指定していたコンテンツの幅の値の単位を % と指定変更。 いわゆる liquid (リキッド) レイアウトというものにしました。ユーザが閲覧しているブラウザの幅に合わせてコンテンツの幅も変化します。 div#container { width: 80%; } px で指定していたコンテンツの幅を、% での指定に変更し、リキッドレイアウトに変更したものの、ウィンドウサイズの 80% の幅という指定ですので、ウィンドウサイズを広げればいくらでも大きくなります (もちろん小さくもなります)。それでも問題ないのですが、できればコンテンツの幅に最大幅と最小幅を指定し、小さくなりすぎてレイアウトが崩れるような事もなく、一行あたりの文字数を目で追える程度の幅をキープできればと考え、いろいろ試してみました。 fl

    shozzy
    shozzy 2006/12/22
    リキッドレイアウトは1999年頃からやっていたけど。em指定でのフレキシブルレイアウトはよいかも。
  • 便利すぎて困る程のFireBug1.0系を使ってみよう:phpspot開発日誌

    Firebug - Web Development Evolved 便利すぎて困る程のFireBug1.0系を使ってみよう、ということで、広く使われているであろう0.4系と変わった点をプレビュー。 Googleなどの検索エンジンで、addons.mozilla.org にUPされている0.4系が上に表示されているため、まだ1.0系を使っていない人も多いのではないでしょうか?(という私もそうでした) FireBug1.0系のインストール方法の紹介〜その追加された強力すぎる機能について見ていきましょう。 FireBug1.0系インストール http://www.getfirebug.com/ にてFireBug1.0系のインストール。 FireFox - DOMインスペクタのインストール FireFoxインストール時にDOMインスペクタが入っていない場合は、FireBug1.0系の機能を最大限

  • fladdict.net blog: HATENA-TUBEの技術的な話

    なんか予想より好意的に受け入れられてほっとした、HATENA-TUBEのテクニカルなお話。 みなさんHATENA-TUBEをajaxだと思ってますが、実は非同期通信なってまったくやってなかったりします。 サーバー言語 サーバーはPHP5で組んでます。 使ってるプロバイダは他にも Perl, ColdFusion,Rubyと選択肢が豊富だったのですが、PHP5。 なぜなら、ColdFusionはインストールして2時間、Perlは15分で挫折したからです。 コード書く前にどれだけ前提知識が必要なんだ!と問い詰めたい気分。PHP5は、Keitap先生がXMLのパースが楽と進めてくれたので採用。 ただ、シンタックスが「->」なのはキモくて困ります。 テンプレートエンジンにはSmartyというのを使いました。 使い方は屋で、1万円使ってPHP3冊買って電車の中で覚えました。 データベース sq

    shozzy
    shozzy 2006/05/24
    野武士的なつくりなんだな
  • Internet Explorer 7ベータ2の不具合からWebデザイン業界の混乱が見えてきた - 日経トレンディネット

    次期Windows OS「Vista」に標準搭載される「Internet Explorer 7(IE7)」(日語版)のベータ2が連休明けの9日公開された、という表向きの話はデジタルARENAのニュース「マイクロソフトがInternet Explorer 7 ベータ2を公開」を読んでいただくこととして、こちらはWeb業界には気になる、Web表示の互換性の問題に踏み込んでみよう。 まず、単純な話、IE7って使いものになるのか。なる。最初はメニューが見えないので戸惑うけど、Altキーを押せば出てくる。RSSリーダーの機能だってFirefoxとどっこいどっこい程度には付いている(笑)。マクロソフトの看板アプリケーションに抜かりがあるはずはない。 ところが、IE7で表示したとき、レイアウトが崩れてしまうサイトがいくつかあった。例えば、このコラムを書いている12日現在、「はてなダイアリー日記」はIE

    shozzy
    shozzy 2006/05/23
    不具合ではないよな。バッドノウハウが崩壊しただけで。
  • CSS Nite Vol.7: Web制作現場の対立を解消する! XHTML CSSガイドライン作り [1]

    This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.

  • Niceformでエレガントなフォーム生成:phpspot開発日誌

    badboy.media.design :: articles :: Niceforms Web forms. Everybody knows web forms. Each day we have to fill in some information in a web form, be it a simple login to your webmail application, an online purchase or signing up for a website. They are the basic (and pretty much the only) way of gathering information on the web. 配布されているJavascriptのファイルとCSSファイルを読み込むだけで、フォームデザインが早代わり。 HTMLに組み込む例) <scrip

  • CSSレイアウトのサンプル集:phpspot開発日誌

    Layout Gala: a collection of 40 CSS layouts based on the same markup and ready for download! 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. CSSで段組デザインをする際に、とても参考になるサイトを発見。 CSSでの段組レイアウトのサンプルがサムネイル付きで40種類紹介されています。 お好みのデザインを見つけてソースを開いてコピー&ペーストすればお好みのデザインを素早く作れますね。 CSSも

  • DOCTYPEとCSS - tikeda's blog

    最近、同じCSS・同じブラウザなのに、あのサイトではできていて、このサイトじゃできないみたいな事があって思い当たってるのがページ「DOCTYPE」が違ってたって事が何度かありました。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> IEでIMGにpaddingがつかない FFでanchorのかかったimgにtext-decorationがつかない table内でのtext-alignが普通(?) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> IEでIMGにpaddingがつく FFでanchorのかかったimgにtext-decorationがつく ta

    DOCTYPEとCSS - tikeda's blog
  • 非CSSのデザインをCSSデザインにする会社 | 秋元@サイボウズラボ・プログラマー・ブログ

    XHTMLized では、一画面分のウェブページを送ると、一週間以内に XHTML/CSS で同じデザインを作り直して返送する、という単機能に特化した有料のサービスを提供している。 「非CSSのデザインをCSSデザインにする『ネットサービス』」だったらすごいなあ、と思うが、残念ながら人力。さすがにプログラム的にそれを実現するのは難しいと思う。 一般のサイト訪問者から見れば、CSS デザインであろうとなかろうとたいした違いはないが、提供者側からみた多数のメリットを考えると、今からサイトを作るときに CSS デザインにしないことは考えにくいだろう。 コンテンツ製作者がデザインを気にする必要がなくなる(分業による効率化) デザイナーがコンテンツを気にする必要がなくなる(分業による効率化) 将来のデザイン変更にかかる工数の削減 コンテンツ追加時のデザイン再利用(工数削減) 検索エンジンにコンテンツ

    非CSSのデザインをCSSデザインにする会社 | 秋元@サイボウズラボ・プログラマー・ブログ
    shozzy
    shozzy 2006/04/12
    人力
  • CSS Showcase | CSS Navigation Menus, Tabs and CSS Navigation Techniques Showcase

    Hint: due to my provider's problems this option was deactivated. Sorry for inconvenience. Aqua & Chrome by M.Samy Silva Orange, Blue by Daniel Constantin Blue & Red by V. Friedman Blue, Black, Pink by V. Friedman Make the world prettier! If you'd like to share your css navigation designs with other web-developers, use this template for creating the menus. Please make sure that your css-code valida

  • CodeWeb: [CSS]クロスブラウザな半透明フィルタ

    IEには独自拡張のCSSでフィルターが使えます。こいつは便利なやつで半透明化やらグラデーションやら色々出来るのですが、なんだかんだ言っても独自拡張。互換性がありません。 しかし、アルファ値に限って言えばは他のブラウザでも独自拡張にて実装されているのでクロスブラウザ化することが出来ます。(クロスブラウザってJavaScript以外でも呼んでよかったけ?) [Internet Explorer対応] 0~100の数字で制御します。0に近づくほど薄くなります。 MacIEだと確か動きません。 img{ filter: alpha(opacity=20); } [Mozilla / FireFox / Netscape 対応] 0~1の数字、または0~100%で制御します。0に近づくほど薄くなります。 こちらは最新版のMozilla FireFox Netscapeで動作します。 -moz-opa

  • CSSによる段組(マルチカラム)レイアウト講座

    サービス終了のお知らせ いつもYahoo! JAPANのサービスをご利用いただき誠にありがとうございます。 お客様がアクセスされたサービスは日までにサービスを終了いたしました。 今後ともYahoo! JAPANのサービスをご愛顧くださいますよう、よろしくお願いいたします。

  • CSSレイアウトの定石 WinIE6バグ回避法

    CSSを使ったレイアウトをする際にWinIE6のバグを回避するための「定石」をまとめておきます。 とくに重要だと思うものは強調してあります。参考としてバグ辞典へのリンクも用意しました(つまり回避法を用いない場合にどんなバグが発現するか)。 フォントサイズ関係 font-sizeは%かpxで指定する。 キーワードで文字サイズを指定すると標準モードと互換モードで文字サイズが変わる(IE6) em単位で指定した値が文字サイズ変更後に正しく反映されない(IE6) ボックスモデル関係 widthと同時に左右borderや左右paddingを指定しない。heightと同時に上下borderや上下paddingを指定しない。 ボックスの幅や高さを算出するときにパディングやボーダーのサイズを含めてしまう (ブロックレベル要素を内包するボックスにはpaddingを指定しない。) 左右ボーダーとパディングを設

  • スタイルシートによる崩れない 2カラム 3カラム・レイアウト

    このウェブサイトは販売用です! desperadoes.biz は、あなたがお探しの情報の全ての最新かつ最適なソースです。一般トピックからここから検索できる内容は、desperadoes.bizが全てとなります。あなたがお探しの内容が見つかることを願っています!

  • 1