かゆいとこだらけの Ex Flex Fixed (サイドメニューなどを一定の範囲でのみ position:fixed させる jQuery Ex Flex Fixed)を作り直しました。 改善内容 fixed 要素の幅を自動調整するようにした リキッドレイアウト(可変幅)でちゃんと表示するようにした fixed 要素がコンテナからはみ出ないようにした fixed 要素がウィンドウ高さに収まらない状態でのスクロール時の表示を見やすくした 動的にレイアウトサイズが変更されても、ちゃんと表示されるようにした カラム高さを揃えるプラグインと併用できるようにした という訳で半年も放置しておいてあれですが、ちょくちょく問い合わせもあるので、ご利用の際には新バージョンでどうぞ。 動作確認 以下のレイアウトのデモページで、新旧それぞれのバージョンの動作を確認してみます。 <div class="heade

2017年6月29日 Webサイト制作, Webデザイン, 便利ツール iPhone持ってないくせにWebクリエイターボックスをiPhoneで見やすいよう改良しました。iPhoneからhttp://webcreatorbox.comにアクセスすると自動的にhttp://webcreatorbox.mobify.meにリダイレクトされます。（されてなかったら直接http://webcreatorbox.mobify.meからドウゾ…）今回は下記に説明するmobifyというサイトからiPhone用サイトを作りましたが、他にも便利な方法があったので紹介してみます。 ↑私が10年以上利用している会計ソフト！ 1. CSSのみで切り替える iPhone用に作成したCSSを作り、デバイスの幅によって使用するCSSを切り替えます。 &amp;amp;amp;amp;amp;amp;lt;link rel

FacebookはSEOに力をいれています Facebookというとクローズドなイメージが強く、Facebook上の情報はログインしないと見えないという印象があると思います。 確かに、個人ページはユーザーごとに細かいプライバシー設定が可能で、検索エンジンにひっかからないようにも出来ます。（→Facebookプロフィールを検索されない方法） しかし、Facebookページに関しては基本的にはオープンで検索エンジンにもインデックスされます。（ただし、国や年齢を制限することでログインしていないユーザーには見えないようにすることは可能です） Facebookはページに関しては、広く活用されるメディアとしたいよう（広告掲載できますし、企業がページを開設するモチベーションにもなりますよね）で、検索エンジン最適化にも力を入れていました。実際、SEO専門家の求人していた時期もありました。 多くの企業・ブラ

趣味サイトでも、アフィリサイトでも、仕事サイトでも（このサイトとかそうですね）、なんでもいいんで、WEBディレクター個人で「自分自身のサイト」を一個必ず作ったほうがいいです。 で、願わくば何かしらの形で目立ったサイトを作ってしまうとすごく役に立ちます。 たとえば、僕は2010年2月現在、けっこービッグなキーワードで上位に食い込んでいる自分自身のサイトをいくつか持っています。 フォトショップはじめの一歩 Googleの「フォトショップ」検索でAdobe、Wikipediaについで3位～5位くらい。 カラオケ上達ドットコム Googleで「カラオケ　上達」検索第1位。Yahooニュースのヘッドラインに載ったことあり。 コーヒーフリークス 検索ではまだまだあがってこないけど、「雰囲気を持って返れるカフェ」というコンセプトで作られた自分のサイト こういうサイトを仕事以外で作っていると、二つ利点があ

このブログでは忍者アナライズってアクセス解析サービス使って一応アクセス状況の把握なんかをしてるんですが、新規来訪者さんがいきなりノーリファラーでいらっしゃったりするのが不思議だったのですが… twitterクライアントはウェブブラウザではない 「リファラー」ってのはそのページへリンクされた参照元、つまり直前に踏んだリンクがあるページのことなんですが、アクセス解析ではその参照元不明なのをノーリファラーと言うそうです。 ノーリファラーは通常、ブラウザのブックマークとかお気に入りから来訪した場合と、URL入力欄に直接URLを入力した場合が該当します。 どんなユーザーさんも何らかの方法でそのページを知っている必要があるのですが、はじめていらっしゃった方は当然ブックマークなどしてるわけもないので別のページからリンクをたどってくるか、もしくはどこかでURLを直接入力するしかないのですが、新規さんが直接

思ったより指はじっとしていない。タッチUIの特徴と癖を分析して、タッチUXを実現する7つのポイントを紹介する。 普及してきたタッチデバイス 現在、スマートフォンやタブレット端末がすさまじい勢いで普及してきています。iPhone/iPadは新製品が出るたびに販売記録を塗り替え、Androidのスマートフォンやタブレットも各社からさまざまな端末が発売されています。今秋にはMicrosoftからWindows 8/RTも発売され、いよいよタブレットが本格的な普及期に入ります。 これらはすべてタッチUIで操作する、ということがこれまでのPCと大きく異なります。 直感的で分かりやすいタッチUIはあっという間に市場に受け入れられました。ユーザーは新しい体験を期待と興奮で歓迎しました。今やスライドしてページスクロールは当たり前で、スワイプでページをめくることに迷う人はいません。 同時に、そのような端末で

