タグ

ブックマーク / coliss.com (15)

  • Sublime Text 2, 3の使いやすいテーマのまとめ

    Sublime Text 2や3で利用できるシンプルで見やすく、使いやすいテーマを紹介します。 使い慣れたテーマももちろんいいですが、新しいテーマにすると気分も一新され、やる気がアップしますよね。 テーマファイルをSublime Textにインストールする方法は、一番下に。 Spacegray Ocean Dark(キャプチャ), Ocean Light, Eighties Dark の3種類。シンプル好きな方は一度お試しを。 僕は只今、「Ocean Light」を使用中〜♪

  • 最も美しいUIを備えたOS X用のメモリ解放アプリが今週だけ無料ですよ -Memory Magic+他4種

    僕も常時使用しているOS X用のメモリ解放アプリ「Memory Magic」が一週間だけ無料です、「Memory Magic」の他にも4種類ほどご紹介。 メモリ解放アプリは数多くありますが、このアプリのUIが一番美しいと思います。そして美しいだけでなく、実用的! Memory Magic -App Store ツールバーに小さいアイコンが表示されるだけって、いいですよね。 今回の期間限定無料はOS Xの12周年とAppleの37周年を祝うもので、Memory Magicは通常250円のアプリ、リリース時に無料セールをしていましたが、その時以来のチャンスです。 他のメモリ解放アプリを使用している人も、この機会に一度試してみてはいかがでしょうか。 使い方は簡単で、アプリを起動しておくだけで、メモリを解放し最適化を行います。 起動するとメニューバーにアイコンが表示され、クリックするとメモリの状況

  • 面接はスキル!転職時の面接でよく聞かれる23の質問とその対処方法

    僕は転職した際の面接を受けたことも、また逆に面接担当者をしていたこともあるのですが、どちら側にしてもこの記事を読んでおけばまた違ったアプローチができたのかな、と思うのでちょっとがんばって訳してみました。 How to Answer 23 of the Most Common Interview Questions 下記は各ポイントを意訳したものです。 「面接が好き」という人はいないでしょう。面接ではできる限り行儀よく振る舞わなければなりません、しかも面接受けることができるチャンスはその一回だけです。 私はこの数年間に数多くの面接を行いました。週にだいたい15~20回くらいでしょうか。ここにその面接で尋ねられる可能性の高い質問と私が実際にきいた答え、そして対処方法を紹介します。 面接はスキルである、ということを忘れないでください。 しっかりと準備をし、あなたは毎回エースを勝ち取ってください。

  • [CSS]divなど余計なものを使用しないで、レイアウトをセンターに配置するテクニック | コリス

    「<div id="wrapper">」などのラッパーを使用しないで、レイアウトをセンターに配置するスタイルシートを紹介します。 デモページ ※スタイルにCSS3を使用しているため、この版はIE6には対応していません。後ほど紹介するシンプル版はIE6に対応しています。 「<div id="wrapper">」を使用しないでレイアウトをセンターに配置するスタイルシート 元記事ではスタディが段階ごとに紹介されていますが、ここではその最終段階を紹介します。 CSS:シンプル版 <!DOCTYPE html> <style> html{overflow: hidden; height: 100%; background: #c72;} body{overflow: auto; height: 100%; width: 600px; margin: 0 auto; /* center */ padd

  • ハイパーテキストリンクのスタイル大全

    ハイパーテキストリンクをデザインする上で知っておきたい基礎知識から、実用的なチップス、やってはいけない間違いなど、すぐに役立つテクニックをSmashing Magazineから紹介します。 The Definitive Guide To Styling Web Links 以下は、各ポイントを意訳したものです。 はじめに ハイパーテキストリンク(リンク)はウェブページをつなぎます。Web Standardistasによると「ハイパーテキストリンク無しではウェブはウェブではなく、それはただ別個の、無関係なページのコレクションでしょう」と言っています。 我々はページにたどり着いたら、ある種のリンクをクリックする必然性があります。 1. CSSのセレクタと擬似クラス リンクをスタイルする時には、ユーザーはページを流し読みすることを忘れないでください。そのため、リンク箇所はしっかりと明示すべきです

  • 2010年に備えて、知っておきたいウェブデザインのトレンド

    2010年に向けて押さえておきたいウェブデザインのトレンドの14のポイントをWeb Design Ledgerから紹介します。 Web Design Trends for 2010 下記は、その意訳です。 また、同著者の別エントリーに対応したものもあります。 これはもう使用しない方がいいウェブデザインのトレンド はじめに 1. 特大のヘッダとロゴ 2. 手描き風のデザイン 3. 大胆で大きなフォント 4. タイポロジー 5. 1ページ レイアウト 6. インパクトがある画像 7. パースの活用 8. インタラクティブで直感的なデザイン 9. モーダルボックス 10. ミニマリズム 11. オーバーサイズのフッタ 12. レトロ 13. イントロボックス 14. 雑誌風のレイアウト はじめに このリストは、2009年に人気が高かったものからさらに発展するであろうトレンドを紹介しています。 ト

  • これはもう使用しない方がいいウェブデザインのトレンド

    昔流行ったけど、これはもう使用しない方がいいものや人気がすたれているウェブデザインのトレンドをWeb Design Ledgerから紹介します。 Most Used and Abused Web Design Trends of All Time 以下、その意訳です。 過激な表現も一部あるので、留意ください。 はじめに 鏡面反射 アクア フラリッシュ コーヒーカップ 地球 コミックフォント ストックフォト ペーパー ポラロイド 特大のRSSアイコン 音の自動再生 カウンター マーキー ブラックの背景 スプラッシュページ スキップの無いイントロ ブラックの背景 はじめに トレンドは、ウェブデザインにおける良くないキーワードではありません。実際に、下記のリストのものはその時々でウェブデザイナーを鼓舞させました。これらのアイデアは影響が非常に大きくかったので、大量のクローンが作りだされました。

  • PNG画像をより美しく、より軽量に最適化するテクニック | コリス

    先日、紹介した「JPEG画像の最適化テクニック」に続いてSmashingMagazineから、PNG画像をより美しく、より軽量に最適化するテクニックを紹介します。 追記:2009/07/27 エントリには続きがあります。 続:PNG画像をより美しく、より軽量に最適化するテクニック Clever PNG Optimization Techniques 下記、各ポイントをピックアップして紹介します。 最後のはCS3向けで不明だったので、途中省略しています。 はじめに PNG画像フォーマットの概要 1. ポスタリゼーション 2. 手のはいってない透過 3. 透過による分離 4. マスクを活用 はじめに ウェブデザイナーとしてあなたは既にPNGのフォーマットに精通しているかもしれません。PNGは劣化のないフォーマットとして、GIFの非常に良い代わりとなります。 Photoshop(あるいは他の画

  • SEO(検索エンジン最適化)に役立つ日本語対応の無料ツール集

    GoogleYahoo!などの検索エンジン用にウェブサイト(ページ)を最適化する際に役立つ、日語対応の無料ツールを紹介します。 サイトのSEOに関する基情報

  • 1ランク上のブログにステップアップするためのアドバイス

    1ランク上のブログにするために、ヘッダ、コンテンツ エリア、ナビゲーション、見出し、コメント、フッタ、広告など各要素をステップアップするポイントをBlog Designから紹介します。 How to Blog Design Style Guide ヘッダ コンテンツ エリア プライマリ ナビゲーション セカンダリ ナビゲーション ヘッドライン コメント 記事のフッタ フッタ 広告 ヘッダ ヘッダはユーザーがあなたのサイトに来訪した際、最初に目にするものです。 ユーザーの印象に残るように、ヘッダのデザインを他のサイトと異なるユニークなものにするのは非常に重要なポイントです。 ショーケース darkmotion ヘッダをステップアップするポイント サイトのタイトルとタグラインを念頭に置き、ヘッダのデザインをします。ヘッダ以外の箇所はそのトーンに合わせてデザインを行います。 ヘッダでは、ユーザー

  • やたらとハイクオリティなフリーのアイコンをコレクションした -We Love Icons

    Windows用、Mac OS X用、Linux用のハイクオリティなフリーのアイコンをコレクションしている「We Love Icons」を紹介します。

  • ウェブデザインにおける効果的な背景の使い方

    Backgrounds In Web Design: Examples And Best Practices 以下、その意訳です。 ウェブデザインのスタイルは常に進化しており、大きな変化の一つに背景の使い方があります。 背景の重要な役割は、ウェブサイトへの興味を視覚的にひきつけることです。 背景はウェブサイトのテーマを支えるものであり、あらゆる可能性を考慮し設計を行う必要があります。 ここではウェブデザインの最近のトレンドをふまえた、背景のベストプラクティスを紹介します。 1. The Basic Background Structures 良い背景を設計する際に、背景の基構造を知る必要があります。 Body Background bodyの背景は、昔から使用されている背景です。 主にイメージ、イラスト、テクスチャ、パターンなどを使用します。 Content Background コンテ

  • IE1, 2, 3, 4, 5, 6, 7, 8の確認が同時にできる -Internet Explorer Collection

    Internet Explorerの異なるバージョン(1, 1,5, 2, 3, 4, 5, 5.5, 6, 7, 8)を同時に起動して、確認ができる「Internet Explorer Collection」を紹介します。 Utilu IE Collection 同時起動できるIEのバージョンは、インストールするWindowsのバージョンによって異なります。 当環境(XP SP3+IE7)では、上記のキャプチャのようにIE1.5, 2, 3, 4, 5, 5.5, 6, 7, 8を同時起動できました。 ※元のIE7には特に影響はありませんでした。 古いバージョンが必要ない場合は、インストール時にチェックをはずせばインストールしないと思います。

  • [JS]jQueryの効果的な使い方を実例から学ぶ -Use jQuery

    Use jQueryは、JavaScriptのライブラリ「jQuery」とそのプラグインを使用したウェブサイトのショーケースです。

  • [CSS]上級者向け、スタイルシートのテクニック集

    スタイルシートで実装する実用的なものからちょっと変わったものまで、25のテクニックをDesizn Techから紹介します。 25 Advanced CSS Techniques 1. CSS Gradient Text and Background テキストや背景をグラデーション表示。

  • 1