キャプションの幅を画像の幅に合わせる
Fig 1: Wikipedia のキャプションつき画像の例 ちょっとわかりにくいタイトルになってしまいましたが、つまり Wikipedia のやつ (Fig 1) みたいに、「画像 (またはビデオなどの埋め込みコンテンツ) の下にキャプションをレイアウトするとき、キャプションが複数行にわたる場合は画像の幅に合わせて折り返したい (ただし画像の幅はバラバラ)」というのをシンプルかつ汎用的なかたちで実現する CSS を考えてみました。というか、このブログのレイアウト用にけっこう長いことあれこれ考えてたもののこれといった手が思いつかなくて放置していたんですが、上手い解決を Stack Overflow でみつけた のでパクった、という話です。 <figure> <img src="/img/photo.jpg"> <figcaption>Lorem ipsum dolor sit amet</
知ってると便利なCSSのテクニックのまとめ -CSS Protips
リスト要素で実装したナビゲーションの右端のボーダーを取り除くシンプルな方法、flexboxで実装したカラム間の溝の最後の溝を取り除く方法、天地の中央に配置など、知ってると便利なCSSのテクニックを紹介します。 CSS Protips -GitHub CSS Protipsのバージョンアップ版の紹介記事はこちら。 CSSでやりたかったことが数行のコードで実装できるスタイルシートの小技のまとめ -CSS Protips CSS ProtipsのライセンスはMIT Licenseで、個人でも商用でも無料で利用できます。 下記のスタイルシートの対応ブラウザはChrome, Firefox, Safari, Edge, IE11です。 リスト要素の最後だけボーダーを適用・削除 body要素に「line-height」を加える 天地の中央に配置 ネガティブなnth-childを使用してアイテムを選択
より早くcssやhtmlのコーディングが行えそうな情報いろいろ - かちびと.net
Web制作を少しでも効率化しよう と思って（今更）いろいろ便利そう な情報を探しました。既に使って いる情報の方が多かったのです が、折角調べたのでシェアしたい と思ってエントリーです。 コーディングをもっと円滑に、という旨の情報です。順不同。あんまり多いと逆効果なので量は絞りました。一応これでも絞りました。絞ったつもり。 zen-coding 話題になったzen-coding。だいぶ慣れて来た方もいらっしゃるのでは。 zen-coding（本家） HTMLコーディングが3倍速くなる？「Zen-Coding」 秀丸Zen- Codingマクロ コーディングの効率化を図るZen codingをDreamweaver cs4に入れる方法 WP Zen-Codingが凄く便利 初期設定とかTipsとか 制作前に知っておくと便利なコードとかTipsいろいろ。 css書く前にチェック。 もう、cla
フッタを常に下部に配置 - lucky bag
コンテンツの内容が少なくても、常に下部にフッタを配置させるための方法。ちなみに Safari とマック IE では動作しないっぽい。 footerサンプル 実際にサンプルを見てみれば分かりますが、ウィンドウを下方に広げても、フッタは常に下部に張り付いたままな筈です。また、ウィンドウを上部に縮めていってもコンテンツ部分の所でピタッと止まり、それ以上は移動しません。 html と body への指定 サンプルのソースを大雑把に分けると下記のような構造になっています。 <div id="container"> <div id="contents"> <div id="header">ヘッダ</div> 内容 </div> <div id="footer">フッタ</div> </div> まず、html と body の高さを 100% と指定しておきます。 container への指定 次に、
IE 6で泣かないための、9つのCSSハック (1/3) - ＠IT
有限会社タグパンダ 喜安 亮介 2009/10/8 Webブラウザごとのレンダリングエンジンの違いにより起こるレイアウトの表示ずれ問題に泣かされるWebデザイナのために、Webブラウザごとに使えるかどうかの表を交えながら問題を解決するためのCSSハック＆フィルタTipsをお届けします（編集部） 最も多く使われているのに……、いや、だからこそ 多くのWebデザイナの悩みの1つは、レイアウトの表示ずれ問題だと思います。これは、各Webブラウザが採用しているレンダリングエンジンの違いから起因している場合が多いです。その中でも、最もWebデザイナ泣かせのWebブラウザなのは、マイクロソフトが開発しているIE（Internet Explore）のバージョン6です。 IE 6は、発売開始当初のWindows XPにデフォルトでインストールされていたWebブラウザということもあり、世の中の多くのユーザー
Googleカスタム検索のデザインを変更する方法
今回のブログデザイン変更に伴い、実装してみたカスタマイズなのですが、これはもしかしてかなり使える? と思ったのでご紹介。 検索用に以前からGoogleカスタム検索を導入しているんですが、如何せん通常の検索フォームのデザインがあまりにイケてないんですよね。で、今回このカスタマイズってできないのかなぁとソースをベロベロ開いては考え、開いては考えしていたんです。 そうしたらですね、Googleカスタム検索ってボタンは変更できるんだけど、入力フォーム自体はscriptでスタイルを指定しているってことが解りました。なら、その指定部分を変更できればいいんじゃないかなぁと思っていじくってみた結果、 で・き・た! プログラミングはズブズブのド素人ですが、やってみるもんですねぇ。 というわけで、以下カスタマイズの流れ。 まずは書き換えの前に検索ボックスをデザイン 書き換えをする前に、まずはざっくりとどんなボ
Google カスタム検索の検索ボックスの見た目を独自デザインに変更する
サイト内検索ネタその3。 Google カスタム検索をさらにカスタマイズする。つまりカスタム Google カスタム検索！ Google カスタム検索は結構イケてる。http://www.google.co.jp/coop/cse/ Google カスタム検索でGoogle AJAX Search APIを使ってAjaxな検索機能をサイトに置くこともできる。むろん技術的な知識はあまり必要なく、設定をいろいろするだけでhtmlをはき出してくれる。 デフォルトでは検索ボックスはほとんどデザインされておらず、サイトのテイストと合わないことがあるかもしれない。ただcssでstyleを設定しようにもGoogle カスタム検索で出力されたhtmlではjavascriptでstyleを上書きしているため変更することができなかった。なのでデフォルトのhtmlを書き換えてみた。 まず、カスタム検索のことは忘
CSS3 Dropdown Menu - Web Designer Wall
While I was coding the Notepad theme, I’ve learned some new CSS3 features and now I would like to share it with you. View the demo to see a Mac-like multi-level dropdown menu that I’ve created using border-radius, box-shadow, and text-shadow. It renders perfect on Firefox, Safari and Chrome. The dropdown also works on non-CSS3 compitable browsers such as IE7+, but the rounded corners and shadow wi
CSS3でIEにも角丸を適用させるhtcファイル – creamu
CSS3で最も簡単にクロスブラウザの角丸を実装したい。 そんなときにおすすめなのが、『curved-corner』。CSS3でIEにも角丸を適用させるhtcファイルです。 Google Codeで、CSS3でIEにも角丸を実装させるファイルが配布されていますね。 クロスブラウザの角丸を実装するには、「border-radius.htc」ファイルをダウンロード、配置して、CSSに以下のように記述すればOKです。 CSS3 -moz-border-radius: 32px;//for Firefox -webkit-border-radius: 32px;//for Safari and chrome border-radius: 32px;//CSS3 behavior: url(border-radius.htc);//for IE すごく簡単な方法なので、CSS3での角丸はこれで決まりな
Styling HTML Lists with CSS: Techniques and Resources — Smashing Magazine
In an online world now dominated by CSS layouts, CSS-styled HTML lists have become invaluable tools in a CSS developer’s toolbox, due to the HTML lists versatile and graphically flexible nature. All this despite some of the obvious browser inconsistencies that can affect the styling of the different types of lists available in HTML coding. If you’re new to CSS, this article should provide a good o
【CSS】IE6 リストで隙間が出るバグ | Yuki's SlowLife
IE7だと問題ないのですが、IE6で出る症状です。リストでナビゲーション作ってるときによく出くわします。←こんな感じで、リストに妙な隙間が出るやつ。margin:0px;にしてもpadding:0px;にしてもこの隙間は一行に消えません。 ＜ul＞ ＜li＞＜a href="#"＞ナビゲーションＡ＜/a＞＜/li＞ ＜li＞＜a href="#"＞ナビゲーションＢ＜/a＞＜/li＞ ＜li＞＜a href="#"＞ナビゲーションＣ＜/a＞＜/li＞ ＜/ul＞
Designing CSS Buttons: Techniques and Resources — Smashing Magazine
Buttons, whatever their purpose, are important design elements. They could be the end point of a Web form or a call to action. Designers have many reasons to style buttons, including to make them more attractive and to enhance usability. One of the most important reasons, though, is that standard buttons can easily be missed by users because they often look similar to elements in their operating s
CSSを使ってリストを横並びにして、2行にまたがせる方法 - OKWAVE
CSS 横並びリストの書き方はどちらがよいでしょうか スタイルシートで横並びリストを作成するとき、li { display: inline; } を使う方法と、li { display: block; float:left; } を使う方法がありますよね。皆さんは、意識して、使い分けられていますか？ どちらで表現しようか、よく迷います。どちらの方法でも同じレイアウトにできるように思ってしまっていて。。でも自分の気付いていないデメリットがあるのかな？と気になります。「こうしたい場合、こちらのレイアウトだと無理」とか、「これではこのブラウザで表示が崩れる」など、お気づきのことがあれば、教えていただけないでしょうか。 下に、自分で確認用に作ったhtmlがあるので、そのままブラウザで見ていただければと思います。お手数ですが、よろしくお願いします。 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
[CSS]印刷用のスタイルシートがグッとよくなる、3つのポイント
既存の印刷用のスタイルシートや新規に作成する場合でも有用な、印刷用のスタイルシートの3つのTipsをLine25から紹介します。 Handy Tips for Creating a Print CSS Stylesheet 印刷時のテキストをデザインする 見出しやパラグラフ、リンクなどのテキスト箇所を印刷用にデザインします。 下記の例では、見出しを中央寄せにし、斜体にしています。 また、リンクのカラーをパラグラフと同じにし、下線を削除するのもよいでしょう（リンクのスタイルについては後述）。 <textarea name="code" class="css" cols="60" rows="5"> #header h1{ text-align: center; font-size: 42pt; font-style: italic; margin: 0; } #header h2{ text
15 Effective Tips and Tricks from the Masters of CSS - noupe
There are thousands of sites out there offering tips and tricks for using CSS. But how do you know where that information is coming from? Who says the people writing these "tips" know what they're talking about? For all you know, it could be someone who has not clue what CSS even stands for, let alone how to use it effectively. But that's not the case with the experts below. They're all well-known
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[CSS]古いバージョンのIEがサポート終了したので、どんどん使っていきたいCSSのテクニックのまとめ![[CSS]古いバージョンのIEがサポート終了したので、どんどん使っていきたいCSSのテクニックのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/e1fd89076a824a2b1b121fa5a6c8839a4338de05/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201601%2F2016012701.png)
floatした画像の横のテキストの回り込みをクリアするCSS – creamu
7 Steps for Systematizing The Design & Build Process - noupe
リゾレーヌ サプリを口コミだけで判断してはダメ？バストアップ効果が口コミ通りなのか試してわかったことを包み隠さず公開します！
仕事でよく使う「詳細はこちらへ」の組み方について | CSS Lecture