タグ

tipsに関するshiko-tamaのブックマーク (119)

  • Mozilla Re-Mix: 効果歴然!Firefoxのメモリ使用法を変更して軽快に動作させる方法。

    Firefoxは多機能である上に、拡張機能を多数インストールするなどで、日に日にヘビーなブラウジング環境になりがちです。 海外のブログでは、様々なFirefoxの動作軽量化や速度向上についてのTip'sが多く書かれていますが、あてにならないもの、それはちょっと怖いな・・というカスタムも多いのでうかつには手を出せません。 一応ユーザーとして一通り試していますが、その中でも簡単で安全と思われ、効果を体感できたメモリマネジメント方法をご紹介します。 ご存じのように、Firefoxを利用してブラウジングしている際のメモリ使用量というのはかなりのサイズで、他のアプリケーションやWindowsの動作にも少なからず悪影響を及ぼしている場合があります。 下記の2点の設定は、Firefoxのメモリ使用方法を少しカスタムするだけで体感できるほど軽快に動作させることができるTip'sです。 ■メモリーキャッシュ

  • とっても使えるoverflowプロパティ。その使い方色々。

    光の4戦士を買ったんすが、売り文句通りレトロな感じがしていいですね。 まぁまだ2, 3時間程度しかやってないんで、これからどうなるか分かりませんが時間を見つけてやって行こうかと。 さて、以前からoverflowプロパティは使い勝手が良いというか、使う場面が多いプロパティの一つですが、考えてみると色んな事に使ってるなぁ~と思ったので自分が良く使うのをまとめてみました。 あんまoverflowプロパティを使った事が無い方は、ビックリですよ! これで、ソコの可愛いアナタもoverflowプロパティの虜になる事間違い無し!!(わかんないけど サンプルとかは以下よりどうぞ。 サンプルサイトを見る サンプルをダウンロード 基的に、全てoverflow: hidden; の指定を足す事で解決したり実現出来る感じです。 01 clearfixみたいに使う まずは以前の「clearfixを使わないでやるに

    とっても使えるoverflowプロパティ。その使い方色々。
  • Photoshopでの作業をより早くより簡単にする20のTips

    Photoshopでの作業を今までより早く、そしてより簡単にする20のTipsをSpoonGraphicsから紹介します。 20 Handy Photoshop Tips For a Faster Workflow デザイナーの人には常識的なものだと思いますが、実用的で多用するものが多く紹介されています。 ※コマンドはWin XP+Photoshop CS4のものです。 Macの場合は、下記置き換えてください。 Ctrl = Cmd Alt = Opt 作業ファイル上で、[space] 使用してるツールを手のひらツールに変更し、画像を移動させることができます。 [編集]-[環境設定]-[テキスト]の「フォントプレビューのサイズ」 サイズを「特大」にすると、フォント選びが楽になります。 「文字パレット」のサイズにフォーカスをあてて[矢印] 上下の矢印キーでフォントサイズを増減することができま

  • IE 6で泣かないための、9つのCSSハック (1/3) - @IT

    有限会社タグパンダ 喜安 亮介 2009/10/8 Webブラウザごとのレンダリングエンジンの違いにより起こるレイアウトの表示ずれ問題に泣かされるWebデザイナのために、Webブラウザごとに使えるかどうかの表を交えながら問題を解決するためのCSSハック&フィルタTipsをお届けします(編集部) 最も多く使われているのに……、いや、だからこそ 多くのWebデザイナの悩みの1つは、レイアウトの表示ずれ問題だと思います。これは、各Webブラウザが採用しているレンダリングエンジンの違いから起因している場合が多いです。その中でも、最もWebデザイナ泣かせのWebブラウザなのは、マイクロソフトが開発しているIE(Internet Explore)のバージョン6です。 IE 6は、発売開始当初のWindows XPにデフォルトでインストールされていたWebブラウザということもあり、世の中の多くのユーザー

  • 単調なウェブサイトのデザインに手を加えてクオリティをアップするチュートリアル

    ウェブサイトのデザインに、ビジュアルエレメントを追加したり、細部をブラッシュアップしたりしてクオリティをアップするPhotoshopのチュートリアルをPsdtuts+から紹介します。

  • 実用的なユーザビリティの10のポイント:ガイドライン編 | コリス

    ユーザーにあなたのウェブページを容易で、そして楽しくアクセスできるようにする実用的なユーザビリティの10のポイント(ガイドライン編)をSmashing Magazineから紹介します。 Tumblr 多くのフォームは2カラムのレイアウトを採用し、ラベルはフィールドの左に配置されています。一見よさそうに思えますが、これは採用すべきではありません。 なぜなら、フォームは一般に垂直に方向付けがされているためです。ユーザーが左→右→左下と視線を動かすことより、上→下と移動する方が容易です。 また、ラベルを左に配置することはもう一つの問題があります。 あなたはラベルを右揃えと左揃えのどちらで配置しますか? 左揃えはラベルを読みやすくしますが、どのフィールドのラベルか判断するのが難しい場合があります。 右揃えはその逆です。フィールドのラベルを判断するのは容易ですが、ラベルを俯瞰するのが困難です。 2.

  • RedLine Magazine : ボックス全体をリンクにしたい

    ボックス全体をリンクにしたい まずはこちらの発想の元ネタのサイトの紹介。 Link Boxes (Ask the CSS Guy) やりたいことは上記ページの上部の画像のように、見出しやテキストを置いている部分をリンクボックス化したいという主旨。マークアップや正しい書式にこだわらないなら簡単にできるのだが、ちゃんとした事をしたい人向けのTips。 ※以下のソースは上記サイトからの引用です。 上記サイトの言いたい事を簡単な日語にして主旨だけ書きます。 ※訳とかまとめ要らないという方はその先に「それ、jQueryでやってみる」とか書いてみたので良かったらそちらへ進んでください。 まず中身はこんな感じ。見出しとテキスト。 <h2>About Us</h2> <p>How my life story became a Hallmark movie.</p> これらをボックスにしてリンクを付けたけ

  • inputlog - Google AJAX APIを使ってjQueryを読み込む

    Google AJAX APIを使うとjQueryをgoogleからダウンロードできます。これを使うと自分でサーバーに配置する場合に比べて以下のようなメリットがあります。 バージョン指定を最後までしないことで最新版を利用できる gzipによる圧縮を自動で行ってくれる(jquery.minだと54.5 KB->16 KBへ) 普及すればネット全体でjQueryをキャッシュできる デメリットとしては以下のような感じでしょうか。 インターネットにつながっていないとライブラリが利用できない(ローカルでの確認時の問題) googleのサーバーが落ちたら困る(ほぼないと思いますが。。) 使い方はhtmlで読み込んでいるscript要素を以下のように書き換えるだけです。 <script type="text/javascript" src="js/jquery-1.2.6.min.js"></scrip

  • [CSS]大きい画像をブラウザのサイズに合わせて背景に表示するスタイルシート

    CSS-Tricksから、大きい画像を余白を作らずにブラウザのサイズに合わせて、背景に表示するスタイルシートを紹介します。 Perfect Full Page Background Image 下記、それを実装する要件とテクニックを二つ、それぞれポイントをピックアップして紹介します。 実装の要件 前提として、画像のサイズを調整する必要があるため、background-imageプロパティでの配置は不適格とします。 それを踏まえ、以下の条件をクリアさせます。 ページは画像でいっぱいに、余白は無しで 画像の大きさは自動調整 画像の比率は維持 画像はページ中央に 画像はスクロールさせない クロスブラウザ対応 一つ目のテクニックは余分なマークアップが必要で、IE6用にJavaScriptを使用したものを紹介しています。 二つ目のテクニックは、余分なマークアップを無くし、JavaScriptも必要と

  • ウェブデザインの幅をひろげる20のキーワード | コリス

    20 Vital Techniques & Best Practices For Effective Web Design 下記、各エッセンスの簡単な説明とワンポイントとサイトの紹介です。noupeのサイトでは他にも多くのサイトが紹介されています。 1. ビビッド カラー 2. グラデーションとライトのエフェクト 3. 透過 4. グランジ 5. 手書き風のデザイン 6. 押さえた色味 7. 水彩画のエフェクト 8. ネイチャー系のエレメント 9. 写実的でリアルな背景 10. 特大のタイポグラフィ 11. デコラティブなタイポグラフィ 12. 大胆な背景 13. レトロやヴィンテージのエレメント 14. アイキャッチなヘッダ 15. コラージュしたエレメント 16. テクスチャを使った背景 17. タブ型のナビゲーション 18. ブラックとホワイト 19. 水平方向のスクロール 20.

  • Forgot the Milk. - Firefox のメニューバー・ツールバーを徹底的にカスタマイズする方法

    ネタ元は Lifehack.org の「One Firefox Toolbar to Rule Them All」という記事です。 Firefox のメニューバー、ツールバー、ブックマークツールバーをカスタマイズし、各領域を可能な限りコンパクトにする方法を紹介します。 ツールバーをカスタマイズする ツールバー領域の右クリックメニュー「カスタマイズ」より「ツールバーのカスタマイズ画面」を表示してください。ドラッグ&ドロップ操作でアイテムを追加・削除することができます。(不要なアイテムは、カスタマイズ画面にドロップすることで削除できます) ロケーションバーでスマートキーワード検索ができるので、検索バーも不要かもしれません。 メニューをアイコンに閉じ込めてコンパクトに メニューをアイコン1つに閉じ込めるために、Custom Buttons 拡張を利用します。Custom Buttons は、スク

  • バージョンアップして格段に使える様になったFileZilla - EC studio 技術ブログ

    Web開発にはかかせないFTPソフト、みなさんは何を使ってますか? FFFTP、NextFTP、SmartFTPなどのメジャーどころを 使ってる方が多いでしょうか。 私も以前はそれらのソフト他、数十種類のソフトを 試しては辞め、試しては辞めして、結局いままで 満足のいくソフトに巡り会えませんでした。 ですが、先日FileZillaのバージョンアップがあり、 ついに私が望む機能がほぼ満たされたソフトになりました。 私がFTPソフトに望む機能は下記です。 FTPソフトに望む機能 1.SFTPに対応していること (秘密鍵ファイルにも対応) 個人で使うならともかく、ビジネス用途であれば SFTP,FTPS,SCPなど暗号化通信は必須です。 日製のFTPソフトはココが弱いですね・・ 2.ブックマーク機能があること ローカル側、サーバー側両方のパスを ブックマークして瞬時に開く機能です。 頻繁にフォ

  • Firefoxでの動画サイトのイライラを解消する方法 | ライフハッカー・ジャパン

    Lifehacker読者のBernard Sandbergさんによると、YouTubeなどの動画サイトで10秒ごとに動画がフリーズするのは、Firefox2.0以降に搭載されているセッション復元機能が原因だとか。Firefoxのデフォルト値では開いているタブを10秒ごとに保存する設定になっているそうで、多くのタブを一度に開いているとより動画が固まりやすいそうです。 では、これを解消するためにはどうすればよいのでしょう? 答えはシンプル。セッション復元のための保存のインターバルを長くすること。具体的な方法としては、アドレスバーで「about:config」と入力しEnterキーを押すと、フィルターボックスが表示されますので、さらにフィルターボックスに「browser.sessionstore.interval」と入力しましょう。すると「10000("10秒に保存する"の意)」が表示されるは

    Firefoxでの動画サイトのイライラを解消する方法 | ライフハッカー・ジャパン
  • Photoshopでカラー写真の一部を白黒にする方法 / ウェブデザインライブラリー

    投稿日:2009年08月25日   レベル:初心者    ソフトウェア: このチュートリアルでは、Photoshopでカラー写真の一部を白黒にしてみたいと思います。 Step1 : はじめに Step2 : 写真を白黒にする Step3 : カラーの部分を調節をする Step4 : 完成

    Photoshopでカラー写真の一部を白黒にする方法 / ウェブデザインライブラリー
  • テンプレート設定方法 - WordPressテンプレートのdecoweb

    ダウンロードしたデータは解凍できたかな? ここではダウンロードしたテンプレートをFTPソフトでアップロードし、WordPress管理画面から設定する方法を教えます。 (※WordPressインストールに関しては公式サイトより行ってください) FTPソフトには『Auto FTP』『FTP Exchange 』『NextFTP4 』など様々なソフトがありますが、ここでは無料でダウンロードできる『FFFTP』を使用します。 Step1 解凍してできたフォルダの中身を確認しておきましょう。 フォルダを開くと中に以下のようなファイルが入ってるよ。 確認したらWordPressのローカルフォルダに解凍したフォルダをいれるよ。 ローカルフォルダを開いて、『wp-content』フォルダの中の『themes』をクリック。 『themes』の中に、解凍したフォルダを全部そのまま入れてね。 (※解凍してできた

  • おさんぽブログ

  • 過去のSEOテクニック | パシのSEOブログ

    効果があると言われていたSEOのうち既に過去のものになっている対策方法や、気にするほどでもないくらい与える影響が小さくなっている手法を取り上げて見ます。 検索エンジンは多くの情報を公開していませんので、これから取り上げる項目が当にSEOスコアに影響がないのかはわかりません。複数のサイトで実証された事であっても全てのサイトで同じ結果になるとは限りません。 SEOには100%正しい答えがないわけですから、誰がなんと言おうとオレはこう考えるというのもアリだと思います。 metaタグ metaタグによるSEOと言えば主にKeywordsやDescriptionを指しますが、 この2つをSEO目的でのみ記述することはおススメしません。Keywordsは無くても良いくらいですし、そのページのターゲットキーワードを1、2個書けば十分です。Descriptionにはそのページの概要文を端的に記述します。

  • JPEG、GIF、PNG画像選択の指針まとめ | エンタープライズ | マイコミジャーナル

    SitePoint: New Articles, Fresh Thinking for Web Developers and Designers Jennifer Farley氏がSitePointにおいてGIF, PNG, JPG. Which One To Use?のタイトルのもと、Webサイトを作成するにあたってどの画像フォーマットを採用すべきかという指針を簡単にまとめている。まず氏はそれぞれの画像フォーマットの特徴を簡単に説明。 GIF - 256色のインデックス画像。写真には向かないが、ロゴであったりフラットブロックな画像には向いている。透過データを保持できるという特徴がある JPEG - クオリティによって圧縮率が変わる非可逆圧縮の画像フォーマット。透過は表現できないが、写真データの用途に向いている PNG - GIFに似ているが、GIFのようなぎざぎざを出さずに背景透過を実現

  • ブラックベースの暗いウェブデザインで気をつけたいポイント

    ブラックベースの暗いデザインのウェブサイトを制作する際に、取り入れたいポイントや注意すべきポイントをWeb Designer Depotから紹介します。 The Do's and Don'ts of Dark Web Design 下記は、その意訳です。 はじめに 1. ホワイトスペースの活用 2. テキストのホワイトスペース 3. テキストのコントラスト 4. フォントの取り扱い 5. カラースキームは最小に 6. スタイルスイッチャー 7. 暗いデザインがはまるサイトとは 8. エレガントな暗いデザイン 9. クリエイティブな暗いデザイン 終わりに はじめに ブラックベースのウェブデザインは人気が高く、エレガントでクリエイティブな魅力があります。しかし全てのウェブサイトに適したものという訳ではなく、適切であるときだけ使用されるべきデザインです。 ブラックベースのデザインを使用すると印象

  • CSSの実装状況で変わるボックスのデザイン方法

    Web制作において、対応しなくてはいけないブラウザの中には、未だしぶとくIE6が残っています。IE6が2001年に登場したことを考えると、もう8年もその時代の「縛り」を(健気に)守りながら作っていることになるんですね。 いま良く使われているCSSのテクニックも、ほとんどはこの「縛り」の範囲内で有効な手法なわけですから、突然2001年にタイムスリップしてサイトを作る事になったとしても、今も昔も変わらない1つの古文書に従えばいいので、きっと活躍できます。 しかしたまらん、流石に疲れた。 ボックスひとつができること CSSでは、文書を構成する各要素は、ボックスという矩形領域に置きかえられ、それらの持つプロパティを操作して装飾します。つまり、ボックスはページデザインを構成する最小単位と言えるわけですね。 そこで今回は、最小単位となる1つのボックスに対して、どのような装飾手法が有効かという点を、CS