今回は見出し（h1〜h6タグ）のオシャレなデザインサンプルを68つ紹介します。CSSコードをコピペすればそのまま使うことができます。もちろん自分好みにカスタマイズして使って頂いても構いません。
CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選
今回は見出し（h1〜h6タグ）のオシャレなデザインサンプルを68つ紹介します。CSSコードをコピペすればそのまま使うことができます。もちろん自分好みにカスタマイズして使って頂いても構いません。
normalize.cssで使用されている各スタイルがどのように機能しているか解説
先日紹介した「sanitize.css（紹介記事）」や「Marx（紹介記事）」などリセット用CSSの新しいアプローチが増える中、ブラウザごとの要素の相違を吸収するのに人気なのはまだまだ「normalize.css」でしょう。 そのnormalize.cssも細かい改良が重ねられ、最新のバージョンは3.0.3になっています。 normalize.cssで使用されている各スタイルが、どのように機能しているか確認してみましょう。 normalize.css normalize.css -GitHub ※3.0.3はGitHubからダウンロードできます。 normalize.cssの特徴 html, body, :rootなどの全体系の定義 HTML5の新要素用の定義 リンク系の定義 テキスト系の定義 埋め込みコンテンツ系の定義 グルーピングコンテンツ系の定義 フォーム系の定義 テーブル系の定義
Flexboxの勉強にも実務にも役立つ！レスポンシブ対応の柔軟なグリッドが簡単に実装できる -Flexbox Grid
企業サイトやブログなどで使われるシンプルなグリッドをはじめ、オフセットのカラム、ネストのグリッド、左・右・天地揃えと中央揃え、逆順配置など、柔軟なグリッドが簡単に実装できるスタイルシートを紹介します。 Flaxboxを勉強したい初心者から、簡単に使いたいと考えてるベテランまで、勉強にも実装にも役立つ便利なスタイルシートです。 Flexbox Grid Flexbox Grid -GitHub Flexboxの各プロパティの解説は、下記ページをご覧ください。 最新のドラフトに準じた CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 Flexbox Gridで実装された柔軟なグリッド Flexbox Gridの使い方 Flexbox Gridで実装された柔軟なグリッド Webデザインで使うさまざまなグリッドをclassをちょちょいと加えるだけで実装できます。
CSSでグラデーションを使うときにhsl()が便利すぎる。（CSS おれおれ Advent Calendar 2012 – 19日目） | Ginpen.com
CSS おれおれ Advent Calendar 2012 – 19日目 CSS 3では色の指定にhsl()を使う事が出来ます。すなわち色相 (Hue; 0-359)、彩度 (Saturation; 0%-100%)、輝度 (Lightness; 0%-100%) による色の指定です。さらに不透明度を加えたhsla()もあります。 グラデーションをlinear-gradient()で実現するとき、このhsl()を使うと綺麗に記述する事が出来ます。 実例 こんなグラデーションを実装します。 #rrggbbを使ったグラデーションの例 まずは#rrggbbで書いた例です。 background-image: linear-gradient( top, #ffffff 0%, #a3daf5 50%, #75c7f0 51%, #19a1e6 100% );
これなら分かる！WEB制作を無料で「学べる」サイトまとめ
作成：2013/02/4 更新：2014/11/01 Web制作 > 基本的なところを簡単に、楽しく覚えたい 自分でサービス作ったり、会社や違う職種でも 色々と「基本」はおさえておきたい 今回はサイト制作に必要な「基本的な知識・情報」を、分かりやすいサイトを中心にまとめました。必ずおさえておきたいスキル・知識です。 エンジニア速報は Twitter の@commteで配信しています。 もくじ １．HTML5 ２．CSS ３．レスポンシブ ４．配色 ５．視線誘導 / 心理学 ６．インターフェース / ユーザビリティ ７．SEO ８．ディレクション ９．アクセス解析 １０．WEBマーケティング １１．コピーライティング １２．ソーシャル １．HTML5 HTML5って何？ HTML5とは何かを簡単にまとめてみた - Yahoo! JAPAN Tech Blog Canvasについて知っておく
これは見ておくべきCSS3＆HTML5の実験１６サイトまとめ:phpspot開発日誌
16 Ridiculously Impressive CSS3 & HTML5 Experiments | Free and Useful Online Resources for Designers and Developers これは見ておくべきCSS3＆HTML5の実験１６サイトまとめ 数年前なら誰もがFlashで出来ていると疑わなかったようなデモがHTML5＆CSS3で実現されています。 これだけのことがWEBでできるんだという部分を把握しておく意味でも見ておいたほうがよさそうです これだけ出来ることが増えていくと自由な反面、WEBも開発コスト等があがっていきそうで怖いところがありますね 関連エントリ WebCamで撮影をHTML5で実現するデモ HTML5を使ったクールなサイトデザイン集２１ HTML5のゲームエンジン「Quintus」
『モバイル時代におけるCSSの設計と実装』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして、こんにちは。 ネット総合事業本部プラットフォームDivの斉藤です。 今回は私の所属している部署からは初の1pixelへの寄稿となるそうです。 CSS開発のアプローチほぼ同時期にモダンウェブ開発に欠かすことが出来ないと言われるようになったJavaScriptと比べると、CSSにおける設計、という話題はなかなか出てきません。 単純なウェブサイトを作る際にはあまり気にしてこなかった部分ですが、ウェブアプリを制作している我々の仕事には欠かすことが出来なくなってきています。 ほかのプログラミング言語に比べると圧倒的に非力な言語だからこそ、ほかのプ
HTML5で組んでるならこの魔法のjsも入れておけっていう話
現在、A!@attripさん発で話題になっている「たった2行でIE5.5～IE8をモダンブラウザの挙動にする魔法のJS」という記事。 Webデザイン界隈では当たり前のものですが、実はもうひとつ追加しておくといいかもしれないjsがあったりします。 Photo:html5 By michael pollak IE8以前のブラウザはどうにもこうにも開発者泣かせなわけですが、ie9.jsとcss3-mediaqueries.jsを突っ込むことで、モダンブラウザと同じ挙動にすることができちゃいます。 もう少し具体的に書くと、ie9.jsを組み込むことで、 position:fixed;に対応 max-width、max-heightに対応 属性セレクタ、擬似クラスに対応 margin:0 auto;でのセンタリングに対応 透過PNGに対応 opacityに対応 といったことが可能になります。要はCS
CSSのみ画像不要の吹き出しの作り方を若干丁寧に解説してみる
WEBページの演出で吹き出しの中にテキストが入ってるのをよく見かけますが、あれのやり方をかなり最近まで知らなかったゴロドクさんです、どうも。 CSSのbefore/after擬似要素の説明で吹き出しのサンプル紹介してるんですけど、今回はそれについてもうちょっと詳しく書いておこうかな、と。 吹き出しの矢はボックスのボーダーで描画します ベースとなるHTMLは以下の1行のみです。 <p class="balloon">ゴロドクさんイケメン過ぎて泣けた！</p> クラス指定なので１つCSS定義しておくと同じ演出を繰り返し使えますね。 divタグネストとかでも同様のこと出来るんですが、HTMLソースがスッキリするのでbefore/after擬似要素を利用します。ご存じない方は事前に 劇的！（でもない）before after 擬似要素の使い方まとめ | 56docブログ を読んでおくと分かり良いと
HTML5, CSS3, JSでマルチプラットフォームのデスクトップアプリを作れる「TideSDK」:phpspot開発日誌
HTML5, CSS3, JSでマルチプラットフォームのデスクトップアプリを作れる「TideSDK」 2012年09月12日- TideSDK | Create multi-platform desktop apps with HTML5, CSS3 and JavaScript HTML5, CSS3, JSでマルチプラットフォームのデスクトップアプリを作れる「TideSDK」。 元々はTitaniumDesktopとして開発されていましたが、TideSDKという名前になったっぽい。 Windows, Mac, Linux のアプリをWEB開発言語で開発できるTitaniumMobileみたいな仕組みです。 スマホだけじゃなくてやっぱりデスクトップアプリも欲しいということがありますから、こういう仕組みでさっくりとやってしまいたいですね。 Windows版アプリ Linux版アプリ Mac
秀逸なアイデアが素晴らしい！CSS3を使ったホバーエフェクトのまとめ
画像やパネルのホバー時に、CSS3アニメーションを使った気持ちのいいエフェクトを実装するチュートリアルをまとめました。
[CSS]タブコンテンツにCSS3アニメーションを少しだけ加えてかっこよくするチュートリアル
JavaScriptを使用しないで、スタイルシートでタブコンテンツを実装するポイントから、コンテンツの切り替えやタブのフォーカス時にちょっとしたCSS3アニメーションを加えるチュートリアルを紹介します。 Demo 4: 垂直型タブ 実装 HTML タブの各コンテンツはdiv要素で、タブはinput要素で実装します。input要素のチェックでタブを切り替えます。 <section class="tabs"> <input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" checked="checked" /> <label for="tab-1" class="tab-label-1">About us</label> <input id="tab-2" type="radio" name="radio-set"
[CSS]CSS3アニメーションを効果的に使ったResponsiveコンテンツ用のナビゲーション
Demo 5 上から順に回転します。 実装 Demo 1を例に、実装方法を紹介します。 HTML パネルにはh2要素、リンク、パラグラフを配置しており、一番上に各パネルへのリンクをnav要素で配置します。 <section class="cn-container"> <div class="cn-slide" id="slide-main"> <h2>Explore this</h2> <nav> <a href="#slide-1">Philosphy</a> <a href="#slide-2">Science</a> <a href="#slide-3">Literature</a> </nav> </div> <!-- Slide 1 and sub-slides --> <div class="cn-slide ts-slide-sub" id="slide-1"> <h2>Ph
[CSS]画像無しで、両端にいくにつれ薄くなるラインを描くテクニック
デモページ [ad#ad-2] 実装 全コードはデモページに記載されているので、ここではラインのスタイルをピックアップします。 HTML マークアップはシンプルなリストで、ul要素にclassを指定するだけです。 <ul class="container"> <li>First list item</li> <li>Second list item</li> <li>Third list item, etc.</li> </ul> CSS 両端がフェードするラインはCSS3グラデーションで、linear-gradientを使います。 シンプルに書くと下記のようになります。 background–image: linear–gradient(rgba(0,0,0,0), rgba(0,0,0,0.1), rgba(0,0,0,0)); 両端が「0」で、真ん中が「1」です。 また、このグラデー
Youtubeの動画を背景に
Introduction In the ever-evolving landscape of web browsing, staying abreast of the latest technologies is crucial. HTML5, the fifth and current version of the Hypertext Markup Language, has revolutionized the way we experience the web. With its advanced features and enhanced capabilities, HTML5 has become the cornerstone of modern web development, offering a more seamless and interactive user exp
CSS3を極めたいなら知っておきたい三角形を作る3つの方法
CSS3を使い始めていくと、ぶつかる壁に「三角形みたいに尖った角」をどう表現するかというのがあります。三角形って思ったより難しいです。 まぁ無理しないで、イメージで作ればいいんですけど、ちょっとした装飾だったりすると、ちょこっとCSSで作れると楽な時もあります。 そこで、CSS3で「三角形みたいに鋭角を作る方法」を３つ紹介します。ここで紹介する方法には、メリットとデメリットがありますので、使い分けれるようになるといいと思います。 1. グラデーションを使う こちらの記事でも紹介しましたが、背景を background-size と background-position で4分割して、斜めのグラデーションを使うことで角を落とすことができます。 コード 4分割して、4つのグラデーションでそれぞれを塗ります。この方法では、塗りを使っているので、カスタマイズ性が高いですが、グラデーションを使って
立体感がいい感じの３Dギャラリー作成JSチュートリアル:phpspot開発日誌
How to make a 3D gallery using javascript ? Script Tutorials 立体感がいい感じの３Dギャラリー作成JSチュートリアル。 奥行きのある空間内を画像がダイナミックに動くギャラリーを作るチュートリアルです。 パッケージのダウンロードとデモが体感できます。 覚えておくとこうした演出がほしい場合にすぐ実装できそうですね。 最新のブラウザでみれば動きもわりとなめらかでストレスになりません。 関連エントリ CSS3をフル活用した立体的な画像ギャラリー作成デモ CSS3な背景パターンのギャラリーサイト「CSS3 Patterns Gallery」 HTML5を使ったサイトをまとめたギャラリーサイト色々 超カッコいいApple風スライドショーギャラリー作成チュートリアル
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
html5-memo.com
Loading...
