Movatterモバイル変換


[0]ホーム

URL:


はてなブックマークアプリ

サクサク読めて、
アプリ限定の機能も多数!

アプリで開く

はてなブックマーク

タグ

関連タグで絞り込む (18)

タグの絞り込みを解除

webdesignに関するKoshianXのブックマーク (14)

  • CSSの実装状況で変わるボックスのデザイン方法

    Web制作において、対応しなくてはいけないブラウザの中には、未だしぶとくIE6が残っています。IE6が2001年に登場したことを考えると、もう8年もその時代の「縛り」を(健気に)守りながら作っていることになるんですね。 いま良く使われているCSSのテクニックも、ほとんどはこの「縛り」の範囲内で有効な手法なわけですから、突然2001年にタイムスリップしてサイトを作る事になったとしても、今も昔も変わらない1つの古文書に従えばいいので、きっと活躍できます。 しかしたまらん、流石に疲れた。 ボックスひとつができることCSSでは、文書を構成する各要素は、ボックスという矩形領域に置きかえられ、それらの持つプロパティを操作して装飾します。つまり、ボックスはページデザインを構成する最小単位と言えるわけですね。 そこで今回は、最小単位となる1つのボックスに対して、どのような装飾手法が有効かという点を、CS

    • KoshianX
      KoshianX2008/03/04非公開
      そういや情報商材系はそういうサイト多いな……。
      • Google Analyticsのちょっとしたテクニック : LINE Corporation ディレクターブログ

        こちらデイリー4コマ編集部です。 今回はGoogle Analyticsを利用したクリックカウントの取り方におけるちょっとしたコツについてお話ししたいと思います。Google Analyticsはページ内に集計用のコードを貼り付けるだけで、業務用としても耐えられる、様々なアクセス解析できる優れもののツールではありますが、ただそれだけでは少々もったいないです。一つの機能としてクリックカウントを使ってみましょう。 例えば <a href="http://www.livedoor.com/">livedoor</a> というリンクがあったとします。このリンクが果たしてどれだけクリックされているかを知るために、以下のようにリンクに細工を施します。 <a href="http://www.livedoor.com/" onClick="javascript:urchinTracker('/live

        Google Analyticsのちょっとしたテクニック : LINE Corporation ディレクターブログ
        KoshianX
        KoshianX2007/12/21非公開
        なるほど、こんな裏技が
        • Web2.0ナビ: ウェブサイトの横幅が1000px時代に突入する

          いいね! 0 ツイート B! はてブ 179Pocket 4 ウェブサイトの横幅は、一昔前までは650pxが最適といわれ、4・5年前からは800pxが最もユーザビリティ上最適なサイズだった。大手ポータルサイトをはじめとして、800px未満で構築されたサービスが殆どだった。 しかし、ここ最近は800pxをあまり意識していないと思われるウェブサイトが多く登場してきた。mixi、AllAboutJapan、朝日/読売などは1000pxで最適化されている。ウェブサイトの横幅が1000px時代に突入しようとしているのだ。 # 厳密には950pxだったりするが、便宜上1000pxとしている。 ウェブサイトの横幅が1000px時代に突入しようとしているのには、大きく3つの理由がある。 画面解像度の向上 1000pxを表示するためには、それ以上の画面解像度のモニタが必要だが、今は1024以上のモニタが主

          KoshianX
          KoshianX2007/12/02非公開
          実は横幅大きいサイトはサイドバー使わず閲覧されてるという罠が
          • UI-patterns.com

            User Interface Design patterns are recurring solutions that solve common design problems. Design patterns are standard reference points for the experienced user interface designer. Product Insights at your fingertips. Our confidence-boosting product tools for business growth are practicalguides and strategies that will immediately amplify the expertise of you and your team.

            • KoshianX
              KoshianX2007/07/26非公開
              gimpでも作れるけど、コマンドラインベースは便利そうだなあ
              • ブログのレイアウトを幅100%の3カラム構成に変更 - F.Ko-Jiの「一秒後は未来」

                ブログのサイドバーのコンテンツが増えてきたので、ブログのレイアウトを3カラム構成に変更しました。 これまでは幅固定の2カラム構成でしたが、最近のディスプレイは解像度が高くなってきているので、幅100%で3カラムの構成にしてみることにしたわけです。 なるべくCSSの変更を少なくするために、#container #container2というようにidを付けなおして、それらのidに対してスタイルを定義しました。3カラムの実現にはfloat属性を使わずに、絶対配置と幅の%指定とマージン指定で実現しています。 #container2 { width: 100%; } #alpha2, #beta2, #gamma2 { position: absolute; } /* 中央カラム */ #alpha2 {top: 0px; left: 0px; margin-left: 27%; margin-r

                ブログのレイアウトを幅100%の3カラム構成に変更 - F.Ko-Jiの「一秒後は未来」
                KoshianX
                KoshianX2007/07/09非公開
                なるほど、こういう手もあるのか
                • filament group inc. || Styling the Button Element with Sliding Doors

                  102 South Street , 3rd floor Boston MA 02111 Phone: 617.482.7120 Fax: 617.687.0212Email: hello@filamentgroup.com Posted by Scott and Maggie on 05/23/2007Topics:cssui designvisual design Particle Tree recently posted an article describing atechnique for styling theHTML button element. For those not familiar, form buttons are notoriously difficult to customize because they render differently ac

                  KoshianX
                  KoshianX2007/06/15非公開
                  なるほどなー。
                  • 印刷用CSSをもっとよくするための4つのTips。 - TRANS [hatena]

                    約2ヶ月くらい前に、Printing the Web: Solutions andTechniques | Smashing Magazineというエントリーを読みました。10個以上の海外のサイトのいろんな印刷向けCSSJavaScriptのTipsが紹介されていて、「印刷用CSSをまとめてみた。」を書いた自分としては何とか分解してやりたいなと思っていました。で、日ようやく分解が一通り終わりましたので、その中で得たTipsを紹介します。 印刷用デザインも1つのWebデザインプロセスとして考えておく。 今回、このエントリーが最も自分にとっては衝撃的でした。印刷用CSSの機能面だけを追い求めて、「まあ、印刷されるときに、最低限読めればいいんでしょ?」くらいにしか思っていなかった自分が、ちょいと情けない。元ネタは、FiveSimple Steps to Typesetting on th

                    印刷用CSSをもっとよくするための4つのTips。 - TRANS [hatena]
                    • Even More Rounded Corners[角丸][css]

                      Even More Rounded Corners WithCSS (Anothertechnique for the pile.) 2009 update:CSS 3 and border-radius can do rounded corners without any images, and support for RGB/alpha opacity and gradients with opacity is also on the way. Check outCSS 3 and the future for newer, shinier examples! There's an increasing desire (at time of writing, February 2007) to provide rounded corner dialogs with variou

                      • Webデザインとグラフィックの総合情報サイト - MdN Interactive - Webデザイン超基本のお作法50選

                        Webデザインには、どんなにビギナーだったとしても、プロのWebデザイナーを名乗る人がやってしまうと恥ずかしい“マナー”ともいえる制作上のルールがあります。「知らなかった」、「教わっていない」では通用しません。なぜなら、アナタはプロなのですから。 そんな超基の“Webデザインのお作法”を50個選定し、サイト設計、テキストデザイン、画像と色彩、レイアウト、その他の5つのテーマ別に解説していきます。この特集を通して、“Webデザインのお作法”をしっかり習得、あるいは復習して、カンペキに身に付けてください。

                        Webデザインとグラフィックの総合情報サイト - MdN Interactive - Webデザイン超基本のお作法50選
                        • 段落(pタグ)とアンカー(aタグ)さえあればどこにでも配置できるさ

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

                          • ステルス・ウェブ・デザイン - Ringo's Weblog 2006年12月16日 アーカイブ

                            ステルス・ウェブ・デザイン ステルス・デザインの方法というがある。(Webテキスト) このでは、「レーダーで見つけにくいかたちは良いかたちである」という、 デザインに関する新しい理論を提唱し、その名前を「ステルス・デザイン」と命名している。 ステルス・デザインの理論には、まだ完全に煮詰まっていないところが残るのだが、 極めて大きく発展する可能性を秘めている。 このような面白いアイデアを出すパスファインダー・チームの皆さんには敬服する。 私はまず、ステルス・デザインの考え方を発展させる第一段階として、 「ステルス・ウェブ・デザイン」という方法論を考え、いくつかの提案をする。 その提案資料を作成したので、このエントリにupしておく。 この資料は、Mac用のKeynoteで作成した。PDFで出力すると、 画質が不足して微妙なニュアンスが伝わらないので、時間のある方には、 ぜひTIFF版を見て

                            • ウノウラボ Unoh Labs: デザインセンスの無い人がwebサイトを作成する際に参考にしているサイト

                              GT Nitro: Car Game Drag Raceは、典型的なカーゲームではありません。これはスピード、パワー、スキル全開のカーレースゲームです。ブレーキは忘れて、これはドラッグレース、ベイビー!古典的なクラシックから未来的なビーストまで、最もクールで速い車とカーレースできます。スティックシフトをマスターし、ニトロを賢く使って競争を打ち破る必要があります。このカーレースゲームはそのリアルな物理学と素晴らしいグラフィックスであなたの心を爆発させます。これまでプレイしたことのないようなものです。 GT Nitroは、リフレックスとタイミングを試すカーレースゲームです。正しい瞬間にギアをシフトし、ガスを思い切り踏む必要があります。また、大物たちと競いつつ、車のチューニングとアップグレードも行わなければなりません。世界中で最高のドライバーと車とカーレースに挑むことになり、ドラッグレースの王冠

                              ウノウラボ Unoh Labs: デザインセンスの無い人がwebサイトを作成する際に参考にしているサイト
                              • 残りのブックマークを読み込んでいます1

                              お知らせ

                              公式Twitter

                              • @HatenaBookmark

                                リリース、障害情報などのサービスのお知らせ

                              • @hatebu

                                最新の人気エントリーの配信

                              処理を実行中です

                              キーボードショートカット一覧

                              j次のブックマーク

                              k前のブックマーク

                              lあとで読む

                              eコメント一覧を開く

                              oページを開く

                              はてなブックマーク

                              公式Twitter

                              はてなのサービス

                              • App Storeからダウンロード
                              • Google Playで手に入れよう
                              Copyright © 2005-2025Hatena. All Rights Reserved.
                              設定を変更しましたx

                              [8]ページ先頭

                              ©2009-2025 Movatter.jp