CSSのセレクタって簡単そうで奥が深いと思います。ということで、個人的に使っている方法や意外な使い方などを紹介しますので参考になればと思います。 効率的なセレクタの使い方と読み込み速度を考えたときに効果的なセレクタの使い方に分けて紹介していきます。 CSSセレクタの効率的な使い方 同じ内容ならまとめる 例えばこんなCSSがあります。 h1 { color: black; } p { color: black; } カンマで区切ってまとめることができます。 h1, p { color: black; } !importantがある場合 続いて、!importantがある場合。 h1, h2, h3 { font-weight: normal; } a strong { font-weight: normal !important; } strong { font-style: italic;

最近のウェブサイトのデザインってどんなの？と気になったり アイデアやインスピレーションを受けたいときに見たいサイトをいくつか紹介します。 ■日本語サイト S5-Style 検索したときに的確に抽出できる印象。キレイめからシンプルまで。RSSも読みやすい。 Web Design Clip 大手系、キレイ系が多い感じ。 WONDER BOOKMARKS シンプル系、かわいい系、工夫凝らし系がおおい感じ。 ■海外サイト Web Creme シンプルで、おしゃれなサイトが多いです。 Web Design File いわゆる「ザ☆海外サイト」なデザインをクリップ。 日本サイトではあまり見ないようなシンプルでダイナミックな工夫を凝らしたサイトがたくさんあります。 ■Pinterest Pinterest search results for web design Pinterestでweb+desig

レスポンシブウェブデザインを実現するのによく使われる手法がメディアクエリを使った画面サイズ別スタイリングです。この場合、ある画面サイズを境目として適用させるスタイルを切替えます。この境目を『ブレイクポイント』といいます。 画像を見る この『ブレイクポイント』ですが、特に「こうするべき」というものが今のところありません。この境目をどの値にするかもそうですし、何分割させるのかというのも制作者がいろいろ試行錯誤している最中なのです。 これまでのウェブ制作では、デスクトップの場合はアクセス解析からよく見られている画面サイズを分析、モバイルは横幅240pxが主流、などの明確な指針があったのでそれに合わせたデザインを行えばよかったのですが、技術革新が進み新しいデバイスが次から次へと出てくるようになり、現在はデスクトップ、タブレット、モバイル、様々なサイズのデバイスが存在しています。 これらの不特定多数

Photoshopgraphics.comさんで無料配布中の飾り罫を6セット紹介。 比較的シンプルなテキストデコレーションが多めなのがうれしい。 セットには飾り罫以外（月桂樹、カットライン、シンボルなど）が少し含まれます。 極力少なめに使うのがポイントだそう・・ set01 ファイル形式：AI Download link set02 ファイル形式：AI Download link set03 ファイル形式：AI Download link set04 ファイル形式：AI Download link set05 ファイル形式：AI Download link set05 ファイル形式：AI Download link

シンプルでセンスのいい、３種類のリボンセットを紹介。 オールpsdファイルなのでフォトショップで簡単に編集出来るのがいい！ まずはこちら 落ち着いたトーンが魅力的。ちょと分かりにくいですが、それぞれテクスチャが異なります。ブラック以外はファブリック系、ブラックのみレザーになってます。 スクリプトフォントがよく似合ってます。 Psd Ribbon Classic Set – Psd Web Elements – Pixeden ファイル形式：PSD（6色） ライセンス：商用OK（添付ファイルを良くお読み下さい） www.pixeden.com 先程と基本的に同系統のデザイン。但し、配色がパステル調（蛍光色）でかなりビビット。 Invent Classic Ribbons – Inventlayout.com – Download free PSD ファイル形式：PSD（5色） ライセンス：基

私は「色」が好きなので、配色を考えるのがそんなに苦ではないんですが、良い配色が思い浮かばず、苦しんでいるWebデザイナーさんは沢山います。 人の目で見分けられる色の数は750万色以上あると言われていて、デザイナーはこの膨大な色の中から配色を考えるんですが、これが結構大変なんです。経験を積んだWebデザイナーさんでも何日も配色に悩み、目の下に隈を作ることがあると聞いたことがあります。 そこで今回は、配色を考える時や、配色に悩みすぎて出口が見えなくなってしまった時に役立つ、基本的な7つの配色技法を紹介したと思います！ 基本的な7つの配色技法 これから紹介するの7つの配色技法は、お互いに明確な違いがない物もいくつかありますが、あくまでもこれらは配色の方向性・配色の考え方を示すものだと理解してください。それでは早速、例を交えながら特徴と効果をまとめて紹介させていただきます。 ドミナントカラー配色

エレガントで高品位なカリグラフィーエレメンツの詰め合わせ。 全体的にシンプルデザインの素材が多いので、使いやすそう・・・ Calligraphic Style Ornaments  –  by ~YSR1(deviantart) ファイル形式：AI ysr1.deviantart.com

飾り枠･飾り罫･イラストに関連のある無料のイラスト素材や情報をまとめて表示しています。最新お役立ち情報が満載！ － Free-Style – ALL FREE

ブラウザで画像ファイルを単体で開いたとき、ブラウザによって表示の仕方が違っていたのが気になったので、画像表示ページのCSSを調べてみました。 なかなか面白かったですし、何かの参考になるかもしれません。 Google Chrome & SafariChrome 20.0.1115.1 dev-mとSafari 5.1.5で調査。 画像は表示領域の左上にぴったりと表示される。画像が表示領域内に収まりきらない場合は縮小して全体表示。スタイルは各要素にstyle属性で直接指定されます。 body { margin: 0px; } img { -webkit-user-select: none; cursor : -webkit-zoom-in; /* 縮小表示時 */ }FirefoxFirefox 12.0とAurora 14.0a2 (2012-05-01)で調査。 表示領域は暗い感じに塗りつ