身につけておきたいWebサイト高速化テクニック #4｜最適な画像書き出しの基本 | DevelopersIO
みなさんこんにちは、クラスメソッドWeb担当の野中です。 昨日行われたAdobe MAXの発表でFireworksの新機能開発が終了 *1だそうですね。びっくりです。 さて、前回の身につけておきたいWebサイト高速化テクニック #3｜画像形式の基礎知識では、画像の品質を保ちながらファイルサイズを抑えるためにそれぞれの画像形式の特性について紹介しました。 第3回でリクエスト数の削減について先に解説すると記載していますが、文章の構成を考えると画像の書き出しについて先に説明した方が流れとしてわかりやすいので順番を変更しています。 本題 今回はPhotoshopやIllustrator、Fireworksを使った最適な画像書き出しの基本的な手法について紹介したいと思います。 前回の記事で得た知識を前提に解説しますので、まだ前回の記事を読んでいない方は必ず読んでおいてください。 この記事の対象者 W
身につけておきたいWebサイト高速化テクニック #1｜アジェンダ編 | DevelopersIO
Webサイトの表示高速化対策していますか？ 日本は欧米諸国に比べWebサイトの表示高速化対策をしているサイトが少ないです。 特に、最近ではスマートフォンの普及によりモバイルサイトの需要も増え、高速化をしなければいけない機会も増えてるのかなと思います。 日本のモバイルデータ通信はLTEで高速になりつつあるとは言え、まだまだ「貧弱！貧弱ゥ！」です。 幸いなことに僕も最近鶴の一声によってクライアントからサーバー周りまで包括的な高速化対策を経験する機会を得ることができました。 それまでは、「手間がかかりすぎるからできればやりたくない」というのが本音でした。職務怠慢ですね（苦笑）。 でも、できるだけ楽したい！と思うのが人の常。 この連載ではできるだけ楽をしながらできる高速化手法と計測結果を1つ1つ紹介しようと思います。 基本的にはすべて受け売りの内容です。やってみた対策を羅列して、連載の中で自分で試
Media Queriesの記述を少し楽にしてくれるSCSS（Sass） Mixin（自作） | DevelopersIO
皆さんお久しぶりです。 最近サイトの高速化で忙しく、 ブログの執筆をサボっていました、ごめんなさい。 ブログのテンプレートリニューアルも無事に終わり、そろそろ得た知識をアウトプットしていこうと思います。 最近HTML（5）を利用したWebサイトもレスポンシブやCSS3、Retinaディスプレイ対応でどんどん複雑になってきています。ですが、未だ標準化されていないCSS3でさえ市場の要求に応えるには未熟に思えます。 そこで登場するのがSassやLESSなどのCSS拡張メタ言語です、キリッ（巷で知っている方にとっては今さら感たっぷり）。 今回は第一弾としてSass（SCSS）とCompassについて紹介しつつ、Media Queries（前に書いたMedia Queriesに関する記事）の実装を少し楽にしてくれる自作Mixinを紹介します。なぜSassにしたかは「Sass LESS 比較」と検索
文字列を省略して「…」を付与する方法 – CSS/jQuery | DevelopersIO
通常、設計・デザインの段階であらかじめ表示する文字数の上限を決めておき、PHPやRuby、Javaなどサーバサイドで表示する文字列を加工することが多いかと思います。 しかし、この方法だと動的に変化する領域を基準に表示する文字数を制限する場合や、文字サイズや表示領域のサイズに合わせて上限を算出する場合に限界があります。 そこで、クライアントサイドで表示領域から文字列がはみ出す場合、文字列を省略して省略記号「…」をつける方法を紹介してみたいと思います。 実現方法として以下の2つの方法があります。 text-overflowプロパティを使う jQueryで表示領域の幅・高さに合わせて文字列を加工する text-overflowプロパティを使う text-overflowプロパティを用いると、文字列が表示領域からはみ出してしまった場合、はみ出した文字列を省略記号「…」で省略することができます。 尚
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
