[CSS]HTMLは汚さずに、ディテールにこだわったリボンをつくるチュートリアル
HTMLはclassを一つ追加するだけで、リボンを折り返したスタイルを適用するチュートリアルを紹介します。 Create a Swish CSS3 Folded Ribbon in Five Minutes デモページ [ad#ad-2] リボンの実装 HTML HTMLは非常にシンプルです。 h1要素にclassを付与するだけです。 <h1 class="ribbon">Swish CSS3 folded ribbon effect.</h1> Webフォントの設定 フォントも美しく表示されるように、Webフォントを利用します。 <link href='http://fonts.googleapis.com/css?family=Montez' rel='stylesheet' type='text/css'> このフォントはGoogle Web Fontの「Montez」を使用します。
[CSS]高さが可変のボックスに二重のボーダーを適用するテクニックのまとめ
デモページ：ボックスの高さを拡張 以下は、これらの5つの実装方法と解説を意訳したものです。 Method 1: borderとoutline Method 2: 疑似要素 Method 3: box-shadow Method 4: div要素の追加 Method 5: border-image [ad#ad-2] Method 1: borderとoutline borderプロパティとoutlineプロパティを併用します。 この方法はoutlineプロパティをサポートするブラウザだけうまくいきます、つまりIE6/7以外です。 .one { border: solid 6px #fff; outline: solid 6px #888; } この方法が機能するのは、outlineがボックスの外に配置されるためです。outlineを使用する際の問題点は、周りのエレメントに影響を与えないとい
100以上のハイクオリティなXHTML/CSSフリーテンプレート「100+ Stunning XHTML/CSS Free Templates [HQ] 」
TOP > WebDesign > 100以上のハイクオリティなXHTML/CSSフリーテンプレート「100+ Stunning XHTML/CSS Free Templates [HQ] 」 制作に便利なフリーテンプレート。デザインやレイアウトによってはそのまま、もしくはサイト制作のベースとして便利に利用できますが、今日紹介するのは、100以上のハイクオリティなXHTML/CSSフリーテンプレートを集めたエントリー「100+ Stunning XHTML/CSS Free Templates [HQ] 」です。 Download Harvest 数多くのフリーテンプレートがまとめられていますが、今日はその中から特に気になったものをピックアップして紹介したいと思います。 詳しくは以下 ■Download Imagination シンプルながらも、ドロップシャドウや、細かな処理で立体
![100以上のハイクオリティなXHTML/CSSフリーテンプレート「100+ Stunning XHTML/CSS Free Templates [HQ] 」](https://cdn-ak-scissors.b.st-hatena.com/image/square/29dfb44458400fed264d895b28edab2d22bb816f/height=288;version=1;width=512/https%3A%2F%2Fdesign-develop.net%2Fwp-content%2Fuploads%2F2011%2F03%2Fharvest.jpg)
Webサイトの基本要素 見出し・リスト・引用文のスタイルを整える
2014年8月20日 CSS Webサイトを装飾していく時に無視できない要素、見出し・リスト・引用文。特にWordPressでオリジナルのテーマを作る時は、ブログ用にこれら基本の要素すべての装飾もすると思います。そんな時に使うコードのバリエーションをメモしていたので記事にしました。少し変えるだけで応用できると思うので、ぜひ使ってみてください！ ↑私が10年以上利用している会計ソフト！ 色、フォント、サイズなどを変えるだけで、どんなサイトでも使える見出し・リスト・引用文用のHTMLとCSSコードを紹介します。そのままコピペして使っちゃってください。少しはコーディングの手間が省ける…かもしれません。ちょいちょい使っている画像も保存して使ってもらってもOKです :) サンプル画面内の「HTML」「CSS」タブをクリックでコードが表示されます。IE6, 7, 8, FF, Chrome, Safa
CSSによるサイトのバックグラウンド作成テクニック集:phpspot開発日誌
Basic Web Page Background Techniques with CSS CSSによるサイトのバックグラウンド作成テクニック集が紹介されています。 テクニックといってもCSSが少しわかれば実現できるテクニック集ですが、パターンとして認知しておくことは重要かもしれません。 パターンだけでなく、CSSコードも紹介されているので、入門という方にも安心して参考に出来ます。 単色パターン 背景画像をリピートで使う例 グラデーションを使う例( repeat-x 使用) 大きめの背景画像を固定で使う例( background-position, no-repeat 使用) あとはスクロールしてもバックグラウンドがついてくるパターンなんていうのもありますね。 重いという理由で実装されると嫌われる傾向にあるかもしれませんが。 関連エントリ デザイナーが知っておくべき背景画像のリソースサイト
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
秀逸なテーブルデザインのパターン集:phpspot開発日誌
Ultimate guide to table UI patterns 秀逸なテーブルデザインのパターン集をまとめたエントリのご紹介です。 デザインだけでなく、見やすさや分かりやすさという点にも気を配りたいテーブルデザインは比較的難しいものになりますね。 テーブルデザインの例を知っておくことで、難しいテーブルのデザインをする際にも参考に出来そうです。 Apple のデザインっぽいテーブル 複雑なデータをわかりやすくスタイリッシュにまとめたテーブル 画像なども盛り込みつつ見やすいテーブル シンプルに見やすいテーブル JavaScript の入ったものも入ってきますが色々なテーブルを見てストックしておくと後に役立ちそうです。 関連エントリ CSSでデザインしたクールなテーブルのサンプル集 CSSでデザインされたテーブルレスでクールなフォームサンプル
CSSハック一覧
2013年3月23日 CSS 異なるブラウザーで見たらレイアウトが崩れる。。CSSハックはそんな時のお役立ち裏技（？）です。私がブックマークしているCSSハックに関するWebサイトがたくさんあったので（Safariがのってない・IE8しかのってない。。等の理由で）、自分用メモ。「こんなやり方もある！」というのがあればコメントして教えてください！ ↑私が10年以上利用している会計ソフト！ Internet Explorer IE6以下 #help_me { _color: blue; } * html #help_me { color: red; } IE7 *:first-child+html #help_me { color: red; } *+html #help_me { color: red; } IE6, IE7 #help_me { /color: blue; } IE8 #h
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
