タグ: HTML

よく忘れるPhotoshopを使ったマークアップ方法

よく忘れるPhotoshopを使ったマークアップ方法

スライスの作成方法

  1. 選択レイヤーを残したまま別レイヤーに統合(Cmd + Alt + E)
  2. レイヤーに名前をつける(log.png)など
  3. [ファイル]メニューの[生成] > [画像アセット] で画像下記出し( psdファイルと同じフォルダに出力) 個人的ショートカット割汗(Cmd+Shift+Ctrl+E)

画像の幅を調べる

  1. 選択して Cmd + T (自由変形) をすると、情報パネルにwidthが出る。

距離を測る

  1. 方法1、選択して Shift + 矢印キーで10px及び、矢印キー 1pxを測る
  2. 方法2 物差しツール Shift + i でツールを変更してなぞる。
  3. 方法3 方法2の応用 ガイドを引いて物差しで測る

IE10,IE9でjQeuryでページスクロールできなかった

IE10,IE9でjQeuryでページスクロールできなかった

よくアルやつ、ページの下までいってボタンを押すとスクロールしたりするタイプのスクリプトで通常はなんともないのですが、なぜかIE10以下でできないことがありました。(今更IE10とかなのですが、世の中の大企業では更新がやたら遅い仕様があり。。)

以下の通りの実装でしたが、aタグにイベントを紐付けていたらエラー、外包しているdivにイベントつけるとOKでした。謎でした。

# html部分
<div id="pagetop">
    <a data-role="pagetop" href="#"><img src="/journey/img/icon_pagetop.png" alt="pagetop"></a>
</div>
# script部分 NG
$('[data-role=pagetop]').on('click',function(e){
    e.preventDefault();
    $('html,body').animate({scrollTop:0},1000);
});
# script部分 OK
$('#pagetop').on('click',function(e){
    e.preventDefault();
    $('html,body').animate({scrollTop:0},1000);
});

Webフォントを簡単につかえる[Google Web Fonts]

GoogleWebFonts
フォントを選んで、コードをコピーして使えます。
簡単です。

Powered by WordPress & Theme by Anders Norén