タグ

ブックマーク / webdrawer.net (3)

  • PhotoshopからレイヤーのCSSをコピーする

    Photoshopのデザインからコーディングをするとき、CSSについては今までエクステンションのCSS3Psというのを使っていたのですが、 最近動かなくなったようなので代替をさがしたお話です。 今まで使っていたCSS3Ps レイヤーを選択して、エクステンションのCSS3Psのウィンドウを押すだけで、CSSを吐き出してくれていたのですがサイトが無くなったのか表示されなくなりました。 CSS3Ps いつもこれでCSSをコピーしていたので困りました。 既存の機能であったCSSをコピー それで他にCSSを吐き出してくれるエクステンションはないかと調べたのですが、既存の機能でありました。 Windows:レイヤーを右クリック→CSSをコピー 知らなかった! コピーすると以下のようにペーストできるようになります。 .角丸長方形_1 { border-radius: 5px; background-co

    PhotoshopからレイヤーのCSSをコピーする
    teruringo
    teruringo 2018/04/09
  • あなたがコーディング初心者を脱する方法

    比較的経験の浅めの人のHTMLCSSコーディングを見ることが増えたのですが、その際にこうしたほうが良いかなーと思う箇所が共通してたりするので、まとめてみました。 ただ以下にあげる例は、状況によっては使わないといけなかったりするので絶対ではありません。そう絶対ではありません。 floatを覆っている要素の高さをだす 要素をfloatすると、それを覆っている要素の高さがなくなります。その高さをだす場合は以下のような方法をとります。 親要素にoverflow: hidden;を指定する 親要素にclearFixを使う 強引にheightで高さをだしている場合をよく見るのですが、その方法だと中の要素が変わるたびに指定をしなおさないといけなくなりますので、height以外の方法をとるのがオススメです。 floatを解除する方法のまとめ: 小粋空間 floatはclearする 先ほどのclearFi

    あなたがコーディング初心者を脱する方法
    teruringo
    teruringo 2013/06/18
  • パララックスサイトの作り方の初歩

    最近パララックス(視差効果)を取り入れたサイトが増えてきました。 仕組みや簡単なものを作れるようにしておきたかったのでいろいろ試してみました。 ちなみにもっと効率良く作れる方法とかもあるかもしれませんので、一例ということで御覧ください。プラグインはまだ試したことがないので そちらを使ったほうが楽かもしれません。 パララックス効果のjQueryプラグインまとめ あと動作はこの記事時点でのFirefoxの最新版でしか確認はしていません。 スクロール量を取得する まずはスクロールすると動くので、スクロール量を取得します。ちなみにjQueryを使ってます。 $(function(){ $(window).scroll(function(){ var y = $(this).scrollTop(); $("#num").text("スクロール量:" + y);//表示用 }); }); サンプルペー

    パララックスサイトの作り方の初歩
  • 1