CSSだけでプルダウンメニュー
このページのTipsはJavaScriptを使いません。スタイルシートのみで作成しました。せっかくがんばって考えたのに、没になったテクニックです。問題アリのTipsです。今回の問題は大したことないです。 プルダウンメニュー・ツリーメニュー・階層メニュー・ドロップダウンメニュー色んな別名をもつ折りたたみ式のナビゲーション。これもＣＳＳだけでやってみました。マウスがスイッチの上に乗ると、下に垂れ下がってくるメニューのことです。普通はJavaScriptを使うようなのですが、JavaScriptなしで作りました。html+css で動きます。でも、ちょっと問題ありなので使いませんでした。そんなのばっかりですが、楽しんでくだされば嬉しいです。セキュリティを気にしない客層の場合は、問題なく使えると思います。 プルダウンメニューの作り方 1.html部分は 親に a 要素を使います。これは IE の
Lucky bag::blog: CSSだけでドロップダウンメニュー
ナビゲーションのドロップダウンメニューは、JavaScript を使って実現出来ますが、スクリプトをオフにしてブラウジングしている人も居たりするんで、それを CSS だけでやってみた。今、チョロッとやってみただけなんで、微妙な感じかもしれませんが。（しかも、全然クロスブラウザじゃないし...） やり方としてはいくつかあると思うんですが、今回はサブメニューの表示・非表示をコントロールするために、疑似クラスの hover プロパティを リスト要素に使っています。なんで、hover プロパティをアンカー要素以外に適用出来ない IE なんかでは表示されないんで、あまり使えないかも:-P リストを横に並べる 元となる (X)HTML のサンプルは、当然の事ながら、ナビゲーション部分をリスト要素でマークアップしてあります。また、全ての要素の margin と padding を 0 にしています。 サ
First step CSS - Intoroduction
WWW パブリッシングの世界に登場した Cascading Style Sheets（カスケーディングスタイルシート：CSS）とはなんだろう？ 手近な書籍を広げてみよう。いま目にしているページを構成する視覚的な，もっと平たくいうと，デザインの要素はどんなものがあるだろうか。 まずは，文字の大きさ，それから，フォントまたはその書体。カラーだったら，文字の色もあるかもしれない。そのほかにも，行間，文章や図版の配置，囲み記事がある場合などは枠，ひょっとしたらその中が網掛けしてある場合もあるだろう。 ほかにも探せばたくさんある。CSS が話題にするのはこういった“デザインのファクタ”なのである。HTML で書かれた文書を CSS を使ってデザインするのである。 要するに，この CSS を使うことにより，今までより多彩な視覚表現を実現することができるのである。これにより，ワープロや DTP にも劣ら
[CSS]よく利用するスタイルシートの指定 -General Style | コリス
サイト制作時、ブラウザがもつスタイルを初期化し、ブラウザごとのレイアウトの差異を無くし、その上でスタイルシートでレイアウトを行います。 使用するスタイルシートはサイトにより異なりますが、共通で使用しているスタイル(General Style)も多くあるので、それの2007年版です。 スタイルの初期化の続編になります。 スタイルの初期化 スタイルの初期化(前編) -全称セレクタとhtml, body編 スタイルの初期化(後編) -body内の個別タグ編 General Style -テキストの装飾関連 General Style -行揃え・フロート関連 General Style -ブロック関連 General Style -アシスト関連 General Style -リスト関連 General Style -2007のメモ General Style -テキストの装飾関連 テキストの装飾と
![[CSS]よく利用するスタイルシートの指定 -General Style | コリス](https://cdn-ak-scissors.b.st-hatena.com/image/square/bc54860ba06deaa45382cf2bddc929515def0354/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fshared%2Flogo-2014050501-en.png)
CSS HappyLife
もう放置して長い当ブログ...なので、Adsenseの自動広告ってのを試してみようかと思ってONにしたら、すごいことになった！ これは中々に酷いですね。 とまぁそれはさておき、すごい久しぶりに個人の趣味っぽい感じのサイト作りました。 - 探そう！好きな恐竜 なんで恐竜！？って感じしますね。 正直、恐竜には全然興味なかった側の人間です。 もう完全にただのお知らせや告知ブログ...！ 初版の発売から4年経ち、ありがたいことに改訂のお話を頂いたので、6月～8月辺りに森田 壮さんと執筆を行い、2017年9月15日に改訂2版が発売しました。 かなり頑張って加筆・修正などを行ったので思ってたより大変な執筆でした。 初版と改訂2版の詳しい違いに関しては、サポートサイト に載せておいたのでそちらを見て頂けるとありがたいです！ 初版と改訂2版の違い | Web制作者のためのSassの教科書 改訂2版 - 公
画像の使用を極力控えてかっこいいCSSデザインをやってみよう
Latest topics 2019.01.22 長々と運営していましたが、本日を以て大会を終了とさせていただきます。沢山の方にご参加いただきましたこと、まことに嬉しく思います。Galleryは閲覧可能ですので、懐かしい気持ちになりつつご覧いただければと思います。 2007.04.15 公式html内に一箇所文字の誤りがありました。詳しくは2007-04-15のメモに書いておきました。要素の変更や構造の変更に変化は無いので、CSSを書く作業には影響がないのですが、気になる方はURIを参照して下さい。 Galleryが開通しました。フォームで選択してぽちっとするとサムネイルが表示されます。サムネイルをクリックすると、CSSデザインが適用された個別ページが表示されます。 よくありそうな質問に、CSSデザインは１人何個でも提出できる旨を追記いたしました。 2007.04.13 よくありそうな質問
スタイルシートサンプル CSS Samples - eWeb
スタイルシートは、見栄えやレイアウトなどの表示に関する指定を行うものです。スタイルシートを用いるとHTMLだけでは表現できない様々なデザインが可能になります。 サンプルソースはご自由にカスタマイズなどをしてお使いください。
2006年を彩った50の超美麗CSSデザインサイト集:phpspot開発日誌
50 Beautiful CSS-Based Web-Designs in 2006 | Smashing Magazine Let’s take a close look at some of the most beautiful designs we’ve seen in 2006.2006年を彩った50の超美麗CSSデザインサイト集。 どれも凄まじく凝ったサイト集で、1個1個が1つのクリエイターが精魂込めて作ったのが伺えます。 (Webデザイナーのためのリンク集) こういった美しいサイトを参考にサイトを作ったりすると自分のセンスも磨かれそうですね。 単に見るだけでも楽しめます。 2007年も素晴らしいサイトが出てくるんでしょうね。こういったデザインは数年前では見られなかったようなもののように感じます。 WEBデザインの面での進化についても今後が楽しみでしょうがないですね。 作成に使っ
スタイルシートの技
スタイルシートの技 このページでは実用的なスタイルシートによるデザイン・レイアウトなどをメインに扱っております。 スタイルシートをサブで使うかメインとするかは賛否両論あります。 また、世の中にスタイルシート解説サイトは多数あると思いますが、 スタイルシートの持つ意味を誤解しているサイトが少なからずあるのと、 リファレンスのような書き方ではデザインへの応用が効かないのでは？ という事を考えて、すぐに利用できる実用的な形式で参考になればと思って作成しました。 スタイルシートを勉強すると、当サイトの一番下にある「design」のように、 Javascriptと併用したデザイン切り替えページなどを製作する事ができるようになり、表現の幅が広がります！ 自分のスタイルシートの知識を簡単にテストできる問題を作ってみましたので、どうぞ。 Introduction - 基礎・導入編
スタイルシート(css)学習辞典
ブラウザ対応順に並べたスタイルシート(css)学習辞典。ブラウザ対応で苦しんでいる人のために作られた辞典。 スタイルシートが分からなくて、初めての方は「スタイルシートの基礎知識」 一括でダウンロードしたい方は、次の圧縮版をどうぞ。LZH形式で圧縮しています。＞＞css42.lzh。LZH形式だと困る方は、代わりの形式（zip形式とtar.gz形式）を用意しています。（css42.zipあるいはcss42.tgz） 重要なお知らせ アドレス（URL）が変更しました。旧アドレスは来年の2004年1月末に削除される予定ですので、大変お手数ですが、リンクをされている方は修正をお願いします。 2003年9月1日から辞典のアドレスが変わります。「http://dhr.tipod.co.jp/....」が、新しく「http://dhr.at.infoseek.co.jp/....」に変更します。なお、旧
カスいけサイト私撰集 @ Stardust Crown
概要私撰集参考リンク集情報方針 概要 カスいけサイト 分離されたカスケーディング・スタイル・シート（いわゆるCSS）によって見栄えの制御がなされていて、そのデザインがいけてる（＝センスの良さを感じさせる）サイトのこと。カスイケサイトとも書きます。また、CSS の主旨を踏まえ、適切な HTML/XHTML および CSS による構成であることも暗黙の条件とされます。 ※“いけてる”を平仮名で表記したのは、『カス』『サイト』両カタカナとの境界を鮮明にするためです。 本ページでは『カスいけサイト』をピックアップしてリンク集としてまとめることが目的です。とはいえ『いけてる』とは主観的なものであり、デザイン論的な話題からは逃げたいところなので、自分用のブックマークとして収集していることにして『私撰集』を自称しています。日本語の意味的には『私選集』が正しい用語かもしれませんが、まあ風流ということで。
tableを使用しない段組CSSによるマルチカラムデザインについての考察
HTML文書の記述。 <div id="original"> 〜 </div> <div id="critical"> 〜 </div> <div class="status"> 〜 </div> CSSの記述。 div#original { float:left; width:50%; } div#critical { float:left; width:50%; } div.status { clear:left; } http://members.jcom.home.ne.jp/w3c/MediaMix/tntstyle.css float ブロック要素を左に順次floatさせる事で、疑似的に「段組」を表現する。 Navigator 4.x Navigator 4.xでは#fooをfloatさせないとダメ。 float:left;するセレクタをdiv#fooとすると、Navigato
とほほのＷＷＷ入門
HTML/JavaScript/CSS/CGIなど Webサイト作成に関する情報を満載した Web作成関連総合サイトです。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
2u WEBデザイン.com
ichiro.to
CSS（スタイルシート）でbodyに設定しておくと便利な5つのポイント - デザインウォーカー | DesignWalker - ロサンゼルスで働くウェブデザイナーの日記
http://www.stylish-style.com/index.html