[B! CSS][Web制作] [7ページ] mie_nyanのブックマーク

dlのdt dd を横並びに

何かと便利な定義リスト。用語集や、Q&Aなど使いどころは沢山あるけれど、同じ行にしたいと思うことがしばしば有るかと思います。しかし、中々思うように横並びが出来ないのが定義リスト。今回はそんな厄介な定義リストのサンプルを作ってみました。まずはスタイルシート。 dl { border:1px solid #999; width:390px; } dt { float:left; width:100px; padding:5px 0 5px 10px; clear:both; font-weight:bold; } dd { width:260px; margin-left:100px; padding:5px 5px 5px 10px; border-left:1px solid #999; } こんな感じです。そして、実際の画面では↓こんな感じで表示されると思います。もっとテーブ

mie_nyan 2007/12/11

リンク

『CSS：一行目の頭1文字のみ前に出したい時』

Web仕事人の部屋札幌のWeb制作会社・株式会社メディアリュウム／株式会社WEBサクセスのスタッフHが、Web制作のTipsなどをお届けします。注意書きなどで、よく使われているこのような文章、「　※ご注意ください　」頭に　※マークなどをつけて書いていきますが、文章が折り返すときは、※マークだけ前に出ていたらいいな・・・というときがありますよね。これもCSSで設定することができます。最終的にはこのようになるよう、設定していきましょう。 //////////////////////////////////////////////////////////// まず、HTML <body>部分に <p>※あいうえおかきくけこ<br>さしすせそたちつてとなにぬねの</p> と書きました。表示はもちろんこのようになります。ここで、<p>タグにCSSを仕掛けていきます。 ----------

mie_nyan 2007/12/07

リンク

CSSのみでクールな階層メニュー作成サンプル:phpspot開発日誌

Stu Nicholls | CSSplay | Cross browser flyout menu examples using only css CSSのみでクールな階層メニュー作成サンプル。次のようなカッコいい階層メニューのサンプルが公開されています。クールなのでそのままサイトに組み込んで流用できそう。 IE5.5 , IE6, IE7, Firefox, Opera 等で動作。関連エントリ CSSでちょっと変わっているピル風の形をしたナビゲーションを作成セクシーに動作するスライドメニューバー実装JSライブラリクールにスライドするメニューを作成するJavaScriptライブラリ「Image Menu」 CSSのクールなメニューをオンラインで簡単生成「CSS Menu Generator」

mie_nyan 2007/11/29

リンク

素晴らしいJavascript&CSSナビゲーションメニュー13選『13 Awesome Javascript CSS Menus』 | CREAMU

DiaryTechno logy 素晴らしいJavascript&CSSナビゲーションメニュー13選『13 Awesome Javascript CSS Menus』 CSSでメニューを簡単にコーディングしたい。そんなあなたにおすすめなのが、『13 Awesome Javascript CSS Menus』。素晴らしいJavascript&CSSナビゲーションメニュー13選だ。以下にいくつかご紹介。 » Sexy Sliding Menu MootoolsとScript.aculo.usのバージョンがある » Webber 2.0 Dock Menu ドックタイプのナビゲーション » Phatfusion- Image Menu javascriptを使った画像メニュー » LavaLamp jQuery Sliding Menu jQueryを使ったナビゲーションメニュー » Moot

mie_nyan 2007/11/09

リンク

Web Design Library(ウェブデザインライブラリー) ―ウェブクリエーター向けの情報サイト

ラブコメプリンスのパクソジュンに釘付けの日々韓国のイケメン人気俳優といえば、パク・ソジュン！ 2020年に大ヒットした韓国ドラマ『梨泰院クラス』の主演で、更に人気は加速しましたよね。私も『梨泰院クラス』視聴前から彼の作品は見ていたのですが、どんな役柄でもこなせてしまうなと強く逞しく不合理な世界に正面から立ち向かう血気盛んな若者の反乱なパク・セロイ(パク・ソジュン)を夢中になって見ていました。『愛の不時着』と並び日本でも多くの方が視聴されたと思います。特に『梨泰院クラス』は『愛の不時着』と比べてロマンス色が薄く緻密なビジネスプランなども要素に盛り込まれていたので、男性からも人気の作品でした。他にも彼の出る作品出る作品がヒットを飛ばしています。 2014年：魔女の恋愛 2015年：彼女はキレイだった 2016年：花郎＜ファラン＞ 2017年：サム、マイウェイ～恋の一発逆転！

mie_nyan 2007/11/02

リンク

[CSS]気をつけたいIE 7のバグ -CSS-Discuss

CSS-Discussにアップされている「IE 7 Bugs」の意訳です。省略している箇所も多数あるので、原文も参照ください。 Internet Explorer Win Bugs - css-discuss 注意：バグには、IE7のみでなく、IE 5, 5.5, 6のものも含まれています。公開されてから時間が経っているためか、ちょっと古いものもあります。 IEのフォントサイズのバグフォントサイズの継承 IEの相対指定のフォントサイズの継承は、うまく機能しません。相対指定を行う場合、emより%で指定を行う方が便利です。もし、em指定を行う場合は最初に%指定を行ってください。例： body{ font-size: 100.01%; } ※100%の代わりに100.01%を使用するのは、Operaでの継承バグの回避のためです。キーワード指定でのサイズフォントサイズに「small

mie_nyan 2007/11/01

リンク

フロートボックスが並んだ時の右端のがカラム落ちしない方法みたいなのとIEのコメントバグ

タイトルが長い… サイトやブログの価値を調べる10の指標とツール｜前向きストラテジー 10番目のでこのブログを調べると泣きたくなるくらい安いけど、ボクは頑張ろうと思った今日この頃、皆様暑さにバテていないでしょうか？ボクはしっかりバテてダレてます。あんまり仕事してま…（加藤さまに給与減らされるので自重しました）さて、そんな訳で本題ですが、下記みたいなレイアウトの時のお話です。一番書きたかったフロートボッ（略）みたいなのサンプルとダウンロードサンプルページダウンロード今回の本題は「ほげほげ」って書いてあるところのボックスに関してだけ書くつもりが遊んでいるウチに気になった事があったのでそちらも書こうと思っております。何はともあれ、この「ほげほげボックス」ですが、main areaは10pxのpaddingが指定されてて、その中にこんな感じでぴったりなボックスがぽこぽこ並ぶときって、

mie_nyan 2007/10/29

リンク

[CSS]高さの異なるカラムを揃えるスタイルシート | コリス

Columnas 100% altas Columnas 100% altasのエントリーでは、下記のデモのように高さの異なるdivで組んだカラムの高さを揃えるスタイルシートを紹介しています。 sample:高さがばらばらのdiv sample:高さが揃ったdiv スタイルシートは、各divに対して「padding-bottom」と「margin-bottom」に同じ数値をプラス値とマイナス値で指定を行い高さを揃え、それらのdiv要素を包んだdivで「overflow:hidden;」を指定します。詳しくは、最小限にしたサンプルを作成したので参照ください。高さの異なるカラムを揃えるスタイルシートのサンプル下記の「32768px」って、何か特別な意味があるのでしょうか。

mie_nyan 2007/10/26

リンク

コリス

※本ページは、アフィリエイト広告を利用しています。 🙏ソシム社大感謝祭🙏 Kindle特大セールが開催しています！！このセールを待っていた人も多いと思います！今年発売された新刊をはじめ、ベストセラーのデザイン書も55％オフ。当ブログで紹介した書籍も多数あり、どれもお勧めです。セール期間は7/31まで。ソシム社のセールは貴重なので、気になっていた書籍は迷わず買いです！