タグ

2013年1月27日のブックマーク (6件)

  • [色]デザイナーっぽくカラーコードの16進数を覚えたくないですか?

    #000000は黒、#ffffffは白。 webデザインではHTMLCSSにおける色の指定の仕方としてこのような16進数による表記を主に用いています。 色指定には他にも 16進数指定(三ケタ) #f00 10進数指定 rgb(255, 0, 0) %指定 rgb(100%, 0%, 0%) 色名指定 red 全て赤の場合 といった指定の仕方があります。Photoshopに慣れ親しんだ方はもっと色指定の仕方に覚えがあると思いますが、今回はコーディングにおける色指定の観点で説明しますね。 デザイナーでさえカラーコードを見て即座に色を想像できなかったり(私が未熟なだけなのかもしれませんが><)、ましてや色を見てカラーコードをぴたりと当てるなんて芸当はさすがに難しいです。環境によって微妙に色が違って見えたり、隣接色や面積によってどうしても人間の知覚する色の見え方は変わってきますしね(色の錯視 –

    [色]デザイナーっぽくカラーコードの16進数を覚えたくないですか?
  • 【Sassを覚えよう!Vol.10】mixin とか色々活用してスマホ案件で楽をする

    気付けば、Vol.10! ずいぶん長編になってまいりました。 何気に、既に去年1年分のエントリー数を超えてるだなんて! 今年が頑張ってるのか去年がひどすぎたのかは、ボクには分かりません。 ・・・はい、後者です。 さてさて、Vol.4のSassの基的な記述方法で書いた「ミックスイン」に関して、もうちょい書いてみたいと思いますが、ミックスインは奥が深くてこれから触れる内容も、触り程度って感じだと思いますが、それでも、タイトルに有るように、スマホ案件なんかではかなり活躍しちゃいます! ミックスインついでに、@if 、@each 辺りもカンタンにですが触れていきます。 ここまで来ればだいぶSassを使いこなしてる様な気がしますよ!たぶん。 や、日初の Sass エヴァンジェリストである @kotarok さんみたいな超上級者な方々からしたら、鼻をほじほじしながら ( ´_ゝ`)フーン 程度なん

    【Sassを覚えよう!Vol.10】mixin とか色々活用してスマホ案件で楽をする
  • 【Sassを覚えよう!Vol.9】変数と演算で効率的に

    ちゃっかりデザインを変更しました。 デザイン以外にも、メインエリアの横幅が変わったりしてます。 かなり突貫工事なので、色々アレな部分があるかと思いますが、、、 さて、Vol.4のSassの基的な記述方法で書いた「変数」と「演算」に関して、もうちょい突っ込んだ部分を書いていこうかと思っちょります。 変数と演算のおさらい 軽くおさらいです。 次のように、変数は予め任意の名前で定義しておくことで任意の場所で呼び出すことが出来て、演算は足したり引いたり掛けたり割ったり出来ます。

    【Sassを覚えよう!Vol.9】変数と演算で効率的に
    haru135
    haru135 2013/01/27
  • CompassでCSSスプライト

    CompassでCSSスプライト Sassの拡張機能であるCompassを利用するとCSS Spriteが簡単に利用できるのでやり方をメモ書きレベルで書いておきます(SassもCompassも詳しくないのでおかしいところはツッコミを入れてください)。 まずはCompassで監視している画象ディレクトリ内(config.rbのimages_dirで設定しているディレクトリ)に任意のディレクトリを作成して、 CSSスプライトで利用する元画像を入れておきます。 今回は画象ディレクトリは「img」CSSスプライト用のディレクトリは「sprite」とし、元画像は以下の画象です。 a.png b.png c.png 次にscss内で@importでCSSスプライト用のディレクトリとファイルを指定します。 @import "sprite/*.png"; これをコンパイルするとimgディレクトリに「spr

    CompassでCSSスプライト
  • TwitterやFacebookでも手軽に共有できる軽量で、ユーザー登録も不要のオンラインファイルビューア・Dropdo

    「バグ直らない(´;ω;`)」→「ちょっと見せてみ」 のやりとりは普段からTwitterなどでもよく見か けるのですが、もっと手軽にコードを共有できない もんかと思っていたところ、なかなか良さそうな ツールがあったのでシェア。オンラインのファイル ビューアなんですが、動作も軽量でユーザー登録も 基的に不要なのが個人的に印象良かったです。 Githubとかjsdoitとか便利なコード共有サービスは沢山あるんですが、コードを見たいだけ、スニペットを渡したいだけ、という目的の時なんかは手軽で良さそうです。まぁでも似たようなサービス(コードだけならgist.githubでいいですしね)がありそうですけど、これは画像やPDFもOKみたいなので一つの選択肢として。 見せたいファイルをアップロードするか、Web上のパスを指定するだけ。 共有と言っても、Dropdoにフォーク等の機能はありません。アップ

    TwitterやFacebookでも手軽に共有できる軽量で、ユーザー登録も不要のオンラインファイルビューア・Dropdo
    haru135
    haru135 2013/01/27
  • 先日書いた「はてブ数」をテキスト表示するJavaScriptがカッチョ悪かったのでシンプルに書きなおしてみた。 – 和洋風KAI

    真・はてブ数をテキスト表示するJavaScript+HTMLコード。 表示例:Controlキーを使いこなせばMacの作業効率は恐ろしく上がる! 覚えるべき7つのショートカットキー | 和洋風◎ ブログに貼り付ける新着エントリーリストコード。 注意:headには上のと同様のJavaScriptCSSを貼りつけてください。 <$MTEntryTitle$> Chrome KeyConfig用にも作ってみた。 超個人的ですが、自分用にChrome KeyConfig用も作ってみました。 javascript:(function(){var ele=document.createElement('textarea');ele.style.width='100%';ele.value='関連:'+document.title+' ';document.body.insertBefore(ele,