[CSS]iPhoneでsubmitボタンのテキストがずれた時の対応方法
submitボタンのスタイルがiPhone(Mobile Safari)で、テキストがずれたり、「border-radius」の角丸が期待より丸くなってしまった際の対応方法を紹介します。 Styling Submit Buttons for Mobile Safari デモページ キャプチャの元画像：協力（@sparrowSeven） この現象はデスクトップ用のブラウザ（Safari, Firefox）では起きませんでした。また、iPhoneのシミュレーター（iBBDemo2）でも確認できませんでした。iPhone4固有の現象のようです。 原因と思われるのはpaddingの値が正常に適用されていないような感じで、未対応時、対応時のスタイルシートは下記の通りです。 未対応時のスタイル HTML HTMLは非常にシンプルです。
CSSでレイアウトするなら絶対覚えておきたいブロックレベル要素のクセとかいろいろ
Webデザインをするときに、必ず使うスタイルシート。思うようなレイアウトを作るために、チェックしておきたいブロックレベル要素や、インライン要素のクセみたいなのをまとめてみました。後半はスタイルが反映されない原因のひとつ、スタイルの優先順位についてです。 Attention 記事公開時からいろいろと勉強して、この記事内で紹介している事柄で、間違った解釈をしていたなーと気がつきました。 この記事の中でいくつか追記してありますが、詳しくは、新しく書いた 11月7日の記事：CSSでレイアウトするなら絶対覚えておきたい配置のルール：フロートや絶対配置、z-index とかいろいろ を読んでみてくださいね！ New Post Webサイトをデザイン、レイアウトするのに欠かせないのが CSS（Cascading Style Sheets、スタイルシート）ですね！今では CSS3 が話題を集めていて、CS
【決定版】僕の考えた最強のfont-family指定
本記事は200弱ツイート、500弱のはてブと16000PVを2日で稼ぎ出した(稼いだからってどうもないけど) [CSS]俺好みのfont-family指定が最強に読みやすくてオススメ！ | DevAchieveの反省会会場となります。 未読の方は先に読んでおくと話がわかりやすいかと思います。指定だけ見たい人はこちら。 [CSS]俺好みのfont-family指定が最強に読みやすくてオススメ！の狙いタイトルではてブや検索流入を狙う本当は教えたくないSEO！アクセス数が20倍になったブログタイトル32文字の法則 | Chrome Lifeで 解説されている通り、はてブは全角32文字までに入れないとトランケートされてしまうので短めに。 はてブユーザーが大好きな最強とか入れておいて、読んでブクマしてもらえるようにしておきます。 「font-family 指定 オススメ」というキーワードを埋め込んで
[CSS]俺好みのfont-family指定が最強に読みやすくてオススメ！
俺のためにWeb開発者は俺にとって読みやすいフォント指定をするのだ！ 指定方法は下にあるぞ！ 新規でサイトを制作するのに基本のフォント指定を持っていなかったので 色々調べたり、このブログのフォント指定を変更してみたりしたら 実は Arial より Verdana のほうが見やすいことがわかってしまった。 さすがMicrosoftがコンピュータ用ディスプレイ上での視認性向上のために 作ったフォントだ！Verdana - Wikipedia フォント周りのオススメの指定追記記事により良い指定を載せたのでこちらは掲載終了しました。 font-family めっちゃ長い！何故かと言えば環境によっては指定したフォントがインストールされていない可能性があるから。 だから指定したいフォントを優先順位つけて記述する。左にあるフォントが一番優先順位が高い。 余談だけどfont-size(文字サイズ)とlin
CSSのfont-family指定はこれで決まり！（2013冬） - 遠近法ノート
追記：最初、うっかり「2013冬」って書いてしまったんですけど、ほんとは「春」と書かなきゃいけませんでした（汗）*1 とりあえず今、CSSのfont-familyでフォントを指定するならば、これで決まり（一番下の追記も参照で）。 font-family:'Lucida Grande', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif;CSSのfont-family指定、「あえてフォントを指定しない」っていうやり方もアリですが、いろいろな事情でそうも言ってられません。とりあえず今現在の最適font-family指定を考えてみたところ、上のようになりました。 指定順序、入れたフォント、入れてないフォント、すべてに意味があります。 以下説明。 ヒラギノはProではなくProN。 OS Xの和文標準フォ
CSS: Elastic Videos - Web Designer Wall
While I was coding the Elemin Theme (a responsive WordPress theme that I recently designed), one of the challenges that I faced was to make the embedded videos elastic. Using the max-width:100% and height:auto trick works with native HTML5 video tag, but it doesn’t work with embed code using iframe or object tag. After hours of experimenting and Googling, I finally found a trick on how to achieve
CSSスプライトの「リピート」に対処するコツ | Hep Hep!
GWの前半はサイトの高速化を図るためにCSSスプライトでのコーディングを久々にやってみたが、CSSスプライトのリピートで少しつまずいたので、そのコツをちょいと紹介。 CSSスプライトは複数の画像を一枚にまとめてCSSで細かく指定CSSスプライトは、様々なアイコンなどを一つの画像にまとめることでサーバーのリクエストを減らして高速化を図れ、例えばこんな風に様々な画像を一枚にまとめて、CSSで個々の画像を指定していくわけだ。 基本的な使い方などの詳細については、WebクリエイターボックスさんとLopanさんあたりで詳しく紹介されているので、そちらをどうぞ。 CSSスプライトはリピートには向かない！？スプライトさせたいイメージうちのサイトの右サイドエリアにあるタイトルバーは、背景画像に斜めのボーダーを入れていて、横にリピートすることを想定した。 リピートのダメな例んで、先ほどのまとめた画像をrep
CSSやJavaScriptの改行やインデントを削除して圧縮したり、元に戻したりするツールまとめ
年末に、オンラインブックマークでたまってしまいがちな「あとで読む」とか、「一応保存」とかを整理することにしました。 そしたら、同じような内容や機能のWebサービスのページをいくつもブクマしてることに気づいてしまいました。 そこで、似たようなものは自ブログにまとめて少しブクマ数をスッキリさせることにします。 で、実はあんまり使ってないけどいざって時にあると助かる「スクリプトの圧縮＆デコードツール」をまとめてみたいと思います。 まずは圧縮編から。 ファイルの改行やインデントを無くしたりしてファイルサイズを軽くするツール 私がやるような規模の案件ではまず使うことはないのだけど、サイト規模が大きくなるとこういう配慮も必要なのかも。 やってることはどのサイトでも一緒なので、各自見やすい・使いやすいと感じるやつを選んでいただければよろしいかと。 CSS編 CSS Compressor 圧縮度合いを4段
CSSの整形・圧縮が一瞬で行えるツール「csCSSc」
CSSの整形・圧縮が一瞬で行えるオンラインツール「csCSSc（Client-side CSS (De)Compressor）」を紹介します。圧縮（難読化）解除も行えます。 csCSSc オンラインでCSSの整形・圧縮が行えるツールは色々出回ってます（4項参照）が、csCSScは動作が圧倒的に軽いです。 使い方をざっと説明します。 １．圧縮 ページ一番上にある「Original valid CSS-code」のテキストエリアにオリジナルのCSSをペーストして「Compress」をクリックすれば、一瞬で圧縮されます。 オプションの意味は次のとおりです。 include comments：コメントを含む single line：1行化する sort styles：アルファベット順にソートする 何もチェックしない場合は次のようにセレクタごとに改行して圧縮します。 「single line」をチェ
もうCSS設計で悩まない！「CSSコーディング ガイドライン」策定のための参考記事・スライド 7選 / SQUEEZE - Web Design Studio -
構造やクラス名、プロパティの記述方法などをルール付ける「CSSコーディング ガイドライン」策定のための参考記事を紹介します。 チームでの共有、コーディング効率やメンテナンス性などの改善のためにも、これを機会にガイドラインを導入してみてはいかがでしょうか。 コーディング規約を作ろう"制作チームの規模が大きくなればなるほど、コードの統一性は大切" ▶ コーディング規約を作ろう Webクリエイターボックス コーディング規約を見直すうえで抑えておくべきポイントを紹介。 チェックポイントコーディング規約に含むべき項目 ・ディレクトリやファイルの階層・名前 ・記述順やインデント、単位などのフォーマット ・ID,classなどの命名規則 ・対応ブラウザー CSSガイドラインを翻訳してみた"多くの開発者が関わる場合、メンテナンス可能、コード見通し良く、拡張可能にするために統一された方法を用いることが重要"
Takazudolog - OOCSSとSass
CSS Preprocessor Advent Calendar 2012の10日目、@Takazudoです。 僕はSassが好きです。なぜならSassにはextendがあるからです。その理由を、社内勉強会で発表した、以下のスライドで話したことを補足しつつ、書きます。 OOCSS + Sass OOCSSってなんぞ まず、Sassのextendが素敵な点を紹介する前に、OOCSSについて簡単に紹介します。 OOCSSというのは、Nicole Sullivanという人が言い出した考え方です。そのプレゼン資料やビデオなどは、本人が発表したものが、slideshare等にアップされています。 Object-oriented CSS Object Oriented CSS by Nicole Sullivan · Fronteers The Cascade, Grids, Headings, an
Stronghold - ぼくらの本拠地
AWSWordpress April 5th 2016 Amazon EC2でWordPress – Amazon S3にメディア画像等の静的ファイルを設置する方法 AWSWordpress April 5th 2016 Amazon EC2でWordPress – パーマリンクがうまく動作しない場合 AWSWordpress April 5th 2016 Amazon EC2でWordPress – SSH接続からWordPressのインストールまで AWSWordpress April 4th 2016 AWS Amazon EC2上でWordPressを動作させる方法 – EC2のインスタンス作成からMySQLの設定まで AfterEffects May 25th 2015 After Effects 埋め込み動画/静止画から指定色を透過させ、背景透過のPNG画像（連番）で書き出す方
CSSのみでふわっと浮かび上がる吹き出し風のツールチップを作る
CSS3を使用してふわっと出現するアニメーションの吹き出し風のツールチップをcssのみで作る方法です。 完成は下のデモのような動きになります。 See the Pen CSSのみでふわっと浮かび上がる吹き出し風のツールチップ by Saomocari (@Saomocari) on CodePen. HTMLの部分 HTMLはulタグでマークアップします。ツールチップに表示させたい部分はliタグの中にdivを入れてその中に記入します。 <ul id="tooltip"> <li> <a href="#">tooltipsample1</a> <div>ツールチップの部分</div></li> <li> <a href="#">tooltipsample2</a> <div>ツールチップの部分</div></li> <li> <a href="#">tooltipsample3</a> <d
コーディング規約を作ろう
コーディング規約を作ろうコーディング規約やスタイルガイドは、HTMLやCSSのマークアップや、各種プログラミング言語の書き方をまとめたものです。コーディングスタンダードやコーディングガイドラインとも呼ばれますね。コーディング規約を決めていなかったり、あいまいにしたまま進めていくと、書式が統一されていないため、コードを追加すればするほどゴチャゴチャしたコードになりがちです。チームでコーディングしていくならなおさら。今回チーム用のコーディング規約を見直すことになったので、その時感じた抑えておくべきポイントをまとめてみます。 コーディング規約に含むべき項目ディレクトリー階層ファイルを保存するフォルダーの階層や、そのフォルダーの名前を決めておきます。画像を格納しているフォルダーを例にあげても、「image」「images」「img」などの名前が考えられます。人によってつけるフォルダーの名前が変わっ
intra-mart Accel Platform Tag Documentation
CSS Module List API Documentation クライアントサイド JavaScript Client Side JavaScript API Client Side JavaScript API (IWP v7.2) スクリプト開発モデル タグライブラリ im-BizAPI im-BizAPI(互換) JavaEE開発モデル タグライブラリ im-BizAPI im-BizAPI(互換) CSSモジュール一覧 CSSモジュール一覧 CSS Sprite CSS Sprite Image List Webサービス IM-Workflow Web サービス (IWP v7.2)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSの設計
大規模サイトにおける本当は怖いCSSの話
Slideshow with javascript without absolute positioning
How to remove focus border (outline) around text/input boxes? (Chrome)
NerdyData
