CSS Menu Builder | Free online navigation generator
“Need a menu for your website or a client, use our free css menu builder and create some pretty sweet menus for free„ Bootstrap Design Tools Bootstrap Design Tools is a set of tools that easily helps you modify the default styles of Twitter Bootstrap components, so that you can make them fit your website's design. DontDream.It has added the possibility of using menus generated via CSS Menu Builder
クロスブラウザのためのHTML/CSSのテクニック集 | コリス
anthonyshortのエントリーから、クロスブラウザのためのHTMLとCSSのテクニックの紹介です。 How to get Cross Browser Compatibility Every Time 簡単な意訳なので、詳細やキャプチャは上記エントリーを参考ください。 サマリー doctypeはstrictを使用し、正しいHTML/CSSを使用してください。 スタイルをリセットするスタイルシートを使用してください。 Firefoxでのレンダリングのために、テキストのスタイルシートに「-moz-opacity:0.99」を指定してください。 Safari用には「text-shadow:#000 0 0 0」を使用してください。 画像のリサイズをCSS/HTMLで行わないでください。 全てのブラウザでフォントのレンダリングを確認してください。 「Lucida」は使用しないでください。 テキ
温泉サル生活手記 -- ファイヤーフォックス
今話題のFireFox3をダウンロードしてみました。 それでけやきブログリンク集を見てみたところ・・・ ファイヤーフォックスではスタイルシートに使えない機能があるという疑惑が浮上orz これはHP管理人としてはほっておけない事態ですよー・・・ なにしろ噂ではファイヤーフォックスはブラウザのシェアの４分の１くらいを占めてるって話ですから！ こうするとスタイルシートを使わないページ作りを要求されるわけですが、中学生の頃に蓄えた知識だけで１０年くらいホームページを管理し続けている私には少々酷というのもです・・・ まあレイアウトが崩れているわけではないのですが・・・かなり味気ない感じになってるなぁ。 海賊が次のパッチでついに実装されるみたいですし、サイトのリニューアルも考えましょうかね(´ω｀)
Ultimate multi-column liquid layouts (em and pixel widths)
8 Feb 2022 — Updated 20 Mar 2023 Table of contents CSS Grid: Static 3 column Responsive 3 column Flexbox: Static 3 column Responsive 3 column Main content with left & right sidebars Padded boxes with headings Product feature comparison table Responsive Attributes: Static 3 column Responsive 3 column Responsive Columns: Static 3 column Responsive 3 column In this article, we'll explore various type
Block Quotes and Pull Quotes: Examples and Good Practices — Smashing Magazine
Quotes are used to emphasize excerpts of text. Since users almost never read but scan we need to provide them with some focus anchors to fix their attention to the most important parts of our articles. Furthermore, quotes are always used for testimonials and sometimes for blog comments. They can be styled using graphics, CSS and a little bit of JavaScript. Sometimes, creative dynamic solutions can
第3回 Webページで行間はどのくらいにしましょうか？
小林 信次 マークアップ・エンジニア。茨城県出身。1980年生まれ。専修大学経営学部卒業後，1年弱のニート生活を経て，販売代理店の営業職を経験後，有限会社アイエイトワンに入社。主に，Webディレクション，マークアップを務めるかたわら，講師活動・執筆活動を行う。allWebクリエイター塾ではCSS講習の講師。著書に「XHTML&CSSデザイン |基本原則，これだけ。」（共著，MdN発行）がある。 いろいろな方と話しているときに，line-height（1行の高さ。行間として認識できる余白を制御する値）ってどのくらいに指定していますか？という話題が出ることがあります。そこで改めて，他の人がサイトでどんな指定をしているのかを調べてみました。 ※ 今回は，Webのフロントエンド制作を仕事にしている人の間でよく知られており，アクセシビリティ，ユーザビリティ，文字の読みやすさなどにも気を使っていると思
リストやテーブルを簡単かつ綺麗にストライプ状に色分けする方法
リストとかテーブルをストライプ状に色分けしようとするとき、 セルとか列に対して一つ一つクラスをつけて、 そしてCSSで装飾するのが一般的だと思います。 でも、クラスを一つ一つにつけていくのって面倒じゃないですか？ 今回紹介する方法を使えば、 簡単かつ綺麗に色分けすることができるので、 参考にしてみてください 面倒なやり方：一つ一つにクラスをつけていく まずはオーソドックスに、 一つ一つにクラスをつけて行く方法を紹介しておきます。 ■HTMLソース <ul> <li class="list01-odd">リスト１</li> <li class="list01-even">リスト２</li> <li class="list01-odd">リスト３</li> <li class="list01-even">リスト４</li> <li class="list01-odd">リスト５</li> </
WEB制作（html,css(スタイルシート) )｜プログラムメモ
htmlページのボタンはマウスでクリックすることを前提に作られることが多いが、 実はショートカット（アクセスキー）というものを指定することが出来る。 ■ 指定の方法例 <a href="save.html" accesskey="s" >文書の保存</a> ■ これが実際のブラウザではどういう操作になるかというと ・Windows IE 「alt」+「s」 でフォーカスを移動させた後に「Enter」で実行 ・Windows Firefox2「shift」+「alt」+「s」 で実行 ・Windows Opera 「shift」+「esc」 で一覧表示させた後に「s」で実行 ・Windows Safari3 キーボードショートカットがないらしい(?) ・Mac Safari 「control」+「s」 で実行 ・Mac Firefox 「control」+「s」 で実行 ・Mac Opera
CSS Decorative Gallery - Web Designer Wall
Did you like my previous CSS tutorial on how to create gradient text effects? I’m using the same trick to show you how to decorate your images and photo galleries without editing the source images. The trick is very simple. All you need is an extra <span> tag and apply a background image to create the overlaying effect. It is very easy and flexible — see my demos with over 20 styles, from a simple
CSS Generator（CSS自動生成ツール）
思い通りのスタイルを実現するCSSジェネレーター 従来からWEB上でCSSを生成するツールはありますが、その多くは入力する項目がたくさんあって面倒だったり、必要のないCSSまで一度に設定する必要がありました。 CSS Generatorはちょっとマニアックだけど自由度の高いCSS自動生成ツール。 あらかじめ必要なCSSを選んでから、そのCSSにあったカスタマイズ項目（入力補助機能付き）が現れるため、非常に効率よくCSSを設定できます。 CSSをある程度理解されている方、CSSを効率よく作成する必要のある方、CSSにどっぷり浸かったWEB業界の方向けのツールとなります。 特徴 『CSS Generator』は以下のような特徴を持っています。 約60種のセレクタから自由に選択。組み合わせは無限大。 必要なCSSセレクタ（スタイル）を選び、それにあった入力フォームが生成されるため、効率よくCSS
複数ページを組むのに使えそうな感じ
「SBMに追加」ボタンは、自分の記事ブックマークしてもらえたかなぁ？どんなコメント付いたかなぁ？というチェックをするのに一番手っ取り早く見れる気がするので付けてるかな。後は、SBMの存在をチョットだけ意識してもらうとか？ さて、1ページもののサンプルやらテンプレートはいっぱい有るけど、実際のサイトで1ページしかないサイトはごく一部だと思う。 なので、複数ページが詰まったサンプルを作ってみました。 yuga.js 0.6.0がリリースされたのもあり、次はもうちょっとしっかりしたデザインで、yugaを使ってより実際のサイトに近いのでも作れたらいいなーとか妄想中です。 そんな訳で、取りあえず今回のサンプルのご説明みたいなことをば。 サンプルサイトとサンプルのダウンロード サンプルのサイト サンプルのダウンロード ベースにしたサンプル ベースに使っているのは、以前に公開したクリーンな水平分割が出来
すぐに使えそうなネガティブマージン | d-spica
すぐに使えそうなネガティブマージン 2008-05-15 0 0 XHTML/CSS CSS, margin margin にはマイナスの値を入れることができます。マイナスの値を持つ margin を「ネガティブマージン」と言ったりします。 あまりむずかしくなく，すぐに使えそうなネガティブマージンを紹介してみましょう。 見出しにネガティブマージン 本文の左に見出しよりも大きな余白をとりたいというとき。 <div class="section"> <h3>見出し</h3> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。...</p> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。...</p> </div> div.section { padding-left: 15px; } div.section h3
CSS Message Boxes for different message types : Janko Jovanovic
Can you believe this: Few days ago I went to my bank to check my credit score with the Credit Bureau. The bank official typed in my personal data and sent a request. Web application responded by displaying a yellow message box with an exclamation icon saying that data processing is still in progress. He checked several more times, but he didn't notice that at one moment the message changed to "Acc
Go Sign［ゴーサイン］ cssの書く順序
cssの書く順序 投稿日： 05.22.2008 カテゴリー： Web制作 コメント・トラックバック： 0件 cssの書く順序を統一したい場合は、Mozilla.orgが設定している順序がおすすめです。 ■Mozilla.orgが設定している順序 http://www.mozilla.org/css/base/content.css /* mozilla.org Base Styles * maintained by fantasai * (classes defined in the Markup Guide - http://mozilla.org/contribute/writing/markup ) */ /* Suggested order: * display * list-style * position * float * clear *
印刷用デザインをきれいにまとめるための7つのポイント - TRANS [hatena]
印刷用デザインもWebサイトにとっては1つのデザインだと言えます。制約がある印刷用デザインをきれいにまとめるためのポイントを上げてみました。 印刷用デザインをどうするか。 当ブログで印刷用CSSをはじめて取り上げたのが2006年12月でした。また、2007年4月にも印刷用CSSをもっとよくするための4つのTipsという内容で取り上げました。 さて、今回取り上げるのは今までと違い、印刷用CSSのコーディングではなく、純粋に印刷用デザインはどのようなものがよいか、というものです。コーディングではなく、いかにデザインするか。 ちょうどアックゼロヨン・アワード2007の結果発表もあったことなので、その受賞作の印刷用デザインを参考にしました。また、ADP: 印刷用CSSの書き方（基本編）もかなり（むしろほとんど）参考にさせてもらいました。そのポイントを以下の7つにまとめました。 なお、文末にアックゼ
![印刷用デザインをきれいにまとめるための7つのポイント - TRANS [hatena]](https://cdn-ak-scissors.b.st-hatena.com/image/square/f625aab20ef8abfef513499376656cecc29a08ae/height=288;version=1;width=512/http%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fa%2Faratako0%2F20080518%2F20080518141449.png)
YUI 2: Reset CSS
YUI Reset CSS The foundational YUI Reset CSS file removes and neutralizes the inconsistent default styling of HTML elements, creating a level playing field across A-grade browsers and providing a sound foundation upon which you can explicitly declare your intentions. Note: YUI Base CSS (introduced in version 2.3.0) can compliment Reset by applying a style foundation for common HTML elements that i
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSMENUMAKER.COM
Blogger
透過をきれいに使ったウェブデザインいろいろ - DesignWalker
artViper Marketingagentur