縦長のwebデザインをがむしゃらに集めています。
クオリティが高い縦に長いサイトを厳選して集めています MUUUUU_CHANG WEB DESIGN SHOWCASE
縦長のwebデザインをがむしゃらに集めています。
ウェブページの重要な箇所を素早く伝える5つのデザインテクニック
Creating Focal Points in Your Web Design [ad#ad-2] 下記は各ポイントを意訳したものです。 元記事ではさらに多くのサイトが紹介されています。 はじめに タイポグラフィ イラストレーション ボタン ホワイトスペース デコレーション はじめに ウェブサイトのユーザーは、少しでも速くものを見いだすことを望みます。そしてわたし達ウェブデザイナーは、そのようにサイトをデザインするべきです。これを実現する最も重要な方法の一つがフォーカルポイントです。 フォーカルポイントと、はユーザーの注目をガイドするようウェブページ上に目立つセクションのことです。フォーカルポイントは際立っており、他のコンポーネントとは別のものです。ウェブページの最も重要な外見を強調し、ウェブサイトの主となる目的を伝えることが可能です。 タイポグラフィ タイポグラフィはサイズ、カラー、ス
HTML5+jQueryのドラッグ&ドロップに対応したアップローダー・droparea
Gmailライクにローカル環境からブラウザに ドラッグ&ドロップで画像をアップロード可能 にするHTML5+jQuery製のアップローダー droparea。今後、こうしてキーボードを使う 頻度が減っていくんですかね・・HTML5の 出現で一気に加速した印象ですね。 jQuery HTML5 UploaderやjQuery File Uploadの後発に当たりますね。 イメージアップローダーです。Gmailライクにドラッグ&ドロップでアップロード出来ます。 コードs = { 'init': m.init, 'start': m.start, 'complete': m.complete, 'instructions': 'drop an image file here', 'over' : 'drop file here!', 'nosupport' : 'No support for t
複数並べられたコンテンツをまとめてスライドさせるjQueryプラグイン・Grid Slide Plugin - かちびと.net
ちょっとうまい説明が思いつかなかった んですけど、複数並べられた画像など を同時にスライドさせるjQueryプラグイン。 省スペースに多くのコンテンツを表示 させる事が出来るのはちょっといいかも 知れません。 あんまり見かけないタイプのスライダーですね・・省スペースに沢山の情報を表示させたい、という時に使えそうな使わなそうな。たまに似たようなインターフェース見かけますね。 これらの8つのコンテンツ部分が同時にスライドします。オプションで数を減らしたり速度を変えたり。 デモ見たほうが早いですね。説明下手ですみません。 Demo js <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"> </script> <script src="jquery.ea
jQueryUIを使ってマウスオーバー時に背景色をアニメーションさせながら変更出来ると今更知った - かちびと.net
備忘録。マウスオーバー時に背景の 色をアニメーションしながら変更する、 というのをクロスブラウザ対応で実装 したい。css3を使えば簡単な事ですが、 ご存知のようにIEは非対応。で、色々 探してみたんですが、jQueryUIを使う のが一番良さそうな感じでした。 普通にググったらJquery Color Pluginというプラグインがあったのですが、動作はするけどIEでエラーが出ます。リファレンスを見ても そもそも数値型の値をとらない属性（backgroundColorなど）には、animate関数は対応していません。 (jQuery日本語リファレンス) と書いてあるし、Jquery Color Pluginを直すのも面倒だし、どうしようかなと思ったんですが、jQueryUIを使えば凄く簡単なんですね・・・素人ですみません。 コード <script type="text/javascrip
戻るボタンが押された際、ページのJavaScriptを途中の状態から実行させない方法
スマートフォンを含む最近のブラウザでは、戻るボタンで前のページに戻った際に、JavaScriptも含めて前回の最後の状態を復元します（Back Forward Cacheと呼ばれます）。これはとても便利なのですが、ページを作成する立場からすれば、余計なお世話であることもあります。 Back Forward Cacheの無効化はとても簡単に実現できます。ページの中にonunloadを書くだけです。 <!DOCTYPE html> <html><head><title>onunload test</title> <script> window.onunload = function() {}; window.onload = function() { var count = 0; var loop = function() { document.getElementById("num").in
IMPORTRANGE - ドキュメント エディタ ヘルプ
使用例 IMPORTRANGE("https://docs.google.com/spreadsheets/d/abcd123abcd123", "シート1!A1:C10") IMPORTRANGE(A2,"B2") 構文 IMPORTRANGE(スプレッドシートの URL, 範囲の文字列) スプレッドシートの URL - データの読み込み元となるスプレッドシートの URL を指定します。 スプレッドシートの URL の値は二重引用符で囲むか、スプレッドシートの URL を含むセルへの参照にする必要があります。 範囲の文字列 - 読み込む範囲を指定する文字列で、"[シート名!]範囲" の形式で指定します（例: "シート1!A2:B6"、"A2:B6"）。 範囲の文字列のシート名の要素は省略可能です。デフォルトでは、IMPORTRANGE 関数は最初のシートの指定範囲から読み込みます。 範囲
作業内容とコストのバランスを見極める――プロが教える見積書7つの極意③ | 安く!早く!を実現するサイト制作の発注マニュアル
賢く！ 安く！ 発注するために知っておきたい見積もりチェック術 プロが教える見積書7つの極意 見積もりを依頼するときや、見積書をチェックするときの注意点を示す「プロが教える見積書7つの極意」。 この記事では、極意その3として、作業内容と発生するコストのバランスを解説する。サイト制作で必要な「プロジェクト管理」「サイト設計・全体計画」「デザイン・開発」「コンテンツ移行」といった各作業を理解して、それぞれの段階でどのようなコストが発生するのかを理解しておけば、見積書をよりよく判断できるようになるはずだ。 極意その3 作業内容とコストのバランスを見極めるウェブサイトを初めて外注するとき、もらった見積書を見ても、項目と作業内容が一致しないのではないだろうか。ここでは、まず見積書の内容がどういったものか把握するために、各項目について簡単に内容とポイントをまとめてみた。 プロジェクト管理プロジェクト管
「概算見積書」「超概算見積書」の違いって？ 3種類の見積もりを徹底解説――プロが教える見積書7つの極意② | 安く!早く!を実現するサイト制作の発注マニュアル
賢く！ 安く！ 発注するために知っておきたい見積もりチェック術 プロが教える見積書7つの極意 ウェブサイトの見積もりでは、総額が大きいわりに不透明な部分も多く、制作会社によって見積書の内容が異なることもある。本稿では、発注と制作を円滑に進めるために知っておきたい見積もりの基本と注意すべきポイントを示す。 極意その2 3種の見積書の違いを知るここでは、見積書の種類について説明しよう。ほとんどの場合、1回のサイト構築プロジェクトでは、次ページの表2に示した3つの見積書をもらうことになる。順に説明していこう。 超概算見積書は、自社内で外注予算を組むために、費用を大まかに把握するためのものだ。 たとえば、使用したいCMSやASPサービスの価格がいくらなのかを調べたいときや、RFPを作るための情報収集としてもらってもいい。また、見積もりをもらった制作会社に必ず発注しなければいけないという縛りもない。
見積書サンプル&プロが教える見積書7つの極意①――1社見積もりと相見積もりを極める | Web担当者Forum
賢く！ 安く！ 発注するために知っておきたい見積もりチェック術 プロが教える見積書7つの極意 ウェブサイトの見積もりでは、総額が大きいわりに不透明な部分も多く、制作会社によって見積書の内容が異なることもある。本稿では、発注と制作を円滑に進めるために知っておきたい見積もりの基本と注意すべきポイントを示す。 ウェブサイト制作では、発注する会社の業種やサービス内容、制作期間、求める機能などによって、制作にかかる手間が大きく変わるものだ。当然それにともなって価格も大きく上下するため、引越しや保険、中古車販売のようにウェブ上で簡単に正確な見積もりを出すのは難しい。 ウェブサイト制作を発注する側にとっては相場がわかりにくく、なかなか発注の決断がしにくい状況を生み出していることも事実である。見積もりをもらっても、それが高いのか安いのか判断する術もなく、何を基準に話を進めていいのか戸惑う企業のWeb担当者
[JS]背景画像やスライドショーをブラウザいっぱいに表示するスクリプト -Vegas
写真画像をブラウザいっぱいに表示し、ウェブページにフル表示の背景画像やスライドショーを設置するjQueryのプラグインを紹介します。 ドットベースのオーバーレイ用の画像が数多く用意されているので、画像にスタイリッシュなエフェクトを加えることも簡単にできます。 デモページ サムネイルをクリックすると、写真画像が変更されます。 Vegasの実装 外部スクリプト 「jquery.js」と当スクリプトを外部ファイルとして指定します。 <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="/vegas/jquery.vegas.js"></script> スタイルシート スタイルシートもあらかじめ用意されており、外部ファイルとして指定します。 <link rel="st
見ているだけでも楽しい、ネガティブスペースを使ったロゴデザインのまとめ
ネガティブスペースとはホワイトスペース（空白）としてもよく知られており、コンテンツに占拠されていないエリアのことで、特定のアイテム間のスペースであるとも定義できます。 そんなネガティブスペースを巧みに使用したロゴデザインを紹介します。
HTM5スニペットの共有サイト「HTML5 Snippets」
だんだんと対応するブラウザも増えてきて業界の中では利用され、案件も増えてきたHTML5。もうすでにいくつか仕事として利用している方もいれば、これからという方もいると思いますが、今日紹介するのはHTM5スニペットの共有サイト「HTML5 Snippets」です。 スニペットとは、よく利用する短いコードの断片に分かりやすい名前を付け、ソースに利用しやすくするためのもの。「HTML5 Snippets」では、基本的なフレームから、細かなパーツまで、様々なスニペットが共有されています。いくつか気になったスニペットをピックアップしてご紹介致します。 詳しくは以下 HTML5 snippet : Basic Structure HTML5 HTML5の基本テンプレート。jQueryやDD_belatedPNGなども最初から読み込まれいます。 HTML5 snippet : A css rounded
HTML5リファレンス（旧仕様）
<p> …… ひとつの段落（パラグラフ）であることを表す <hr> …… テーマや話題の区切りを表す <pre> …… 半角スペースや改行をそのまま表示する <blockquote> …… 引用・転載セクションであることを表す <ol> …… 順序のあるリストを表示する <ul> …… 順序のないリストを表示する <li> …… リストの項目を記述する <dl> …… 定義・説明リストを表す <dt> …… 定義・説明される言葉を表す <dd> …… 定義用語や言葉の説明をする <figure> …… 図表であることを示す <figcaption> …… 図表のキャプションを示す <div> ……ひとかたまりの範囲として定義する <main> …… メインコンテンツであることを示す <a> …… ハイパーリンクを指定する <em> …… 強勢する（アクセントを付ける）箇所を表す <stro
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
○○円ならどこまでできる!? ウェブサイト制作の相場早見表 | Web担当者Forum
WEB的な素材 Freebie Pixels
Layer Styles
角丸やシャドウ作るジェネレータ。CSS3 Generator
| blog.ryow.net
Ceaser - CSS Easing Animation Tool - Matthew Lein