[CSS]「calc()」を使うとスゴイ便利！ページのレイアウト、要素やフォントのサイズ指定など実装テクニックのまとめ | コリス

2017/02/09 322 users Calc rem メジャーブラウザ コリス フォントサイズ

pxでも、%, em, rem, vw, vhなどの相対単位でも、異なる単位の計算式で値を指定できる「calc()」がどのように機能し、どのように使うのか、「calc()」を使うと便利になる要素のセンタリング、フォントサイズ、グリッドの作成などの実装例を紹介します。 Opera Miniを除くすべてのメジャーブラウザに「calc()」はサポートされており、レスポンシブとも非常に相性のよいCSSの関... 続きを読む

はてなブログデザインカスタマイズ | タイトル・画像のセンタリング・サイドバーや見出しなど - Yukihy Life

2015/07/31 60 users ブログカスタマイズ 小出し 見出し Yukihy Life

2015-07-31 はてなブログデザインカスタマイズ | タイトル・画像のセンタリング・サイドバーや見出しなど ブログ ブログ-はてなブログカスタマイズ ブログ書いているよりも、ブログカスタマイズをしている方が楽しいゆきひーです。 今までいろいろと小出しに記事にしていましたが、デザインCSSに書かれていることの中で、どのテーマでも共通で使える（かもしれない）ものをまとめて書きました。 他の記事で... 続きを読む

CSS Transformによるセンタリングのベスト・プラクティス - Weblog - Hail2u.net

2015/05/23 42 users コンテナー Weblog プラクティス hail2u.net

上下左右のセンタリングには様々な手法が編み出されてきた。最近はCSS Transformを使う方法がメジャーになりつつある。コンテナーとセンタリングしたい要素のサイズが共に不明でもうまくいくところなど、そこそこ万能感があるのがポイントだろうか。このCSS Transformによるセンタリングは左下に動かしてから右上に戻すパターンと、その逆の右上に動かしてから左下に動かすパターンがある。どちらでも理... 続きを読む

「内田篤人はセンタリングの神！まさに完璧なカムバック」独地元紙、絶賛！（関連スレまとめ）: カルチョまとめブログ

2013/03/10 14 users mnewsplus シャルケ カムバック test 絶賛

【サッカー/ドイツ】地元紙がシャルケＤＦ内田篤人を絶賛「センタリングの神」 http://awabi.2ch.net/test/read.cgi/mnewsplus/1362916755/ 1: ぴぃとφ ★ 2013/03/10(日) 20:59:15.98 ID:???0 　約１カ月ぶりに復帰した「ルール・ダービー」のドルトムント戦で、２アシストを決めた シャルケの日本代表ＤＦ内田篤人（２４）... 続きを読む

iPhone 5？　iOS 6？　カレンダーは全く改善されていないじゃないか！ : ギズモード・ジャパン

2012/10/02 25 users ギズモード カレンダー ジャパン タイポグラフィー iOS 6

iPad , iPad/iPod/iPhone/iTunes , iPhone , iPod iPhone 5？　iOS 6？　カレンダーは全く改善されていないじゃないか！ 2012.10.02 17:00 毎月1日は何の日でしょう？　映画の日？　いいえ、アップルのカレンダーとタイポグラフィーにがっかりする日です。 もう何度も取り上げてられている、このカレンダー問題。センタリングがおかしいじゃない... 続きを読む

リストの横並び時に生まれる<li>の隙間を解決する5つの方法

2012/05/12 108 users float 隙間 ナビゲーション 現象 リスト

ナビゲーションやリストを水平に並べると、なぜか少し隙間が生まれてしまうことがあります。今回はこの現象の解決方法をいくつか紹介したいと思います。 結構簡単な方法なので、知っている人も多いと思いますが、もし知らない人がいれば、ちょっとは役に立つかと思います。基本的にはfloatで解決すれば良いと思いますが、floatを使うと都合が悪くなる場合などもあると思うので(width指定とか、センタリングとか)... 続きを読む

コーディングに役立つCSSスニペット集 | CREAMU

2012/01/29 51 users CREAMU コーディング 垂直方向

「Useful CSS Snippets for Your Coding Arsenal」という記事で、コーディングに役立つCSSスニペット集が紹介されています。 垂直方向のセンタリング 続きを読む

ドメサカ板まとめブログ : 【W杯3次予選】日本圧勝！ハーフナー、岡崎、香川がそれぞれ２発！駒野、中村も …各チームまとめ（その１）

2011/10/11 9 users ハーフナー 駒野 ＤＦ駒野友一 ウズベキスタン 得失点差

＜Ｗ杯アジア３次予選：日本８－０タジキスタン＞◇Ｃ組◇１１日◇大阪・長居スタジアム 日本代表がＦＩＦＡランク１２４位の格下を圧倒、２勝１分の勝ち点７とし、得失点差でウズベキスタンを上回ってグループ首位に立った。前半１１分、駒野からのセンタリングをハーフナー・マイク（２４）が頭で合わせる代表初ゴールで先制するとゴールラッシュ。ＦＷ岡崎慎司（２５）、ＤＦ駒野友一（３０）、ＦＷ香川真司（２２）と続き、前... 続きを読む

IE共通の9つのCSSバグをそれぞれ解決する方法:phpspot開発日誌

2009/11/18 674 users phpspot開発日誌 Nettuts auto それぞれ

IE共通の9つのCSSバグをそれぞれ解決する方法がNettutsにて紹介されています。 どれも、なんでだろうと頭を悩ましそうな問題なので解決法を知っておくと簡単に対処できそうです。 1. センタリングが効かない問題 margin: auto を指定した場合の期待する結果 IEの場合以下のようになりますが↑にするための解決法が書かれています 2. 横に並べたいリストが階段状になってしまう IEの場合... 続きを読む

[CSS]いろいろな問題を解決する1行のスタイルシート集 | コリス

2008/03/11 785 users コリス line-height フロート 横幅 CSS

CSS Globeのエントリーから、スタイルシートのレイアウトで生じる問題を解決する８つの1行のスタイルシートの紹介です。 8 Premium One Line Css Tips 縦方向のセンタリング 高さが固定されている場合、「line-height」を使用して、縦方向のセンタリングが実装できます。 デモページ line-height:24px; はみだす箇所を隠す 横幅の広い画像などをフロート... 続きを読む