Upload your creations for people to see, favourite, and share.
レイアウト上、margin:-20px; などと表記したいときもあるんだけど、IE6は言うことを聞いてくれない。。。 ネガティブマージンとは「マイナス値のマージン」のことですが、IE6ではこのマイナス値を読み取ってくれないためにこのようなことが起こる。 そのため、margin:-20px; とするなら、 .要素{ margin-left:-20px; position:relative; } とするか、marginはdiv上でfloatプロパティを使うと値が2倍になってしまうバグもIE6にはあるので、 .要素{ position:relative; left:-20px; } とするのが良いかも知れない。 ただ、親要素の位置などによっては、計算が異なる場合があるので、必ずしも同じ位置になるとは限らないと思うので、その場に応じて使いやすい方を使おう。 私は position 好きなので、後者
こんばんは、ishidaです。急に肌寒くなってきましたね。 弊社シーブレインは馬車道から目と鼻の先にありますが、その馬車道にて今年も恒例の馬車道まつりが開催されています。11月1日(日)~11月4日(水)まで開催されておりますので、馬車道付近にお越しの際は是非お立ち寄りくださいね。 それはさておき、フォントサイズを指定するときにまずはベースとなる基準のフォントサイズをbody等に指定しますが、サイトによって基準を12pxにしたり、13pxにしたり、たまぁ~に10pxにしたりしてます。 そうなってくると相対指定で20px相当って何%だっけ?ってことがよくあるのと、毎回毎回電卓をたたくのが面倒になったので、ここに基準としてよく使いそうなフォントサイズをメモします。 基準文字サイズ 10px 基準文字サイズ 11px 基準文字サイズ 12px 基準文字サイズ 13px 10px
Webデザインで使えるフリーシームレステクスチャ... / グランジテクスチャー30個 | 30 Usefu... / 布風テクスチャー | A Collection ...他...全4件
テキストで実装した見出しなどを画像に置換するテクニックで「-9999px」が有名ですが、そのパフォーマンスを改善するテクニックを紹介します。 Replacing the -9999px hack (new image replacement) [ad#ad-2] 画像置換:-9999px 改善したテクニック 画像置換:-9999px -9999pxを使った画像置換のテクニックは、下記のようになります。 HTMLは見出し要素で実装します。 HTML <h3 id="sample06">見出しのテキスト</h3> 「text-indent:-9999px;」でテキストを見えない位置にし、見出しとなる画像を背景画像として表示します。 #sample06{ width:300px; height:50px; background:url('bg-01.gif') no-repeat 0 -250p
iPhoneブラウザの特徴の一つとして、画面を左右に90度傾けると画面の中もそれに合わせて回転する機能があります。 そのため、画面幅に合わせて伸縮するリキッドレイアウトとしてデザイン・コーディングしますが、中にはそれだけでは難しいものもあります。 そこで、傾きに合わせてbodyのclassを切り替えるjqueryのjavascriptを紹介します。 サンプル サンプル ※iPhoneで見てみてください。 ダウンロード tilt.zip 使い方 ダウンロードしたtilt.jsをjquery.jsと一緒に読み込むだけで動作します。 用途 縦横でボックスの幅を切り替える 縦横で背景色を切り替える 縦(または横)の場合だけ表示する文章や画像を設置する 縦に最適化されたサイズのまま、横の場合はそれを中央寄せにして表示する 等々... 仕組み 仕組みはとても単純でwindow.orientatio
Speech Bubbles With 100% CSS Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad mi
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.
こんにちは、鴨田です。 個人的に仕事の大半はスマートフォン関連なので、 最近のマークアップはほとんど全てHTML5+CSS3で行っています。 とはいえ、PC向けのサイトではまだまだHTML4.01、XHTML1.0、CSS2.1を使用している場合が多いと思います。 ですので、今回はHTML5+CSS3を導入するにあたって、役立つと思う7つの設定について、書きたいと思います。 1.HTML5の初期テンプレート案 <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>HTML5 初期テンプレート</title> <!-- reset.cssの設定 --> <link rel="stylesheet" media="screen" href="reset.css" /> <!-- Viewportの設定 --> <meta nam
Support Us If you would like to support CSSPortal, please consider making a small donation. Donations Visually generate a CSS responsive menu, this generator will help you design a CSS menu for your website, you can update any property and instantly see the changes that you have made. All of the CSS, HTML and Javascript code is generated for you and can be copy and pasted into your webpage. Update
Today, we’re excited to offer a free vector seamless background pack designed by Vectorious. These backgrounds can be used in any aspect of design, from web backgrounds to apparel and flyer designs. The pack includes six vector background Illustrator EPS source files that can be easily customized with any color. Additionally, there are six colored previews and six black and white previews to help
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サイトを読んでCSSセレクタの高速化の話しが面白かった(というか全然知らなくてちょっとびびった)ので紹介します。 セレクタは右から左に解釈される これは正直知らなくて、結構衝撃でした。 #foo .bar {} これはなんとなく#fooを探して、その中の.barを探している気がしてたんですけど、実は.barを探して、その親要素に#fooがあるかを探すそうです。なので特に#fooが必要なければ .bar {} と書いたほうが高速だということ。 また、以下の様に要素名で指定すると、その要素を全て探します。 #foo a {} これは一度a要素を全て探すので、できればaにclassをふって #foo .anchor {} とするほうが高速のようです。(#fooをとるとより高速) 特にユニバーサルセレクタなどは、 #foo * {} とすると、全ての要素の親要素に対して
「タブパネル」はタブ(見出し)をクリックすると、パネル(タブの内容が書かれた部分)が切り替わるUIです。アコーディオンパネル(関連記事)と同じく、情報量に対して表示スペースが少ない場合に使われます。Yahoo!やlivedoorなどの大手ポータルサイトがトップページで採用していることもあり、現在では多くのユーザーが迷わず操作できるUIとして定着しています。 基本のタブパネルの作り方 タブパネルのHTML/XHTML(以下、HTML)は、タブ部分(見出し)とパネル部分(表示する中身)をul/li要素を使って別々にマークアップし、タブのul要素には「tab」、パネルのul要素には「panel」というclass名を付けます。 パネル部分は、タブが選択されたときに表示する内容をli要素で1つずつ記述していき(1タブ項目=1つのli要素)、それぞれに「tab1」「tab2」……といった連番のid名を
画像をタブとして使いたかったので 画像をボタンとし、デフォルト、オーバー、アクティブでそれぞれ画像が切り変わるタブメニューを作りたいなと思い、jqueryでサクッと出来るサンプルとかあるかなと思ったけど無かった・・・ という事で こちらのサンプルを元にカスタマイズさせていただきました↓ JavaScript でタブ切り替え UI を実装する | WWW WATCH このサンプルはjsを切った時に、一覧としてページ内遷移で動くところがステキですね。 今回はせっかくなのでindexページから表示部分を制御するのもやってみました。 その辺に関してはコチラ↓ GETメソッドでパラメータを受け取るJavascript 出来たもの ・demo1 ・demo2 ※パラメータの?page=の値がタブの番号 ページ内に複数設置できるようにもしたー。 コメントととか付けてないのであとで見直した時に困りそう。
jQueryを利用してアコーディオンを用意するサンプルです。使い勝手がよいようにシンプルな作りにしました。見出しをDT、中身をDDとして記述するため、HTMLのマークアップ的にも悪くないはずです。見た目はスタイルシートで自由にカスタマイズできます。 ひとつめ 中身は何でも可。 ふたつめ みっつめ YouTubeで見かけたにゃんこ。 導入方法は簡単です。まずはHEAD要素内に以下の行を追加してjQueryを利用できるようにします。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> ここではGoogleからjQueryを読み込んでいますが、自分のWebサイトにjQueryを置いて、それを読み込ませるようにしても問題ありません
ページカールをプロっぽくする処理 ページの背景部分を描きます。 いきなりページのめくれ部分を作成せず、めくれた部分の背景部分の図形を描きます。 ペンツールを選択し、上記のような三角形を描きます。 次に、その三角形にアンカーポイントを追加します。ペンツールで任意の位置にワンクリックすれば、アンカーポイントを追加することができます。アンカーポイントが追加できたら、ダイレクト選択ツール(白矢印)に持ち替えて、頂点部分を選択します。選択後、ビューと下に伸ばします。結果的に下記のようになっていれば良いかと思います。 ページのめくれた部分を描きます。 今作成した三角形(変形)を枠の左上に配置し、その線に沿うように、ページのめくれた部分をペンツールで描いていきます。この時、始点を上記のあたりから始めて、手順1の三角形(変形)とうまくなじむようにめくれ部分を描くのがプロっぽく見えるポイントではないかと思い
These lovely water-colorful dots will make your designs pop...
今回のシステムではIE6でも動かなきゃダメってことになったんだけど、IE6では日記タイトルのような問題が発生してしまう。 こんな感じで↓ 画面下に見えてる小さいダイアログの上に、裏側のプルダウン(セレクトボックス?)が見事に前面にでてきちゃってます。 そこで、bgiframeというjQueryのプラグインを使って対応することでこの問題が解消されるみたいです。(情報提供してくれたid:stokiwaくんとid:debit-credit-monkeyに感謝です) http://plugins.jquery.com/project/bgiframe 使い方は簡単。上のページからダウンロードして展開したディレクトリの中にあるファイル「jquery.bgiframe.min.js」を読み込むようにしておき、 <script type="text/javascript" src="js/jquery/
DTPの勉強部屋、PAGE2010などのセミナーでご紹介した、立体的な文字を作るチュートリアルです。 ロゴやその他に、わりと使いどころはあるんじゃないでしょか。 先ずは準備。書類のモードはRGB、単位はピクセルに設定します。 まず文字。このチュートリアルでは数字の6でいってみましょう。 Myriad Pro、Semibold、300ptです。色は仮に#CCCCCCに指定。 これに 効果 > 3D > 押し出し・ベベル で3Dの効果をつけます。 それぞれ上から -30° / 18° / 4° 押し出しの奥行き:54pt 表面:陰影なし を選択します。 オブジェクトメニュー > アピアランスを分割 で、効果をオブジェクトに変換し、全部をグループ解除しておきます。 分割されてしまっている同じ面を、それぞれ選択して、パスファインダで合流します。 全部ひっくるめて選択し、0%:#8CC63F > 1
以前にもUIデザインやワイヤーフレームに便利なデザインキットをまとめたエントリーをご紹介しているのですが、新しいフリー素材がたくさん公開されていましたので、再度まとめることにしました。 海外デザインブログSpeckyboy Design Magazineで、モバイルやウェブサイトのUIデザインで使えるPhotoshop用デザインキットを30個まとめたエントリー「30 Fresh Web UI, Mobile UI and Wireframe Kits」が公開されていたので、今回はご紹介します。 iPhoneやAndroidなどのスマートフォンやiPadなど忠実に再現したPSDファイルや、思わずクリックしたくなるようなボタン、UIデザインなど利用することで制作時間の短縮になるアイテムが揃っています。 まだ確認していないデザイン素材キットがないか確認してみてはいかがでしょう。 詳細は以下から。
タグ一覧 タイトルロゴ(159) プライマリナビゲーション(72) グローバルナビゲーション(246) メインビジュアル(95) 見出し(326) 文字装飾(10) アクセント(29) サイドメニュー(142) ログインフォーム(68) タブ(55) テーブル・表(23) 地図(12) 特集バナー・内部リンク(525) Twitterアイコン・バナー(64) RSSアイコン・バナー(41) フォーム(9) アイコン(195) <前へ 次へ>(12) 検索窓(149) パンくずリスト(12) このページのトップへ戻る(52) フォントサイズ変更ボタン(34) 問合せ・送信・購入ボタン(72) 電話番号(41) フッター・コピーライト(99) ニュース・ポータル・検索(207) ファッション(200) 音楽・ゲーム・コンテンツ配信(58) ネット関連サービス(86) オンラインショップ(308
CSS Trickのエントリーから、IE6でよく遭遇する6つのバグとその解決方法の紹介です。 IE CSS Bugs That’ll Get You Every Time ボックスモデルのバグ マージンが二倍になってしまうバグ min-width, min-heihgtと同等の指定 Stepdownバグ hover擬似クラスをa要素以外にも対応 透過PNGを透過表示に対応 ボックスモデルのバグ <textarea name="code" class="css" cols="60" rows="5"> div#box{ width:100px; border:2px solid black; padding:10px; } </textarea>
さて、前回はWeb制作の際の必須の技術とも言えるCSSでロールオーバーを実装する方法の一つ目として、CSSスプライトを使った方法1(background-positionを使用)をご紹介しました。今回は2つ目の方法をご紹介します。 ここで紹介するロールオーバーを実装する3つの方法 CSSスプライトを使った方法1(background-positionを使用) CSSスプライトを使った方法2(ネガティブマージンを使用) ←今回 CSSの背景と画像を重ねる方法(hover時にvisibility:hiddenを使う) 2. CSSスプライトを使った方法2(ネガティブマージンを使用) さて、今回も前回と同じように、まずは制作するナビゲーションメニュー全体の通常時の画像とマウスホバー(hover)時の画像を以下のように一つにまとめます。各メニューは幅91px高さ28pxで全てを一つにまとめた下の画
As the year draws to a close, we tend to take a look back over the year and take stock. This post is here to not only sort of serve that purpose, but to also stock up on some of the year's top free texture packs from around the web. Knowing how much use the web design community gets from resources like these, we felt like it would close the year in style to showcase some of 2011's freshest and mos
CSSやJavaScriptを使って、IE6, IE7, IE8, IE9 とIEの異なるバージョンごとにスタイルシートを適用する方法のまとめを紹介します。 Use Different Styles For Different Internet Explorer Versions [ad#ad-2] 下記は各ポイントを意訳したものです。 CSS: 条件付きコメント(class) CSS: 条件付きコメント(外部スタイルシート) CSS: CSS Hack JavaScript JavaScript: jQuery おまけ CSS: 条件付きコメント 条件付きコメントを使用して、ドキュメントの一番上の要素(html)にIE6/7/8用のclassを付与します。 HTML <!--[if IE 6]> <html class="ie6"> <![endif]--
These lovely water-colorful dots will make your designs pop...
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く