H1一つでここまで出来るCSS見出しデザインのアイデア9個 / SQUEEZE - Web Design Studio -
HTMLはh1要素だけで、CSSの「border」や「box-shadow」「transform」「linear-gradient」、擬似要素の「:before」や「:after」を使った見出しデザインをご紹介します。まずはサンプルをご覧ください。 サンプルページ » 01.切り取り線 紙を切り取ったようなデザインです。 サンプルとソースを見る » ポイント垂直方向の影のオフセット距離を設定しただけでは、左右両脇にも影ができてしまうので、一旦5px下に影をオフセットしたうえで、広がり距離を負の値(-4px)にし縮小することで、上部の影のみを残しています。 border-top:1px dashed #aaa; border-bottom:1px dashed #aaa; background:#eee; text-shadow:1px 1px 0 rgba(255,255,255,1);
Webデザインを向上させる8つのレイアウト | エンタープライズ | マイコミジャーナル
Smashing Magazine - WE SMASH YOU WITH THE INFORMATION THAT WILL MAKE YOUR LIFE EASIER, REALLY. Webデザインにおいて、コンテンツをどのようにまとめ、どのレイアウトで表現するかは大事な課題だ。すでによく使われているレイアウトと、それが何の目的で使われているのかは明かになっている。そうした人気のあるレイアウトとその目的を知ることは、Webページをデザインする際の資料として活用できる。 Matt Cronin氏がSmashing Magazineにおいて8 Layout Solutions To Improve Your Designsのタイトルのもと、使いやすい8つのレイアウトとテクニックについてまとめている。Webデザイナは一度チェックしておきたい内容だ。紹介されているレイアウトは次のとおり。 ス
Webdeveloperのダウンロード：ミナトラボ
ローカライズについて Web Develoerの日本語にかかわる問題が、ほぼすべて解決したことと、Infoaxia社から管理を移管したことを受けて、今後のWeb Developerのローカライズは、BabelZillaで行うことにしました。ローカライズの議論については、BabelZillaのディスカッションパネル、またはメッセージボードでやりとりできればと思っています。自分のアカウントは「minato」です。遠慮なくお声をかけてください。 Webdeveloperとは Web Developerとは、ウェブ制作を補助する拡張機能です。拡張機能は、Firefox, Seamonkey, Flockのツールバーとして組み込まれます。そのため、それらのブラウザが動作する環境であれば、OSに依存せずに利用することができます。現在、Windows, MacOS X, Linuxでの動作を確認していま
ブロックレベル要素をセンタリングする方法 - Web標準普及プロジェクト
ブロックレベル要素をセンタリングする方法 一昔まえはcenter要素やdiv要素にalign属性を付けてセンタリングするという手法が当たり前でした。 しかし、最近では見た目はHTMLではなく、CSSで指定するべきである、と言われだし、 現にcenter要素はHTML4.01 Strictや、最新のXHTMLでは使用できません(HTML4.01的には非推奨)。 そこでCSSによる正しいセンタリングの仕方をここで解説します。 正しいセンタリング方法 テーブルやdiv要素のようなブロックレベル要素をセンタリングするにはtext-alignは使いません。 text-alignプロパティはインライン要素の位置揃えを指定するためのものだからです。 Bugzilla-jpにも報告された多くのサイトでは"text-align:center;"を使ってセンタリングしようとしていましたが、 これによってブロッ
第2回 Webデザインの基礎はHTMLの構造にあり
今回のポイント テキストを読みやすくすることが最大の目的 まずテキストをHTML化して構造化すること HTMLタグは意味を持たせるものだけを使用する デザインについてざっと大筋の勉強をしてみましょう。デザインの根幹となる考え方はわずかに二つです。その二つとは「色」と「バランス」です。この二つを制することができたらデザインを制覇したと豪語してしまっても構いません。 Webデザインの場合はこの二大要素に加えて「読みやすさ」という要素を含めることができます（図1）。Webデザインというのは，そこに存在するコンテンツをいかに読みやすくしていくかが最大のポイントです。 近年，社会傾向として“活字離れ”が発生していると言われています。たしかに新聞や雑誌の発行部数は年々減少しています。しかし世間で何が起こっているのかといえば，実際には日本人は有史以降で一番文字を読む時代に突入しています。どこで字を読んで
W3C - W3Cの仕様書等の文書の日本語訳集
注意 日本語翻訳集は w3c-translators@w3.org メーリングリスト上で報告された日本語翻訳文書へのリンクを集めたものです． リンクされた翻訳はボランティアによって行われたものです． またこれらの翻訳には誤りが含まれる可能性もあります． 正式なものはあくまでも英語版ですので， この点をご理解頂いた上でご利用下さい． またコピーライトに関する情報を含め，W3Cの文書の翻訳に関しての一般的な情報や， 翻訳の際のヘルプは， http://www.w3.org/Consortium/Translation/にあるW3C翻訳ページ(英語版) をご覧下さい． TR集 勧告 ・ 勧告案 ・ 勧告候補 ・ 草案 ・ 技術ノート その他の文書等 FAQ集 ・ その他 TR集 勧告 HTML 4 (勧告) http://www.asahi-net.or.jp/~bd9y-ktu/html4re
HTML/CSS リンク集
HTML/CSS リンク集 HTML や CSS について理解するために参考となりえる Web リソースへのリンク集です。 リンク先の文書の全部が正しいとは限りません。特に、『教えて！goo』 の回答については、そのサイトの性質上、正しい回答に並んで間違った回答が書かれていることが多いので注意してください。 そもそも HTML とは? [教えて！goo] HTMLって何？ の回答 No. 2, 3 そもそも CSS とは? [教えて！goo] CSS（スタイルシート）について教えて下さい [教えて！goo] HTMLとスタイルシート スタイルシートの考え方・なぜ文書からデザインを分けるのか [教えて！goo] スタイルシートは難しい、、、 の回答 No. 1 [教えて！goo] レイアウトはテーブルよりＣＳＳですか？ の回答 No. 4, 5 [教えて！go
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://gold.boy.jp/mihha/asobi/