タグ

2013年9月20日のブックマーク (3件)

  • 私がよく使っているWebサイト作成に役立つブックマークレット

    ユーザーがウェブブラウザのお気に入りなどに設置されたブックマークレットをクリックすると、ブックマークレットに記述されたJavaScriptの小さなプログラムが、ウェブブラウザで起動する。プログラムはページの外観や表示を変更したり、他の場所にジャンプしたり、子ウィンドウを表示したり、ウェブブラウザで表示中のウェブサイトのURLを取得したり、ユーザーに追加情報の入力を促したりする。 - Wikipediaより ということで、プログラムを起動するボタンとしてブックマークを使う感じです。では、私が普段から使っているお勧めブックマークレットを紹介します。 XRAY クリックした要素の内容を表示してくれます。topやleftなどの位置関係、width、height、margin、paddingなどのボックスに関することなどが一目で分かります。 ColrGrabr そのサイトにどのような色が使われている

    私がよく使っているWebサイト作成に役立つブックマークレット
  • WEBサイトの更新における改行位置について

    今日はWEBサイトにおけるテキストの改行位置について書きたいと思います。 サイト上には様々な文字がありますが、形式は二つに分かれます。 「画像文字」と「文字」です。 画像文字 画像文字とは、このサイト左上のロゴや、下の方にあるバナーなどに書かれている文字の事で、Photoshop等のソフトで作成します。 WEBサイトには画像を表示しているだけであり、文字情報ではありません。(※1) 画像文字はデザイン重視の場所で使われ、フォントやサイズ、改行位置などは自由にデザイン出来ます。 プレーンテキスト 画像文字以外の文字は「文字情報」であり、「プレーンテキスト」と呼ばれます。(※以下 「テキスト」とします) テキストは選択してコピー&ペースト出来るもので、音声ブラウザなら読み上げられます。(※2) WEBサイトの情報のメインになるものであり、今回はこのテキストのお話です。 自然改行と強制改行 WE

  • 画像最適化ツールImageOptim.app(Mac)の使い方

    ImageOptim.md ダウンロードしよう! ImageOptim — make websites and apps load faster (Mac app) まずはサイトから、ImageOptim.appをダウンロードしましょう。 使ってみよう! ImageOptim.appを起動させてみましょう。起動させると、そっけないウィンドウが表示されます。 このウィンドウに最適化させたい画像をドラッグ&ドロップさせます。 ウィンドウ左下の+ボタンからでもファイルを選択できます。 ドロップさせると自動的に最適化が実行されます。MacBookのファンが唸りだすかもしれませんが問題ありません。頑張っているのです。 ファイル名横の緑色のチェックマークがついたら最適化完了です。 まれに再実行すると、さらにファイルサイズ削減できるので試してみましょう。 何をしているの? ImageOptim.appは

    画像最適化ツールImageOptim.app(Mac)の使い方