レスポンシブWebデザインで必要な配置の仕組みがよく分かるアニメーションを使った解説 | コリス

2015/01/26 104 users コリス fixed absolute static 配置

レスポンシブWebデザインを使用する際、Webデザインの配置がどのような仕組みになっているかを理解することは非常に重要です。PhotoshopやIllustratorなどのデザインツールに比べてそれは複雑で、スクロールやスクリーンサイズなどさまざまな要因に依存します。 さらに複雑しているのが配置の名称。 Static, Absolute, Relative, Fixed、、、スタティックとはどこが... 続きを読む

[JS]非常に少ないコードでパララックスのエフェクトを実装できるスクリプト -Parallaxor | コリス

2015/01/19 79 users パララックス jQuery ＳＥＣ コリス エフェクト

指定した要素をスクロールに応じて、さまざまな方向に異なるタイミングでアニメーションさせることができるjQueryのプラグインを紹介します。 Parallaxor -GitHub Parallaxorのデモ Parallaxorの使い方 Parallaxorのデモ デモはChrome, Firefox, Safariでご覧ください。 IEやスマフォではスタティックに表示されます。 demo: sec... 続きを読む

Webデザインの代表的な4つのレイアウト、その特徴と相違点 -Liquidapsive | コリス

2014/09/09 238 users コリス Responsive static Adaptive

デモページ Responsive（レスポンシブ） Adaptive（アダプティブ） Liquid（リキッド） Static（スタティック） Responsive（レスポンシブ） レスポンシブは、デスクトップ・スマホ・タブレットなど異なる解像度ごとにレイアウトを定義するのが特徴です。一見するとリキッドのように見えますが、表示サイズに応じて要素の幅のサイズやレイアウトが変化します。 デバイスごとに合わ... 続きを読む

[JS]後発だけに高性能で、実装はシンプルで超軽量のツールチップのスクリプト -jQuery PowerTip | コリス

2012/08/15 315 users コリス 後発 追従 スクリプト カーソル

jQuery PowerTip jQuery PowerTip -GitHub jQuery PowerTipの特徴 jQuery PowerTipのデモ jQuery PowerTipの使い方 jQuery PowerTipの特徴 実装が簡単。 シンプルな構造。 ツールチップはカーソルに追従とスタティックに表示の2種類をサポート。 ツールチップの追従するエリアは設定可能。 カスタマイズも簡単。 ... 続きを読む

[CSS]CSS3非対応も配慮、通知パネルをブラウザの上部に配置するチュートリアル | コリス

2011/08/28 63 users コリス チュートリアル CSS クローズボタン 上部

下記は各ポイントを意訳したものです。 デモ デモページでは、CSS3アニメーションをサポートするブラウザと非サポートブラウザでの挙動の違いを確認できます。 デモページ ※上部のイエローのパネルです。 CSS3アニメーション サポート アニメーションでパネルがスライド表示され、アニメーションで隠れます。 CSS3アニメーション 非サポート スタティックにパネルが表示され、クローズボタンのクリックで隠... 続きを読む

ウェブサイトのユーザビリティ、とっても大切な20のポイント | コリス

2011/03/10 467 users コリス ユーザビリティ ユーザービリティ ウェブサイト 下記

ウェブサイトに最も大切なのは、ユーザービリティです。 どんなにかっこいいデザインでも、どんなに重要なコンテンツを掲載しても、それを使うことができないのであれば意味はありません。ウェブサイトのユーザビリティを向上する20のポイントを紹介します。下記は各ポイントを意訳したものです。最新の情報を中心にウェブサイトのデザインを組み立てるもし新しいコンテンツをあまりリリースしないのであれば、スタティックなコ... 続きを読む

HTMLやCSSがわからなくても、無料で簡単にウェブサイトを作れるWebアプリ「Orbs」 : ライフハッカー［日本版］

2010/12/19 222 users ウェブアプリ CSS ライフハッカー HTML ウェブサイト

Webツール , その他 , デザイン HTMLやCSSがわからなくても、無料で簡単にウェブサイトを作れるWebアプリ「Orbs」 2010.12.19 22:00 コメント数：[ 0 ] トラックバック：[ 0 ] Check Tweet ウェブサイトを作りたいけど、HTMLもCSSも分からない...とお悩みなら、無料で簡単にスタティックなサイトを作れるウェブアプリ「Orbs」を使ってみてくださ... 続きを読む

Wordpress オリジナルテーマの作り方 3.0+ | Webクリエイターボックス

2010/11/15 1408 users WordPress カスタムデザイン HTMLテンプレート

Wordpressのオリジナルテーマの作り方について説明していきます。2010年1月に書いた記事とはバージョンが違い、コードも変更されたため、新たに記事にしてみました。慣れると簡単なのですが、初心者には少し難しいWordpressのカスタムデザイン。Wordpressのテーマがどのように動くのか、スタティックのHTMLテンプレートにどうやってWordpressの機能をつけるのかを説明していきます。... 続きを読む

Googleに学ぶ、ウェブページのパフォーマンスを最適化する方法 | コリス

2009/06/06 514 users コリス ウェブページ レンダリング HTTPリクエスト 下記

Web Performance Best Practices 下記、ウェブページのパフォーマンスを最適化するポイントをまとめたものです。 キャッシュの最適化 往復遅延時間を減らす HTTPリクエストを減らす ロードサイズを減らす レンダリングの最適化 1. Optimize caching キャッシュの最適化 ブラウザのキャッシュを活用 JavaScriptやCSSファイルや画像などのスタティック... 続きを読む

[JS]チョー簡単にサイトをAJAX対応にするスクリプト -com.bydust.ajax | コリス

2008/11/10 186 users コリス チョー AJAX対応 スクリプト WordPress

com.bydust.ajaxは、スタティックなサイトでもWordPressのようなサイトでも、ページ全体のロードをせずに必要な箇所のみロードして表示するAJAX対応にするスクリプトです。 com.bydust.ajax demo サイトをAJAX対応にする基本的なスクリプトの設置方法は、下記の通りです。 下記は、対象となる全ページに適用します。 ダウンロードした２つのスクリプト（com.bydu... 続きを読む

naoyaのはてなダイアリー - 10分で完了、mod_perl 2.0 で Hello, World!

2006/01/08 104 users naoya DSO Hello MacOSX mod_perl

10分で、といいながらたぶん mod_perl と Apache2 をビルドするのに 10 分以上かかるという罠。まあいいや。以下のやり方で Linux、MacOSX どちらでもちゃんと動くと思われます。まず、mod_perl 2.0 のインストール。DSO でもいいけど、ここでは Apache にスタティックに組み込みます。 インストールディレクトリは /usr/local/httpd_mp2 ... 続きを読む