一休.comスマホサイトのパフォーマンス改善（CSS・その他細かいチューニング編） - 一休.com Developers Blog
こんにちは。 一休.comの開発基盤を担当しています、akasakasです。 今回は、一休.comスマートフォンホテルページリニューアルをリリースし、パフォーマンスが改善したお話をさせて頂きます。 概要編とJavaScriptパフォーマンス改善編はこちらになります。 user-first.ikyu.co.jp user-first.ikyu.co.jp この記事ではスマートフォンホテルページリニューアルで実施したCSS・その他細かいチューニングについてお話しします。 ここでお話しする内容 CSS再設計＆チューニング編 リニューアル前のスマートフォンホテルページのCSSの現状整理と抱えていた課題 リニューアルをするにあたり、CSS再設計 CSS Modules FLOCSS パフォーマンス インライン展開 非同期読み込み ドキュメント整備 その他細かいチューニング編 resource hin
株式会社ジェイクール【ホームページ更新代行・制作】
jQueryで作成するアコーディオンメニューやスライドショー、ギャラリーなどは、 部分的に非表示にし、マウスクリックやマウスオーバーで表示させる仕組みのものが大半です。 ページのレンダリング時に一瞬「非表示」が効かず全部が表示されてしまう、 といったことがあります。 ブラウザの性能や回線速度にも依存すると思いますが、 環境が悪い程表示されてしまう時間は長く、何とも残念な見た目になります。 ブラウザの読み込みルールに沿ってjavascriptを書き換えるなど対策は色々と考えられますが、 手っとり早いのは該当部分をCSSで非表示にしておき、javascript読み込み段階でフェードインさせる方法です。 【記入例：#mainimgをどうにかしたい場合】 ■CSSへの追記 #mainimg { display: none; } ■該当javascriptへの追記 $('#mainimg').fad
display－スタイルシートリファレンス
displayプロパティは、ブロックレベル・インライン・テーブル・ルビ・フレックスコンテナ等の、要素の表示形式を指定する際に使用します。 ■初期値・適用対象・値の継承 インラインとブロック inline インラインボックスを生成する（初期値） block ブロックボックスを生成する list-item li要素のようにリスト内容が収められるブロックボックスと、リストマーカーのためのマーカーボックスを生成する run-in 文脈に応じてブロックまたはインラインボックスのいずれかを作成する inline-block インラインレベルのブロックコンテナを生成する。要素全体としてはインライン要素のような表示形式だが、内部はブロックボックスで高さ・横幅などを指定できる。 テーブル table table要素のような表示となる inline-table インラインレベルのテーブルとなる table-r
もう泣かない！input type="file"のボタン部分をcssでデザインする方法 - Qiita
input type="file" を使って ファイルを選択する時のボタンがあるのですが これがなかなかうまくcssが利いてくれなくて困ってました。 ※しかも、ボタン部分だけでなく、ファイル名が表示される部分も残しつつです なんとか解決策が見つかりましたよー 肝はcssの::before 要素。 ::before 要素を使ってボタン部分をデザインしてください もう一つの肝はinput[type="file"]::-webkit-file-upload-button デフォルトの「ファイルを選択」ボタンの装飾を非表示になるようにcssで調整します デフォルトのボタンの上にデザインしたボタンを重ねるというイメージですね。 HTML <div class="file-upload_area"> <input type="file" id="csv-file" name="files" class
【CSS】見出しの横に「更新日」とか並べて表示したい時の簡単なCSSの書き方 | バシャログ。
上記の画像のように、見出しのタイトルに更新日などの情報を並べて表示する、というデザインがよくあります。 実現方法は色々ありますが、CSS でどのように実現するのが簡単でしょうか。 例えば、HTML は以下です。 <div id="press-release"> <h2>プレスリリース</h2> <p class="update">2009年03月09日更新</p> <!-- /#press-release --></div> 良く見かけるのは h2 と p をそれぞれ「position:absolute」で左と右に配置するもの、もしくは h2 を「float:left」、p を「float:right」にする方法です。 どちらを使うにせよサンプルの HTML のように h2 と p を div で囲う必要があり、CSS も長くなりがちです。 以下の方法が最も楽チンだったりします。 HTML
スマートフォンサイト制作時に覚えておきたいCSS 15
スマートフォンサイトを制作する際、個人的に覚えておいた方が良いと思うCSSのプロパティやテクニックをまとめてみました。 自分用の備忘録ではありますが、他のブログ等でも取り上げられていることが多いので、いずれも覚えておいて損はないものだと思います。 普段から制作している方にとっては目新しいのはないと思いますが、まだスマートフォンサイトを制作したことがない方やまだまだ苦手だなと思う方は参考にしてみてください。 UA切り替え・Viewport指定・拡大縮小の有無・電話番号リンクの無効化・ホーム画面用のアイコン指定など、スマートフォンサイトを制作する際に最低限覚えておくべきと思うことは他にも沢山あるんですが、今回はCSSに焦点を当てています。 また、タイトルでは「スマートフォンサイト制作時」としてはいますが、レスポンシブWebデザイン制作時でも頻繁に使うものだったり、PCサイト制作時でもCSS3に
【CSS】スタイルシートを使って画像（IMG）を中央揃えにする方法。 – 和洋風KAI
imgに埋め込んだclassを使って画像を中央揃えする方法。 imgタグに埋め込んだclassを使って中央揃えする場合は、こう書くと出来ます。 <img src="icon.jpg" class="appIconBig" /> .appIconBig{ display: block; margin-left: auto; margin-right: auto; } imgをブロック要素にしてからmargin指定を書くことで中央揃えに出来ます。（display:block;をmarginより先に書くのがコツ。） imgをdivで囲って画像を中央揃えする方法。 先ほどの方法を使いたくない場合は、imgをdivで囲ってdivにCSSを指定すると上手く中央揃えが可能です。 <div class="center"><img src="icon.jpg" /></div> .center{ text-
CSSでblock要素を上下左右中央寄せにする、イマドキの方法。 | バシャログ。
Backjoyを買ってみたらほんとに腰が楽なminamiです。 CSSで要素を上下中央寄せする方法は古くから色々と試されてきました。 今回は海外のサイトで知って目から鱗だった方法をご紹介します。 基本的な設定 上下左右中央寄せしたい要素に以下のCSSを設定します。 position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 任意の値 height: 任意の値 これだけ。これだけで親要素に対しての上下左右中央寄せを実現できます。 追記： 親要素にはposition: absolute;かposition: relative; を設定してください。body に対してセンター寄せしたい場合はそのままでOKです！ 今までtop とleft の値を50%にとって、要素の高さと幅の分だけマイナスのmarg
CSSでテキストにアンチエイリアスをかける - Qiita
.antialias { transform: rotate(0.028deg); -o-transform: rotate(0.028deg); -ms-transform: rotate(0.028deg); -moz-transform: rotate(0.028deg); -webkit-transform: rotate(0.028deg); } IE9以上のブラウザであれば、これでMacとほぼ同じレベルのアンチエイリアスがかかる。 よっぽどでかい要素だったりborderがついている要素でなければ傾きは全く気にならないレベル Google Chromeだと若干細めに文字がレンダリングされるから細字のフォントには注意。 追記（2015/10/16） antialiasのclassをつけた要素の中に画像が入ると若干荒くなる 対策としては画像だけ角度を戻せばOK .antialias
スタイルシート［CSS］/テキスト・フォント/長い英単語の折り返しを指定する - TAG index
normal を指定した場合は、収まり切らない単語は領域をはみ出して表示されます。 このプロパティは、CSS 2では定義されていません。 使用例 <!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"> p { width: 200px; border: 1px #808080 solid; } p.example1 { word-wrap: normal; } p.example2 { word-wrap: break-word; } </style> </head> <body> <p class="example1">
レスポンシブCSSで使うブレイクポイントの決め方 [ホームページ作成] All About
レスポンシブCSSで使うブレイクポイントの決め方レスポンシブWebデザインでCSSを書く際のブレイクポイントを、2018年版アクセス解析結果の画面サイズシェアから考える方法を解説。スマホは375px、タブレットは768pxの横幅が最も多いとはいえ、375と768をブレイクポイントにすれば良いわけではありません。さらに、モバイル端末とPCとの境界は1024～1280pxのどこに設定すれば良いのかなど、ブレイクポイントの決め方をご紹介。 ブレイクポイントの基本と決め方 (スマホ・PC) レスポンシブWebデザインでCSSを書く際のブレイクポイントについて、その基礎知識とブレイクポイントとして採用する横幅サイズの決め方をまとめてご紹介いたします。 今回は、2018年版の日本国内での画面サイズシェアを元にして、モバイル環境向けブレイクポイント(スマートフォンとタブレットとの境界)の考え方と、PC環
![レスポンシブCSSで使うブレイクポイントの決め方 [ホームページ作成] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/9b62dfbd9156b8509fe09652f1a69928b9daddb6/height=288;version=1;width=512/https%3A%2F%2Fimgcp.aacdn.jp%2Fimg-a%2F1200%2F900%2Faa%2Fgm%2Farticle%2F4%2F5%2F4%2F4%2F9%2F3%2Ftopimg_original.jpg)
<a href="tel:***">リンクをスマートフォン端末以外では無効にする - Qiita
非常に利便性の高い実装ですが、レスポンシブWebデザインでサイト制作をする場合には、PC端末等での閲覧・操作時に予期しない挙動となる場合があります。 "tel:" リンクを【スマートフォン端末以外では無効】にする方法はいくつかありますが、 「カスタムデータ属性の追加」といったHTML側の調整が必要ない 余計なDOMの書き換えが発生しない という条件では以下のシンプルな実装が考えられます。（jQuery使用） var ua = navigator.userAgent.toLowerCase(); var isMobile = /iphone/.test(ua)||/android(.+)?mobile/.test(ua); if (!isMobile) { $('a[href^="tel:"]').on('click', function(e) { e.preventDefault(); }
[JS]レスポンシブ対応の使いやすいスライダーを探している人にオススメのスクリプト -wallop
アニメーションは他にも、slide, fade, rotateなどが利用できます。 wallopの使い方 Step 1: 外部ファイル 当スタイルシートとスクリプトを外部ファイルとして記述します。 <head> <link rel="stylesheet" href="path/to/wallop.css"> </head> <body> ... コンテンツ ... <script src="path/to/Wallop.min.js"></script> </body> アニメーション（scale, foldなど）を利用する時は、アニメーション用のCSSを加えます。 <head> <link rel="stylesheet" href="path/to/wallop.css"> <link rel="stylesheet" href="path/to/wallop-animation.c
![[JS]レスポンシブ対応の使いやすいスライダーを探している人にオススメのスクリプト -wallop](https://cdn-ak-scissors.b.st-hatena.com/image/square/c55fb72cc692f14ab3307eef2042769543abed0d/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015090103.png)
ページの左右の余白（枠外）に色を付ける方法 - OKWAVE
いわゆる外部スタイルシートを使います。 そこで、 body{background-color:#eee8aa;} でよいです。ただし標準では隙間が開くことがあるので html,body{padding:0;margin:0;background-color:#eee8aa;} としておきます。 通常は背景画像や、font-family,line-height,colorなど、継承されるプロパティも一緒に固定スタイルシート(永続スタイルシート)書いておきます。 ★HTMLはきちんと文書構造にしたがってマークアップして、デザインのためにclass名をつけたりIDをつけることは間違いです。 タグスープになっちゃいます。典型的な悪い例が<div class=wrap">のように意味のない(非セマンティックな)マークアップです。(これは某オーサリングツール由来のものです。)HTML4.01が登場して
スタイルシート/idの入れ子でid？
以下のようなCSSがあったとして、上の「#cHead」はうまくいったのですが、その後の応用がわかりません。たとえば、最後の「#cWeek」などは、反映されず、「#cHead」のテキスト位置とフォントサイズ、太さなどが反映されてしまいます。 html部分では、「#cWeek」はdivで「#cHead」でに囲まれています。 #cHeadの中に別のスタイルシートを設定するにはどうしたらよろしいでしょうか？ #cHead {width:outo; text-align: center; font-size: 10pt; font-weight: bold; background: #FFFFFF url(/img/bg.gif) repeat-x top; border: 1px solid #C4DCFA;} #cWeek {font:#ff0000;} --------------------
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
div内で下揃え - CSSブログ～ホームページ制作会社 gravity works（グラビティ・ワークス）のCSSについての知識と備忘録
bitbucketの使い方
「SEO×SNS×ブログ」で作る最効率化収益システム｜うきだいらブログβ
https://qiita.com/nyarla/items/10f0f3e3c2116417df59
GitHub - mmurph211/Grid: HTML-based table with fixed headers, fixed footers, fixed left columns, row selection, sorting and more.
