一定範囲で position:fixed させる Ex Flex Fixed がかゆいとこだらけだったので作り直しました - Cyokodog :: Diary
かゆいとこだらけの Ex Flex Fixed (サイドメニューなどを一定の範囲でのみ position:fixed させる jQuery Ex Flex Fixed)を作り直しました。 改善内容 fixed 要素の幅を自動調整するようにした リキッドレイアウト(可変幅)でちゃんと表示するようにした fixed 要素がコンテナからはみ出ないようにした fixed 要素がウィンドウ高さに収まらない状態でのスクロール時の表示を見やすくした 動的にレイアウトサイズが変更されても、ちゃんと表示されるようにした カラム高さを揃えるプラグインと併用できるようにした という訳で半年も放置しておいてあれですが、ちょくちょく問い合わせもあるので、ご利用の際には新バージョンでどうぞ。 動作確認 以下のレイアウトのデモページで、新旧それぞれのバージョンの動作を確認してみます。 <div class="heade
freethroww.com - このウェブサイトは販売用です！ - freethroww リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
WebサイトをiPhoneで見やすくする5つの方法
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;lt;link rel
Iframeで『いいね！』を押した人限定で見れるコンテンツを作る覚書-ファンゲート- Eitoku's Blog
『Fan-Gate(ファンゲート)』をご存知でしょうか？ Facebookページでいいね！ボタンを押さないとページやコンテンツが見れないようにする事です。いろいろブログを見たりしたましたが、ちんぷんかんぷん、四苦八苦しましたが、iframeで使えるように作れました。↓ いいね！を押していない方にはコンテンツは見えません。いいね！を押してもらうように促す文が表示されます。 いいね！を押してくれた方にはコンテンツが見られるようになります。 実際に見てみたい方は、土屋英徳(Tsuchiya Hidenori) | Facebookへ。 海外のFacebookページでは、結構見受けられます。特徴としては、Facebookページ全体を見せないようにする設定とは異なり、あるコンテンツだけを見せないようにできるので、ウォールなどはいいねを押されない方でも見れる事です。 これがいい、悪いは別として、ユーザ
Facebookページ公式SEOマニュアル – Social SEO
FacebookはSEOに力をいれています Facebookというとクローズドなイメージが強く、Facebook上の情報はログインしないと見えないという印象があると思います。 確かに、個人ページはユーザーごとに細かいプライバシー設定が可能で、検索エンジンにひっかからないようにも出来ます。（→Facebookプロフィールを検索されない方法） しかし、Facebookページに関しては基本的にはオープンで検索エンジンにもインデックスされます。（ただし、国や年齢を制限することでログインしていないユーザーには見えないようにすることは可能です） Facebookはページに関しては、広く活用されるメディアとしたいよう（広告掲載できますし、企業がページを開設するモチベーションにもなりますよね）で、検索エンジン最適化にも力を入れていました。実際、SEO専門家の求人していた時期もありました。 多くの企業・ブラ
暮らしの情報サイトnanapiはサービスを終了いたしました | nanapi [ナナピ]
2020年8月31日(月)をもちまして、nanapiに関わるすべてのサービスは終了いたしました。 nanapiは、2009年のサービス開始より「みんなで作る暮らしのレシピ」という考えのもと、ユーザーの皆さまに生活に関する様々な「ハウツー」を投稿していただく投稿型ハウツーサービスとして運営してまいりました。 約11年間にわたって皆さまからご支援をいただきサービスを継続できたこと、nanapi編集部一同、心より御礼申し上げます。 掲載されていたコンテンツなどのnanapiについてのお問い合わせは、nanapi@supership.jp までお願いいたします。 長きに渡りnanapiを応援してくださり、本当にありがとうございました。
自分の個人サイトは作ったほうがいい
趣味サイトでも、アフィリサイトでも、仕事サイトでも（このサイトとかそうですね）、なんでもいいんで、WEBディレクター個人で「自分自身のサイト」を一個必ず作ったほうがいいです。 で、願わくば何かしらの形で目立ったサイトを作ってしまうとすごく役に立ちます。 たとえば、僕は2010年2月現在、けっこービッグなキーワードで上位に食い込んでいる自分自身のサイトをいくつか持っています。 フォトショップはじめの一歩 Googleの「フォトショップ」検索でAdobe、Wikipediaについで3位～5位くらい。 カラオケ上達ドットコム Googleで「カラオケ 上達」検索第1位。Yahooニュースのヘッドラインに載ったことあり。 コーヒーフリークス 検索ではまだまだあがってこないけど、「雰囲気を持って返れるカフェ」というコンセプトで作られた自分のサイト こういうサイトを仕事以外で作っていると、二つ利点があ
なぜ新規来訪者がノーリファラーなのか今さらわかった
このブログでは忍者アナライズってアクセス解析サービス使って一応アクセス状況の把握なんかをしてるんですが、新規来訪者さんがいきなりノーリファラーでいらっしゃったりするのが不思議だったのですが… twitterクライアントはウェブブラウザではない 「リファラー」ってのはそのページへリンクされた参照元、つまり直前に踏んだリンクがあるページのことなんですが、アクセス解析ではその参照元不明なのをノーリファラーと言うそうです。 ノーリファラーは通常、ブラウザのブックマークとかお気に入りから来訪した場合と、URL入力欄に直接URLを入力した場合が該当します。 どんなユーザーさんも何らかの方法でそのページを知っている必要があるのですが、はじめていらっしゃった方は当然ブックマークなどしてるわけもないので別のページからリンクをたどってくるか、もしくはどこかでURLを直接入力するしかないのですが、新規さんが直接
タッチUXを実現する7つのポイント
思ったより指はじっとしていない。タッチUIの特徴と癖を分析して、タッチUXを実現する7つのポイントを紹介する。 普及してきたタッチデバイス 現在、スマートフォンやタブレット端末がすさまじい勢いで普及してきています。iPhone/iPadは新製品が出るたびに販売記録を塗り替え、Androidのスマートフォンやタブレットも各社からさまざまな端末が発売されています。今秋にはMicrosoftからWindows 8/RTも発売され、いよいよタブレットが本格的な普及期に入ります。 これらはすべてタッチUIで操作する、ということがこれまでのPCと大きく異なります。 直感的で分かりやすいタッチUIはあっという間に市場に受け入れられました。ユーザーは新しい体験を期待と興奮で歓迎しました。今やスライドしてページスクロールは当たり前で、スワイプでページをめくることに迷う人はいません。 同時に、そのような端末で
CSSセレクタの効率的、効果的な使い方をいろいろ
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
レスポンシブウェブデザイン制作で悩むブレイクポイントのまとめ | Web担当者Forum
レスポンシブウェブデザインを実現するのによく使われる手法がメディアクエリを使った画面サイズ別スタイリングです。この場合、ある画面サイズを境目として適用させるスタイルを切替えます。この境目を『ブレイクポイント』といいます。 画像を見る この『ブレイクポイント』ですが、特に「こうするべき」というものが今のところありません。この境目をどの値にするかもそうですし、何分割させるのかというのも制作者がいろいろ試行錯誤している最中なのです。 これまでのウェブ制作では、デスクトップの場合はアクセス解析からよく見られている画面サイズを分析、モバイルは横幅240pxが主流、などの明確な指針があったのでそれに合わせたデザインを行えばよかったのですが、技術革新が進み新しいデバイスが次から次へと出てくるようになり、現在はデスクトップ、タブレット、モバイル、様々なサイズのデバイスが存在しています。 これらの不特定多数
厳選！驚くほどデザイン性の高い無料のブログテンプレート５５個 | バズ部
ブログのデザインは、読者に与える第一印象に大きな影響を与える。どれだけコンテンツが優れていても、デザインが悪ければ台無しになってしまう。一方、質の高いコンテンツと好印象を与えるのブログデザインが組み合わさると、読者の記憶に残るブログになる。 だからこそ、ブログのデザインに悩んでいる方は多いのではないだろうか？しかし、実は、ブログテンプレートを使うと、あっという間に質の高いブログデザインを作ることができる。 そこで、本日は、驚くほどデザイン性が高く、無料で使えるブログテンプレートを厳選して５５個ご紹介する。 あなたの気に入るものが、きっとあるはずなので、ぜひ使ってみよう。 Exhibition デモ ｜ ダウンロード Palladiumize デモ ｜ ダウンロード Architekt デモ ｜ ダウンロード ※有料版はレスポンシブデザイン対応 Grid Portfolio デモ ｜ ダウン
テキストをさり気なく飾る！ベクター飾り罫6セット100個以上（AI）
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
これは使って見たい！高品位なクラシック･リボンのWEB素材3セット（商用可・PSD）
シンプルでセンスのいい、３種類のリボンセットを紹介。 オール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色） ライセンス：基
配色に悩んだときに、きっと役立つ7つの配色技法【基本】
私は「色」が好きなので、配色を考えるのがそんなに苦ではないんですが、良い配色が思い浮かばず、苦しんでいるWebデザイナーさんは沢山います。 人の目で見分けられる色の数は750万色以上あると言われていて、デザイナーはこの膨大な色の中から配色を考えるんですが、これが結構大変なんです。経験を積んだWebデザイナーさんでも何日も配色に悩み、目の下に隈を作ることがあると聞いたことがあります。 そこで今回は、配色を考える時や、配色に悩みすぎて出口が見えなくなってしまった時に役立つ、基本的な7つの配色技法を紹介したと思います！ 基本的な7つの配色技法 これから紹介するの7つの配色技法は、お互いに明確な違いがない物もいくつかありますが、あくまでもこれらは配色の方向性・配色の考え方を示すものだと理解してください。それでは早速、例を交えながら特徴と効果をまとめて紹介させていただきます。 ドミナントカラー配色
これは綺麗！無料のカリグラフィースタイル飾り枠･飾り罫のセット（AI）
エレガントで高品位なカリグラフィーエレメンツの詰め合わせ。 全体的にシンプルデザインの素材が多いので、使いやすそう・・・ Calligraphic Style Ornaments – by ~YSR1(deviantart) ファイル形式：AI ysr1.deviantart.com
もう知らないでは許されない！！「これからはじめる」という人のためのjQuery Mobile情報まとめ | ke-tai.org
もう知らないでは許されない！！「これからはじめる」という人のためのjQuery Mobile情報まとめ Tweet 2011/5/27 金曜日 matsui Posted in Android, iPhone, 記事紹介・リンク | 4 Comments » モバイルサイト作成のためのフレームワーク「jQuery Mobile」が、すごい人気ですね。 当初は数ある選択肢の中の一ツールとして程度の扱いでしたが、AdobeのDreamweaverが本格対応するなど、その勢いは留まるところを知らず、根幹的な技術になりそうな気配すらあります。 今回は過去に当サイトで掲載させていただいた情報も含め、jQuery Mobileを学ぶ上で知っていた方が良さそうなリンクをまとめてみました。 本家サイト。英語が苦手な私は、主にダウンロード用途ぐらい。 → jQuery Mobile 本家サイト（英語） [j
画像単体表示時に各ブラウザが適用するスタイル
ブラウザで画像ファイルを単体で開いたとき、ブラウザによって表示の仕方が違っていたのが気になったので、画像表示ページの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)で調査。 表示領域は暗い感じに塗りつ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Free-Style – ALL FREE
