【CSS】意外と知られていない！横幅100%の背景が切れるバグ - 世界を変えるのはブルペンキャッチャー
2013-08-07 【CSS】意外と知られていない！横幅100%の背景が切れるバグ WEB制作 author：ゆっき WEBデザイナーの皆さま、趣味でWEBサイト制作をしている皆さま。 おはようございます。ゆっきです。 近年、iPhoneにはじまり、Androidを搭載した色々なスマートフォンが登場してきて、 画面解像度も様々でWEB制作時には可変対応で大変！ になってまいりましたね！ さて今回は、背景幅を横100%（画面の横幅いっぱい）に設定している場合に起こる、 意外と知られていないバグについてのお話と対処法をご紹介いたします。 このバグはブログサービスで提供されているデザインテンプレートなどでも発生しているので、 自分のサイトやブログでチェックしてみることをお勧めいたします。 自分のPC上では問題なくても他のPCで見た場合や、 スマホで閲覧した際にズレまくっている可能性大です！ あ
Sass&ScssをリアルタイムにCSSに変換できるSassmeister | バシャログ。
エクスペンダブルズ2を吹き替えでもう一回観たいminamiです。 Webサービスのご紹介です。Sass/ScssをリアルタイムでCSSに変換してくれるSassMeisterというサービスです。 Sassmeister ページを開くとこんなかんじになっています。左のエリアににSassを書いていきます。エディタ自体もインデントできたり行をハイライトしてくれたり結構よくできています。 シンタックス、エクステンション、出力の形式も選べます！普段はScssのフレームワーク、compassを使っているのでこれが選べるのも嬉しいところ。 左エリアにこんなScssを書きました。compassのmixinも入れてみます。 Sass/Scssの場合CSSの形式にするにはコンパイルの作業が必要になりますが、このサービスではリアルタイムで右側に出力されます！すごい！ ちょっとSassを利用したいんだけど環境を整え
コンテンツの少ないページに対応！CSSでフッターを下付き表示にする｜Webの道草
コンテンツが少ない時でもフッターを下付きで表示させるCSSをご紹介いたします。 コンテンツの内容が多ければ気づきませんが、お問い合わせフォームなど情報量が少ないページではフッターがコンテンツ部分まで上がってきてしまいます。 今回ご紹介する方法はそんな問題を解決してくれます。 フッターを下付きに表示させるとは？ 通常は左のイメージのようにコンテンツが少ないとフッターがコンテンツのところまで上がってきて、下に余白が空いてしまいます。 そこで、CSSで右のようにフッターを下付きで表示させるようにします。 HTML html,body { height: 100%; margin: 0; } #wrapper { width: 100%; min-height: 100%; height: auto !important; height: 100%; position: relative; } #
【iPhone】<meta name=”viewport”>について « minimo
2010年1月24日（日） No Comments <meta name=”viewport>について、Safari Dev Centerを参考に、自分なりにまとめてみた。 http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html#//apple_ref/doc/uid/TP40008193 Viewportとは iPhoneにおける仮想的なウィンドウサイズのこと。デフォルト値は980px このメタタグにより、ページを最初に開いた時の画面サイズ、拡大率などを指定できる。 iPhoneの画面サイズは横：320px 縦：480px。 例えば、下記は「横幅はデバイス（iPhoneは横幅320pxなので、ここ
CSSでレイアウトするなら絶対覚えておきたいブロックレベル要素のクセとかいろいろ
Webデザインをするときに、必ず使うスタイルシート。思うようなレイアウトを作るために、チェックしておきたいブロックレベル要素や、インライン要素のクセみたいなのをまとめてみました。後半はスタイルが反映されない原因のひとつ、スタイルの優先順位についてです。 Attention 記事公開時からいろいろと勉強して、この記事内で紹介している事柄で、間違った解釈をしていたなーと気がつきました。 この記事の中でいくつか追記してありますが、詳しくは、新しく書いた 11月7日の記事：CSSでレイアウトするなら絶対覚えておきたい配置のルール：フロートや絶対配置、z-index とかいろいろ を読んでみてくださいね！ New Post Webサイトをデザイン、レイアウトするのに欠かせないのが CSS（Cascading Style Sheets、スタイルシート）ですね！今では CSS3 が話題を集めていて、CS
Webデザイナー & デベロッパー必見！絶対使えるチートシートまとめ | webox blog
フレームワークやらライブラリやら、色々触る機会が多いですよね。 そうやって色々触っていると「あれ、あの関数なんだっけ」みたいな事がよくあります。 そういう時に便利な各種チートシートをまとめてご紹介します。 上はデザイナー向け、下へ行くほどデベロッパー向けになります。 Photoshop Keyboard Shortcuts 忘れがちなショートカット。Win/Mac両対応。 Color theory 壁紙用サイズも多数あります。 Periodic table of typefaces よく使われるフォントを元素周期表にはめ込んだモノ。ぱぱっとどんな感じのフォントなのか確認するときに良さそう。 Git Cheat Sheet Wallpaper どこに入れるか悩んだけど、皆使うべきなのでここにおいとこう。 Ultimate HTML5 Cheatsheat HTML5について網羅したチート
[CSS]スタイルシート設計のベースになる12のCSSのフレームワーク | コリス
specky boyのエントリーから、ブラウザのスタイルの初期化やレイアウトのテンプレートなど、スタイルシート設計のベースとなるCSSのフレームワークを紹介します。
Blueprint : CSSのフレームワーク
Raging Thunderbolt. Blueprint 0.4 released blueprintcss - Google Code Blueprintとは、いわゆるひとつのCSS のフレームワークです。ライブラリはbutton.css、grid.css、reset.css、typography.cssの4つのCSSで構成されていて、圧縮版のcompressed.css、ライブラリをインクルードするためのscreen.css、印刷用のprint.cssなどが同封されています。それぞれのCSSはその名の通りで、button.cssはボタン用のCSS、grid.cssはグリッドデザイン用のCSS、reset.cssはいわゆるブラウザのデフォルト設定をリセットするためのCSS、typography.cssはタイポグラフィティ用のCSSです。 わりとシンプルな構成のCSSで、Typograp
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
css-lecture.com
IDEA * IDEA
EmChart
デジタル料理人 - Webプログラマコンサル屋 - - CSSフレームワーク？「blueprintcss」って何？（試してみよう）
blueprintcss - Google Code