PC向けサイトがスマホでも崩れないようにする方法 - Qiita
PC向けに作った Web サイトをスマートフォンでみると、「 部分的に意図せず文字が大きくなる 」といった不具合が起きることがあります。 解決策ググって修正しようとすると、こんどは「 毎回、ページの左上が拡大された状態で表示されてしまう 」状況に陥ってしまうことがあります。 （私はありました。） ということで、PC向けサイトも最低限スマートフォンで見られるようにする方法をメモっときます。 勝手に文字が大きくなる対策 -webkit-text-size-adjust という、モバイル版ブラウザでのみ有効なプロパティがあるようです。 このプロパティが、デフォルトでは auto になっているため、文字が自動的に調整されて大きくなってしまう、というカラクリでした。 reset.css あたりに追記しておくのが妥当かと思います。 参考：iPhone版Safariで文字サイズがおかしくなるときは-we
html floatの基本 高さを認識させる - Qiita
はじめに htmlの基本のfloatの処理、高さを認識させる手法をまとめます。 html初心者の方ははじめはfloatに壁を感じてしまうかもしれませんが、慣れれば難しいことはありません。 ここで、頭の整理をしましょう。 floatについて floatは左右に要素を回りこませたいときに使います。 注意点としては、floatという名前通り、要素を浮かしているということを忘れてはいけないということです。 floatは浮いているんだ！！ 常にこの意識を持ちましょう。 floatを使った要素の親要素はheight:auto;(デフォルト) では高さ0となってしまいます。これは要素が浮いていて、高さが認識されていないのです。 では、高さを認識させるには？ 目次 1. 親要素にoverflow:hidden; または overflow:auto;を使う 2. floatした要素の直後の要素にclear:
iPadやiPhoneでサイトの右側が切れる、余白ができる場合の対処法
まえがき 以前制作したサイトをたまたまiPadで閲覧したら、一部のページが画面内に入りきらず右側が切れてしまっていました。 iPhoneでみるとピッタリ画面に収まっていたのですがiPadやiPhoneめんどくさいですね。 昔のIE6を彷彿とさせる感じでiPadやiPhone対応が面倒くさいです笑 しかし「viewport」をしっかり設定すれば簡単に直すことができましたので覚え書きとしてエントリーしておきます。 ただPC用のサイトを単純にiPadのディスプレイにピッタリ収めて表示してあげれば良いだけです。 iPadやiPhoneで右側が切れたり、余白が空いたりする現象を回避する「viewport」の記述 「viewport」の設定で表示するデバイスのディスプレイサイズに合わせてサイトをリサイズして表示することができます。 <meta name="viewport" content="widt
【CSS】擬似要素を使って装飾を行う場合、ie8は::擬似要素というcssセレクタを理解しないことを利用する - 訳も知らないで
Webデザインにおいて、CSSでちょっとした装飾を行う場合 擬似要素の:afterや:beforeを使うことがありますよね。 例えばこんなの↓ 〜参考にさせていただきました！〜 [CSS]box-shadowを使って、紙がふわりと浮かんだようなエフェクトをつけるスタイルシートのまとめ | コリス 超簡単！CSS3だけでアイコンの矢印を表現する方法 | 福岡市で働く独学WEBデザイナーブログ｜GAHAKU DESIGN こういった装飾なんかで、CSS3を利用して実装した場合、 IE8での表示が厄介なことになります… というのも、 IE9以上：css3に対応しているので問題ない IE7以下：擬似要素(:before, :after)といった擬似要素が解釈(表示)されない →上記のようなちょっとしたデザインであればレガシーブラウザで表示されなくても問題ない なのですが、IE8だと IE8：擬似要
IE8用CSSハック | Hack
どうしてもIE8用にCSSハックが必要になってしまったので、あれこれ試して実際に使えたハックをメモ。 html>/**/body .tlImageBlock a { display /*\**/: inline \9; } html>/**/body 指定したいセレクタの前に html>/**/body を置く。 /*/ プロパティとコロン（:）の間に /*\**/ を入れる。 （見出しはエディタ側の都合で正しく表示されていません…） \9 セミコロン（;）前に \9 を入れる。 関連するCSS指定の最後に記述する 意外と重要なポイントとして、最後にまとめてIE8用の指定を記述すると反映されたりします。 順番を入れ替えたりするだけでも表示されなくなったりするので、それだけデリケートなものだという認識は必須です。
これって使えたっけ？今だからこそ IE8 対応コーディングのポイントをおさらい | バシャログ。
こんにちは。Latinです。 今年は長めの夏休みが取れそうなので、旅行でも行こうと画策しております。 さて今回は、久々にコーディングネタです。 弊社の最近の案件では、対象ブラウザがIE8+という案件がほとんどになってきました。 「安心してください。IE10以上です。」 なんて言われたら嬉しい限りなんですが、まだまだ少ないのが実状です。 「悪夢のIE7対応」を考えなくて良くなっただけでもコーディングはだいぶ楽になりましたが、「IE8」は「IE8」でいろんなクセを持ってますよね。 今回はそんな今だからこそ、「IE8対応のポイント」をまとめてみます。 【IE8の仕様編】 HTML5に対応していない HTML5のサイトで「IE8対応」が必要になってくる場合、ポピュラーな方法としては二つあります。 html5shiv.js などの拡張ライブラリを IE9 以下のIEで読み込ませる HTML5要素自体
display－スタイルシートリファレンス
displayプロパティは、ブロックレベル・インライン・テーブル・ルビ・フレックスコンテナ等の、要素の表示形式を指定する際に使用します。 ■初期値・適用対象・値の継承 インラインとブロック inline インラインボックスを生成する（初期値） block ブロックボックスを生成する list-item li要素のようにリスト内容が収められるブロックボックスと、リストマーカーのためのマーカーボックスを生成する run-in 文脈に応じてブロックまたはインラインボックスのいずれかを作成する inline-block インラインレベルのブロックコンテナを生成する。要素全体としてはインライン要素のような表示形式だが、内部はブロックボックスで高さ・横幅などを指定できる。 テーブル table table要素のような表示となる inline-table インラインレベルのテーブルとなる table-r
tr要素の「display : block;」にはまる
Internet Explorerでは、ボタンをクリックするたびに、2行目の表示／非表示が切り替わります。 しかし、Firefox等では表が乱れ、2行目の左端のセルに、2行目の内容がすべて詰められて表示されます。 また、Firefoxでは、2行目を再表示するたびに表が長くなっていくという現象も起こります。 ちなみに、表示／非表示の切り替えは、以下のようなJavaScriptで行っています。 function toggle_row_a(id) { var obj = document.getElementById(id); obj.style.display = (obj.style.display == 'none') ? 'block' : 'none'; return false; } 2.問題の原因 この現象は、Internet Explorerの不具合（または実装が不十分）ではない
【css】td,thをdisplay:block;したけれどIE9以下ではfloatが必要
tableを構築していて、スマートフォン用の表示に対応させようとするとセルの幅が狭くなって文字が読みにくくなってしまうのをdiplay:block;にする事で対応しています。 今回はレスポンシブで作成している時に同じくdisplay:block;をした際にIE9、IE8で効いていなかったので対策を調べてみました。 IE9以下でのtd,thをdisplay:block;するにはfloat:left;を付けると解決されました。 floatをかける事でブロック要素として認識されるようです。 IE以外でfloatがかかってしまうと不具合が出てきてしまいそうですので float:left\9;などとしてIE9以下にスタイルがあたるようにしました。
CSSだけで<select>をカスタマイズする - Qiita
Form系要素スタイルの初期化 ブラウザのForm系要素の初期スタイルをはがすときには、appearance: noneをあてつつ、backgroundやborderなどのリセットをする。 select { -moz-appearance: none; -webkit-appearance: none; appearance: none; border-radius: 0; border: 0; margin: 0; padding: 0; background: none transparent; vertical-align: middle; font-size: inherit; color: inherit; box-sizing: content-box; } しかし<select>だと、WebKit系のを除けば、-moz-apperanceとしているFirefoxでさえも、選択
AndroidやiPhoneのHTML,CSS,JavaScriptのバグまとめ
AndroidやiPhoneのHTML,CSS,JavaScriptのバグまとめ AndroidやiPhoneなどのスマートフォンではHTML,CSS,JavaScriptにバグが多くてコーディングが大変になります。そこでバグを紹介しているサイト、記事をまとめてみました。(中にはバグではなく仕様なものもあるかもしれません) iOS 8.4.1の:hover問題 iOS 8.4.1で:hoverを指定していると1タップでページ遷移できない問題 【STINGER5】AndroidのChromeで＆nbsp;が「・」になってる気がする | ビビビッ を に変更すると直るとのこと。 Mobile Safari 8でposition: fixedした擬似要素が完全に位置が固定されない - Weblog - Hail2u.net Mobile Safari 8でposition:
word-breakとword-wrapはややこしい
Updated 2015.01.13 / Published 2015.01.13 word-break:break-all;は一切の禁則処理を解除し、どの文字の間でも改行するため、単語の途中や括弧の直前・直後で折り返したり、句読点が行頭にきてしまうことなどがあることから折り返しの制御には好ましくないとされています。望ましい折り返しの制御をしてくれるword-wrap:break-word;(overflow-wrap:break-word;)の用法について紹介します。 折り返しを制御する2つのCSSプロパティ 幅の狭い領域で長い英単語や長いURLの途中で折り返しを制御できるCSSプロパティは、特にスマートフォンなどの小さなディスプレイサイズ向けへの対応を考慮してよく用いられるようになってきています。ただし、CSS3には折り返しを制御できるCSSプロパティが2つ存在し、とてもややこしいので
スタイルシート［CSS］/テーブル/セル内で自動改行させない - TAG index
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>文書のタイトル</title> <style type="text/css"> table { width: 250px; border: 2px #2b2b2b solid; } td { border: 2px #2b2b2b solid; } td.example { white-space: nowrap; } </style> </head> <body> <table> <tr> <td class="example">サンプルテキストサンプル</td> <td>サンプルテキストサンプル</td> </tr> </table> </b
HonestyWorks TechNote » メニューやタブをjavascriptでactiveにするちょっとしたアイディア
概要 WebアプリケーションやWebサイトを構築するときにヘッダーやサイドバー領域などにメニューやタブを（アコーディオンや短冊型など)配置するデザインが一般的かと思います。 このようなデザインでは現在表示されているページのメニューには class=”active” などと指定してフォーカスを当てるようになっていることが多いですね。 全てのページをべたで静的HTMLとして作る場合はいいですがメニューやサイドバーを共通部品としてSSIやサーバーサイドのテンプレートエンジンでインクルードしている場合はどうやってメニューにフォーカスを当てようか思案のしどころです。 このような場面で使えそうなアイディアを紹介します。 アイディア jqueryを使ってonload時にメニューにフォーカスを当てる(classを追加する)ようにします。 まず、メニューのフォーカスを当てたい要素には menu_ではじまるi
HTMLの定義リストのインデント幅を変える - Qiita
<dl> <dt>定義する用語</dt> <dd>用語に対する説明</dd> <dt>定義する用語</dt> <dd>用語に対する説明</dd> <dt>定義する用語</dt> <dd>用語に対する説明</dd> </dl> <dl class="example"> <dt>定義する用語</dt> <dd>用語に対する説明</dd> <dt>定義する用語</dt> <dd>用語に対する説明</dd> <dt>定義する用語</dt> <dd>用語に対する説明</dd> </dl>
レスポンシブでPC向け画像をスマートフォンに対応させるあれこれ
久しぶりにCSSのネタでも更新します。今回は画像をスマートフォンに対応させるテクニックをまとめました。 デモ まずはデモをご覧ください。 画像を画面幅に応じて縮小したり、画像を切り替えたりしてスマートフォンに対応させています。 Demo zipファイルをDownload HTML <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>画像をスマートフォンに対応させるあれこれ</title> <link rel="stylesheet" href="css/reset.css" > <link rel="stylesheet" href="css/style.css" > <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script
floatした画像にテキストが回り込まないようにする方法 | 経験知
※本ページはプロモーションが含まれています 作成:2015/01/08 画像にfloatを指定してテキストを回り込ませると、自動で画像の周りに回りこみとても便利なのですが、画像の下には回りこませたくない時があります。 tableタグやcss3でtable-cellを使う方法もありますが、tableは使いたくないし、table-cellはmarginが効かなかったり使い勝手が良くなかったので、floatで行う方法を紹介します。 画像の横に配置したいテキストをPタグなどで囲み、囲ったタグに「overflow:hidden;」を設定する。 HTML <div class="box"> <img src="img.jpg" /> <p> テキストテキストテキストテキストテキストテキストテキスト </p> </div> CSS .box img { float:left; } .box p{ ove
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Media Queriesの指定について - Qiita
コラム：class名とid名はどうやってつければいい？
SSSSLIDE
