幅を固定しないでfloatをする « (X)HTML+CSS Tips « XHTML+CSS Webサイト制作Tips « ScuderiaWeb
低価格、短納期、高品質なWebサイト制作|ScuderiaWeb Webサイト制作をご検討中の方へ。ScuderiaWebが低価格・短納期・高品質なWebサイトを制作いたします。 floatでdivを2つ横並びしたときに、片方しか幅を指定せず、もう片方の幅はautoにする方法です。 通常、floatで横並びを実現する際は、両方のdivの幅指定が必要ですが、例えばブログのサイドバーのみ幅を指定して、記事部分はブラウザの解像度によって幅を変更したいといったときなどに活用できます。 サンプル 片側のみ200pxに固定し、もう片方の幅は指定していないサンプルです。 幅を固定しないでfloatをするサンプル（別ウィンドウで表示） コード (X)HTML <div id="side"> サイド </div> <div id="contents"> コンテンツ </div> CSS div#side {
sleepingegg.net – Tips
3. HTML内の title, author, description を修正 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> fullPage.js One Page Scroll Sites <meta name="author" content="Alvaro Trigo Lopez" /> <meta name="description" content="fullPage plugin by Alvaro Trigo. Create fullscreen pages fast and simple. One page scroll like iPhone website." /> <meta name="keywords" content="fullpage,jquery,alvaro,
簡単にパララックス実装可能な軽量スクリプト「skrollr」＆コンテンツごとにページスクロールするjQueryプラグイン「fullPage.js」「One Page Scroll」｜BLACKFLAG
最近でもよく見かけるWebページ内をスクロールしてコンテンツを効果的に魅せる技法として、パララックス（少々今さら感も感じますが・・・）効果に加えて最近ではコンテンツ全体をフルスクリーン表示にして、スクロールすることで1コンテンツ分が自動でスクロールされ、次画面へ遷移するさせる技法がよく見られます。 そんなWebページ内でスクロール効果を使った動作を実装する際に役立ちそうなJSスクリプト＆jQueryプラグインを3つほど紹介してみます。 skrollr – parallax scrolling for the masses skrollr – parallax scrolling for the masses スクロールによって様々なパララックス効果を簡単に実装することができる軽量JSスクリプト「skrollr」。 デモページを見るだけでもこの「skrollr」で様々なパターンのパララックス
Diamond Renders Pack - DesignerCandies
How many other websites do you know that give diamonds away to their readers? Ok, these may not be real diamonds but they're definitely worth their weight in pixels! As it goes, diamonds are a girl's best friend. Well they're also the best friend of a designer who's wanting to add a luxurious element to their work. I mean what's more luxurious than diamonds, right? Ice, bling, jewels or diamonds –
Free Vector Map Location Pins
This resource is an update to our classic free vector map location pins set, we have prettified the pins and make them generally much more useable and in line with modern trends. If you're looking for custom pins for maps you really can't go wrong with this set! Inside the main .psd file you will find 32 designs in total, and the .psd file is also supplied in blue, green, magenta, red and yellow v
Free vectors icons
No notifications to show yet You’ll see useful information here soon. Stay tuned!
シンプルでフレキシブルでレスポンシブなlightboxプラグイン「Nivo Lightbox」 | スターフィールド株式会社
久しぶりにjQueryプラグインを紹介します。 今回紹介するのは、もうすでにありふれているlightbox系のプラグインですが、 最近のフラットデザインに則したもので、 プラグインにもその波が押し寄せてきているということでしょうか。。 レスポンシブなのはいいですね！ 今までのものとデザイン的に大きく変わったわけではなく、シンプルになっています。 このプラグインでは、 Ajax、Iframe,SWF,Youtube,Vimeo,InlineHTML 等が表示出来ます。 デモは以下からご覧ください。 DEMO Nivo Lightboxの導入方法 まずは、head内に以下のようにして、プラグイン等を読み込むようにします。 <link type="text/css" href="css/nivo-lightbox.css" rel="stylesheet" media="all" />
現役Web制作スタッフが選ぶデザインの参考になるギャラリーサイトまとめ33選 | ページ 3 / 4 | 東京上野のWeb制作会社LIG
こんにちは、Web制作会社「株式会社LIG」の代表取締役会長、ゴウです。 今回、LIGで働くWebデザイナーとディレクターにアンケートを取り、制作する際に普段参考にしているかっこいいサイトや、おしゃれなギャラリーサイトを集めてみました。 毎日仕事で使っている彼らのチョイスなので、かなり実践的で参考になる、かっこいい・おしゃれなサイトが集まったと思います。 全部で27個も集まったので、ジャンル別に分類もしました。それではいってみましょう！ デザインの引き出しを増やすには？ デザインの引き出しを増やすには、インプットのほかに、自分のアウトプットに対して誰かからフィードバックをもらうという方法もあります。周りに相談できる人がいなければ「スクールでの勉強」もおすすめです。 💡現役のプロからデザインを学べる「デジタルハリウッドSTUDIO ｂｙ LIG」の詳細はこちらから ※このページは、2021
[CSS]CSS3のMedia Queries（メディアクエリ）の使い方と実装例
CSS3 Media Queries 下記は各ポイントを意訳したものです。 はじめに CSS2のMedia typesではscreen, printなどのように特定のメディア用のスタイルシートを設定することができました。CSS3ではクエリを加えることで、さらに効率的にスタイルシートを使用できます。 Media Queriesはユーザーの状態を調べ、それにあった特定のスタイルシートを適用することができます。例えば、大きいディスプレイ用と小さいモバイル用にそれぞれ異なるスタイルシートを指定することができます。 Media Queriesの使い方 まずは、デモページをみてください。 ブラウザのサイズを変更すると、スタイルが変更されます。
これがスマートフォン向けサイトを作るときの viewport 設定３パターンだ
スマートフォン向けの Web サイトを作るとき、viewport の設定次第で使い勝手が大幅に変わる。 最近はレスポンシブ Web デザインが流行してるけども、その大前提として viewport の設定パターンを抑えておくのは重要だろう。 この記事では、viewport の設定によって、見た目・使い勝手がどう変わるかを解説する。 パターン1: 何も考えずに HTML を書く まずは、viewport を指定せずに、単純な HTML をスマートフォンで表示してみる。 <!DOCTYPE html> <head> <meta charset="utf-8"> </head> <body> <img src="/images/logo-ja.png"> <p>色んな素材がごった煮になった様子をお椀で表現しています。 湯気が<strong>「てっく」</strong>に見えるのが隠し味になっていま
【テキストを縦中央揃え】にするときに、【複数行のテキスト】でも!【親要素】がなくても! できるやり方!!
jQuery 例）1行の場合 テキストが一行、と決まっていたらカンタンです。 [html] <div> <span>例）一行の場合</span> </div> [/html] [css] div { height: 100px; } div span { line-height: 100px; } [/css] これで対応できます。ただし、複数行になる可能性がある場合、2行以上になると対応できなくなります。もともと【line-height】とは 行の高さを指定するプロパティです。一行なら親要素（div）の高さ（100px）とテキスト（span）の行の高さ（100px）が一致するため、こうなります。 サンプル１ 【1行】
jQueryでレスポンシブ対応のブラウザウィンドウ幅めいっぱいに要素を並べたコンテンツスライダーを設置する実験｜BLACKFLAG
半年ほど前にここで、「jQueryでブラウザウィンドウ幅めいっぱいに要素を並べたコンテンツスライダーを設置する実験」と題して、画面幅めいっぱいでのコンテンツスライダーを紹介しましたが、当時紹介したスクリプト構成だとレスポンシブには対応していませんでした。 同じ、画面幅めいっぱいでのコンテンツスライダー構成でレスポンシブ対応させたパターンを必要に駆られて作成してみたので、ここでも紹介してみたいと思います。 【2014/01/15】 スライダー部分にフリック動作を追加しました。スクリプト内の設定でフリック動作のON／OFFを設定が可能です。 このスライダーはなかなか言葉では説明しずらいのでまず動作サンプルから。 「jQueryでレスポンシブ対応のブラウザウィンドウ幅めいっぱいに要素を並べたコンテンツスライダーを設置する実験」サンプルを別枠で表示 スライダー中心にメイン表示エリアを設置して、その
多重露光でナイトシーンを演出する（マンションモデルルーム撮影編） - 竹澤宏公式ブログ ~デジタルフォトな日々、、
多重露光と書きましたが、、 正確には同ポジション（以下、同ポジ）で撮影された画像をレイヤーで重ねて合成するというテクニックを紹介します。 やり方自体はプロの現場では誰でもやっている当たり前のテクニッックなんですが、撮影、ライティング、画像処理といった側面から少し詳しく紹介していきます。 もしこれがオリジナリティの高い唯一無二のテクニックだったら仕事が殺到しているはずなんですが、いまのところそんな状況ではなく、 むしろヒマで、宝の持ち腐れ状態になっているので、この際、私が培ったノウハウを公に公開してしまおう、ということなんです。 作例はマンションのモデルルームの写真です。 完成写真。 Canon EOS 5DmkII TS-E17mm F4L 綺麗ですね。 でも、この手の写真で私なんかよりもっと上手いカメラマンも沢山居ますから、むしろその方達のテクニックを盗みたいぐらいです、、、 あくまで
CSS：マウスオーバー時に画像をゆっくり透過させる方法
マウスオーバー時に画像にフェード効果を与えて透過させるCSSです。 結構定番なので使用頻度も高いと思います。 DEMO transitionを使ってアニメーションを加えています。 CSS .fade { -webkit-transition: 0.3s ease-in-out; -moz-transition: 0.3s ease-in-out; -o-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out; } .fade:hover { opacity: 0.4; filter: alpha(opacity=60); } 実際に画像を透過させる時は画像URLの後にclass="fade"を入れればＯＫです。 <img src="画像URL" class="fade" /> 以上参考になれば幸いです。
スマートフォン向けサイトの作り方 | ユージック
スマートフォン向けサイトの作り方 2011年1月22日 iPhoneとAndroid両方に対応するスマートフォン向けサイトの作り方をまとめてみました。 スマートフォン向けサイト作成にあたっての基本概要 まず最初にスマートフォン向けサイトを作成する際に気になる点は画像の扱いだったりすると思います。 横幅ですが、解像度は機種によって様々ですが、縦向きで320px～640px、横向きで480px～960pxが主流となります。 標準となるものを設けるとなると、320px(横)/480px（縦）を標準として良いかなと思います。 ※iPhone4、4Sは640px/960pxの解像度ですが、内部解像度で320px/480pxと解釈してくれるため。 ですので、クライアントに見せるデザインカンプなどを作成する際も縦を標準とする際は320px（横）で作成すれば問題ないといえますが、iPhone4、4SやAn
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Free Disco Balls Pack - DesignerCandies
CSSリセット手法
jQueryの最新版にリンクする
Icons | Font Awesome
イラレ作成からWeb書き出しまで
