ITエンジニア向け 情報館  
   

 

Web技術

HTML5のフォームの例

HTML5のフォームのサンプルがいくつか紹介されています。
今まで以上に、URLや色、値の選択をリッチなUIで選択できるようになるようです。
http://codezine.jp/article/detail/5652

ブラウザ機能の確認

Modernizrを使ってブラウザーの機能を調べるには
http://www.buildinsider.net/web/modernizr/01

CSS3の対応度合
http://caniuse.com/#search=css3

CSS関連

floatを解除する手法

floatの回り込み制御の解除について
http://kojika17.com/2013/06/clearfix-2013.html

CSSの読み込み速度を向上させる

CSSの読み込み速度向上策として、下記の3点が挙げられます。

  1. CSSをインライン化する
  2. セレクタを見直す
  3. HTTPリクエスト数を減らす

詳しく説明したサイトがありますので、ご紹介します。
http://www.aiship.jp/knowhow/archives/20531

個人的には「セレクタを見直す」という点を初めて知りました。
CSSのセレクタは、子孫セレクタ(記述右側のセレクタ)のほうから検索されるとのこと。私はてっきり親セレクタ(記述左側のセレクタ)から探しているものだと思っていました。
速度向上のためにも、今後意識していきたいところです。

CSSテキストシャドウのサンプル紹介サイト

http://kachibito.net/web-design/css3-text-shadow-sample.html
http://html5-css3.jp/useful/text-shadow.html
http://worpre-lab.com/design/text-shadow/
http://www.nxworld.net/tips/text-shadow-styling.html

IE 開発者ツール

JavaScriptのデバッグでブレークポイントがかからない場合

記述しているJavaScriptが構文エラーを起こしているときは、ブレークポイントがかからない(黄色の三角アイコンが出てその位置で停止できなくなる)
JavaScriptの構文エラーを直せば、ブレークポイントに処理をひっけることができるようになる。

画像のロスレス圧縮

参考サイト:http://www.aiship.jp/knowhow/archives/14615

画面サイズを確認できるサイト

レスポンシブウェブデザインで、パソコンやスマホ端末それぞれで、ブラウザ画面のHeightとWidthを把握したいときに、便利なサイトを見つけました。
http://www.shurey.com/js/samples/1_tips10.html

このページで、各端末での画面サイズを数値で把握することができます。
JavaScriptでのプロパティで、どのような値をとれるのかもまとめられていて便利です。

 

 



Copyright 2004-2017 kiyochan. All right reserved
本サイト内で使用している文章や画像などの無断転載を禁止します


kiyochan.jp トップページに戻る