Media Queries を使って、Webサイトをスマートフォンに対応させるときの注意書き
今回このブログ - Webデザインレシピを、iPhone などでも見れるようにリデザインしました。使用したのは CSS3 の Media Queries（メディアクエリ）。メディアクエリの使い方や感想、気をつけたい注意書きをまとめてみました！ 遅ればせながらこのブログ – Webデザインレシピを、スマートフォンでも見れるように改修しました。このブログは WordPress で書いているので、スマートフォンや iPad への対応方法はいくつもあるのですが、今回は CSS3 の Media Queries（メディアクエリ）を使って、iPad、iPhone など、いろんなデバイスに対応（対応というか、一応見れる程度）にしてみました。 なので Media Queries を使ったスマートフォン対応と、リデザインしながら思ったことなどをまとめてみました。 CSS3 Media Queries 目次
長い単語やURLの改行をコントロールするword-wrapプロパティ - builder by ZDNet Japan
欧文のテキストは半角スペースの位置で改行される。そのため、半角スペースが入らない長い単語は途中で改行されることがない。レイアウトスペースの横幅が狭い場合、長い単語ははみ出してしまい、レイアウトを崩す原因となる。 とはいえ、レイアウトスペースよりも横幅が長い単語を使う機会はほとんどないだろう。問題が発生する確率が高いのは、長いURLを表記した場合だ。 URLは半角スペースを含まないので、ブラウザにとっては1つの長い単語と同じ扱いになる。特に、ブログなどのコメントで長いURLを記述されると、制作者の予期しないところでレイアウトが崩れる原因になってしまう。 そこで今回は、ブラウザごとのURLの改行処理の違いを確認して、長い単語やURLの改行をコントロールするword-wrapプロパティを紹介したい。 ブラウザごとのURLの改行処理 次のサンプルは、横幅が300ピクセルのボックス内に長い単語やUR
FreeCSSTemplates.org is now FCT.co
FreeCSSTemplates.org has been rebranded to FCT. Therefore, our new domain will be FCT.co while our previous domain FreeCSSTemplates.org will always be kept redirected here. What happened to FreeCSSTemplates.org? As the domain FreeCSSTemplates.org was dedicated to just “Free CSS Templates“, we decided to expand our brand name by keeping the domain name short but with more topics to cover. That mean
包容要素にoverflow:hidden;を使う際の注意点メモ - Rewish
高さの異なるカラムを揃えるスタイルシートで包容要素にoverflow:hidden;を指定する際、その中身に対してページ内リンクを使うと移動された部分より上が非表示になります。 問題のサンプル HTMLサンプルコード <div class="example-wrap"> <div class="example-main"> <div id="example-section1"></div> <div id="example-section2"></div> </div> <div class="example-navi"> <p><a href="#example-section2">第二セクションへ移動</a></p> </div> </div> .example-wrap { width: 500px; overflow: hidden; } .example-main { float
HR でfloatを解除するときの余白を詰める − ミモザガーデン
お久しぶりに仕事のことを書きますよ。(^_^) CSSでレイアウトしていると、floatのclearする方法が必須なのですが、a-blog1.xでは、一般向けに解りやすく記述するため、なるべく少なめのCSSで記述されています。 ですが、このままだと、WindowsIE6のバグで、hr のmargin-bottomに20pxの余白が付いてしまいます。 レイアウトにより、余白が入ると非常に困ることもあるでしょうから、余白を詰めるための記述を紹介します。 WindowsIEのhrのmargin-bottom対応サンプルページはこちらです。 <style type="text/css"> <!-- .clearHidden { margin:0 0 0 0; border:none; padding:0; height:0; width:auto; visibility:hidden; clear
CSS メニュー横並びボタン - 3ping.org
2007-01/20更新しました。 ソースコードを見直してボタン化の方法を変えました。基本CSSボタンメニューと同じ方法で、floatとfloatによるクリアの問題を解決するためのコードも含めました。これにより、コピペで問題なく使えるようになりました。 変更点は以下の通りです。 floatをクリアするコードも含めた。ページ下部にはMacIEに対応する場合の追加コードも記述 a要素にwidthを指定していたのを、親要素に変更。これにより、a要素には左右にpaddingが指定できるようになった。 HTML側でulとliのセットのみでボタン化できるようにした。 プロパティの記述順序を変更 <ul id="globalNavi"> <li><a href="./">List1</a></li> <li><a href="./">List2</a></li> <li><a href="./">Lis
Railsでスタイルシートの中のURLを自動的に変更する方法 - このブログは証明できない。
「優しいRailsの育て方」の「おまけ」に書いてある通りです。でも、私のような初心者には補足が必要なので、ここでやり方をまとめておきます。 "public/stylesheets/style.css"の中に画像のURLが指定されているとします。 body { background-image: url(/images/back.gif); } Railsの運用環境のパスが変わると、上記のURLも変更しなくてはなりません。そこでスタイルシートもRailsで出力してしまえば解決するとのことです。 CSS用のcontrollerを作成。 script/generate controller stylesheet style "app/controllers/stylesheet_controller.rb" class StylesheetController < ApplicatoinCont
ウノウラボ Unoh Labs: buttonタグでサブミットするあれこれ
CSSでいつも悩まされるのはクロスブラウザですけど、フォームでは特に面倒くさい要素が山盛りですよね。ボタンの文言を動的に変えたいから画像はなるべく使いたくないけど、だからといってブラウザのデフォルトのボタンとか、味気ないですものね。 今日は、フォームにつきもののボタンについて考えてみます。 私たちがボタンに求めるモノって、何でしょう。 データを送信（submit）する どのブラウザでも同じように見える 使い回しが聞く ボタンについている文言がどんなに長くなっても、水平方向の長さがフレキシブル 上記のようにサイズ的にフレキシブルであっても、見た目の美しさを阻害しない ボタンの大きさ＝クリックできるエリアの大きさ 画像がdiableされていても使用可 CSSがdisableされていても使用可 ボタンのように見えて実はただのリンクの時のもある これらの要求を解決してくれる方法が複数出
line-height の値には単位なしが良いとされる理由
CSS で行ボックスの高さを指定する line-height 値に、em(length) や %(percentage) などの単位を付けて指定しているサイトを意外と見かける。それは間違いではないし、例えばナビゲーションとかでブロック要素の垂直センターに配置するために意図的に指定しているんであれば良いんだけれど、そうでないなら line-height 値には単位なし (number) で指定した方が良いのにとか思ったりする。その理由は Eric's Archived Thoughts: Unitless line-heights でも分かりやすく説明されているんだけど、ちと劣化コピーしてみる。 単位ありと単位なしの違い 手っ取り早く説明するために、サンプルを作ってみた。p 要素があって、その中にインライン要素の em で一部分を強調している。分かりやすいようにそれぞれの font-size
Lucky bag::blog: リモートロールオーバーを CSS だけでやってみる
リモートロールオーバー、つまり、離れた部分の画像をロールオーバーで変化させる動作は、JavaScript を使わずに CSS だけででも可能。今は無くなってるっぽいんだけど、一時、adaptive path でも使われていてたやつを参考に、サンプルを作ってみた。 remote.html サンプルの (X)HTML コードは下記の通り。 <div id="rollover"> <ul> <li id="food"><a href="#"><em>焼き肉</em></a></li> <li id="sneaker"><a href="#"><em>オニツカタイガー ファブレ74/0123</em></a></li> <li id="beer"><a href="#"><em>仕事の後のビール</em></a></li> <li id="coffee"><a href="#"><em>缶コーヒー
background-color: transparent; - Google 検索
2021/09/10 · background-colorに透明色(transparent)を設定する方法と用途 · ボタン要素の背景色を透明にする · transparent以外で透明色を設定する · 少し応用して ...
GIGAZINE - CSSで角をもっと丸くする方法いろいろ
「スライディングドア」と呼ぶ方法で全体をヘッダー、ボディ、フッターの3つに分割して、コーナー部分などはオーバーレイとか使ってみましょう、という方法。 Another attempt at CSS rounded-corner dialogs using the sliding doors technique http://www.schillmania.com/projects/dialog/ 使用しているコードと画像のダウンロードはこちらから http://www.schillmania.com/projects/dialog/dialog.zip また、こちらに透過PNGを利用したバージョンもあります。 Another attempt at CSS rounded-corner dialogs using the sliding doors technique http://www.s
Niceformでエレガントなフォーム生成:phpspot開発日誌
badboy.media.design :: articles :: Niceforms Web forms. Everybody knows web forms. Each day we have to fill in some information in a web form, be it a simple login to your webmail application, an online purchase or signing up for a website. They are the basic (and pretty much the only) way of gathering information on the web. 配布されているJavascriptのファイルとCSSファイルを読み込むだけで、フォームデザインが早代わり。 HTMLに組み込む例） <scrip
Spiffy Corners - Making anti-aliased rounded corners with CSS
Anti-aliased rounded corners using pure CSS. No Images. No Javascript. No fluff.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
リゾレーヌ サプリを口コミだけで判断してはダメ？バストアップ効果が口コミ通りなのか試してわかったことを包み隠さず公開します！
IBM Developer
Flex 2 Style Explorer
http://www.stylish-style.com/csstec/csstec-top.html
個人的に思う、よろしくないCSS - Personnel
デフォルトスタイルの差異を無くすCSS