タグ

2015年7月23日のブックマーク (6件)

  • IE対応済み!今すぐコピペして使えるHTML5テンプレート

    HTML5が流行り始めて結構経ちました。 個人的にもHTML5でサイト制作したいなーと思っていたので まずはHTML5のテンプレートを用意しました。 最近のサイト制作ではjQueryを使うことが多いようなので jQueryも対応しています(ハイライト部分) <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title></title> <meta name="author" content=""> <meta name="description" content=""> <meta name="viewport" content="width=device-width"> <link re

  • これがスマートフォン向けサイトを作るときの viewport 設定3パターンだ

    スマートフォン向けの Web サイトを作るとき、viewport の設定次第で使い勝手が大幅に変わる。 最近はレスポンシブ Web デザインが流行してるけども、その大前提として viewport の設定パターンを抑えておくのは重要だろう。 この記事では、viewport の設定によって、見た目・使い勝手がどう変わるかを解説する。 パターン1: 何も考えずに HTML を書く まずは、viewport を指定せずに、単純な HTML をスマートフォンで表示してみる。 <!DOCTYPE html> <head> <meta charset="utf-8"> </head> <body> <img src="/images/logo-ja.png"> <p>色んな素材がごった煮になった様子をお椀で表現しています。 湯気が<strong>「てっく」</strong>に見えるのが隠し味になっていま

    これがスマートフォン向けサイトを作るときの viewport 設定3パターンだ
  • X-UA-Compatible の利用方法

    How to Use X-UA-Compatible https://www.modern.ie/en-us/performance/how-to-use-x-ua-compatible 一つ前の投稿で、次期 Internet Explorer では X-UA-Compatible によるドキュメント モードのの指定が無効になることを紹介しましたが、mdern.IE のコンテンツでその X-UA-Compatible の利用方法についての記事がありましたので、私訳して紹介しておきます。 Internet Explorer では X-UA-Compatible META タグまたは HTTP ヘッダーを利用して、どのバージョンの描画エンジンでページをレンダリングするかを指定できます。特定のバージョンを指定することも、’IE=edge’ という値を指定して最新のバージョンを指定することもできま

    X-UA-Compatible の利用方法
  • [CSS]ビューポート(vw, vh)とパーセント(%)、レスポンシブに適した単位の賢い使い分け方法

    先日の記事「フォントサイズの指定方法(翻訳版)」で、CSSの比較的新しい単位「ビューポートの単位(Viewport Units)」について触れました。この単位「vw, vh, vmin, vmax」はブラウザのビューポートのサイズに基づくもので、これらの単位で指定した実際の大きさはビューポートの大きさによって変化するため、レスポンシブデザインにあった単位と言えるでしょう。 これらの単位を使うことは「フォントサイズの指定方法」でフォントサイズに使うことを反対しましたが、レイアウトでは非常に役立つ単位です。 Viewport vs. Percentage Units 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 ビューポートの単位(Viewport Units)とは 要素を幅いっぱいに指定 (% > vw) 要素を高さいっぱいに指定 (

    [CSS]ビューポート(vw, vh)とパーセント(%)、レスポンシブに適した単位の賢い使い分け方法
  • Web用保存は古い!? JPEG画質が改善したPhotoshop CC 2015の新方式の画像保存機能まとめ – ICS MEDIA

    みなさんはAdobe Photoshopでどのように画像を書き出してますか? 最新のPhotoshopではさまざまな画像書き出し機能が搭載されていますが、どれを選択するかで手間が異なります。 記事ではPhotoshopのさまざまな画像書き出し機能を紹介し、最適な画像書き出し方法を検証します。 この記事はPhotoshop CC 2022 (23.5.0)で検証しています。 この記事のポイント 新しい画像保存方式(書き出し形式、クイック書き出し)は手間が少ないので、作業効率が良い 新しい画像保存方式はデフォルト設定で、小さなファイルサイズの結果を得られやすい アニメーションGIF保存は「Web用に書き出し(従来)」を使う Photoshopの画像書き出し方法一覧 Photoshop CCにおいて、画像を書き出す方法は分けて5種類あります。 書き出し形式 [ファイル]→[書き出し]→[書き出

    Web用保存は古い!? JPEG画質が改善したPhotoshop CC 2015の新方式の画像保存機能まとめ – ICS MEDIA
  • jQueryTween - Lightest Tweening Engine for jQuery

    jQueryTween - Lightest Tweening Engine for jQuery jQueryTween Welcome to jQueryTween - Lightest Tweening Engine for jQuery jQueryTween!! The Lightest Tweening Engine for jQuery This plugin is a bridge to tween.js and aims to drastically simplify your work. Each script does what it does best, for high performance hardware accelerated animations. Github Tween.js My Work Demo Developer Friendly Using