無料でしかも高品質！1ページで構成されたサイトを作るためのHTML5/CSS3のテンプレートのまとめ | コリスページのデザインだけでなく、使用されているエフェクトも面白いものが揃っているレスポンシブ対応のHTML5/CSS3のテンプレートを紹介します。 単に使うだけでなく、HTML5/CSS3の勉強、デザインの勉強にもいいですね。 “HALCYON DAYS” ONE PAGE WEBSITE TEMPLATE デモページ 大きな写真画像を使った背景とそれを使ったパララックスエフェクトが美しいポートフォリオやランディングページ用のテンプレート。 個人・商用利用無料。
[JS]動画をブラウザいっぱいやエレメントの背景として配置できるスクリプト（スマホにも配慮） -Vide
.mp4, .webm など、動画をブラウザいっぱいやdivなどのエレメントの背景として配置できるjQueryのプラグインを紹介します。 デスクトップでは動画が再生され、スマホでは仕様のため代替の静止画像が表示されます。 デモページ iOSでは動画はネイティブのプレイヤーのみ再生可能なので、静止画像が表示されます。Androidでは一部の機種で動画が再生されてしまいますが、基本的には静止画像が表示されます。 Videの使い方 Step 1: 外部ファイル 当スクリプトとjquery.jsを外部スクリプトとして記述します。 <body> ... <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="js/jquery.vide.min.js"></scr
[CSS]背景画像をブラウザいっぱいに表示するシンプルな最新テクニック
背景画像をブラウザいっぱいに表示するスタイルシートのシンプルなテクニックを紹介します。 デスクトップだけでなく、スマフォやタブレットにも対応、しかもたった一行なのでスニペットに加えておくと便利です。 デモを幅480pxで表示 コンセプト 「background-size」をビューポート全体をカバーするために使う 「background-size」はレスポンシブ対応にする時に非常に有効なプロパティです。値に「cover」を使うことで、背景画像を相対的に自動で調整します。 ※IE8以下はサポートしていませんが、後述のスクリプトを使用するとbackground-sizeが機能するようになります。 「Media Queries」をスマフォ対策として使う スマフォなどの小さいサイズのスクリーン用にMedia Queriesを使って、小さいサイズの画像ファイルを使うことができます。もっともこれはオプシ
[CSS]OS X Yosemiteのように背景が透ける美しいパネルを実装するスタイルシート
昨日発表された2014年秋リリースのOS X 10.10 Yosemiteで採用予定の背景を半透明のブラーで透けさせる美しいパネルを実装するスタイルシートを紹介します。 記事は一日遅れですが、スタイルシートは当日で、仕事が早いですｗ OS X Yosemite Style UI ※Chrome, Safari, Firefox, IE11でどうぞ。 コードは、簡略化するとこんな感じになります。 実際のコードは上記ページを参考にしてください。 HTML タイトルのバーとコンテンツをdivで実装し、articleで内包します。 <article> <div class="title"> <h1>タイトル</h1> </div> <div class="content"> <p>コンテンツ</p> </div> </article> CSS 半透明のパネルのスタイルシートです。 *, *:aft
スクリプト無し、動画をページの背景いっぱいに表示する方法
jQueryなどスクリプトは一切使わずに、HTML5+CSSで動画をウェブページの背景いっぱいに表示する方法を紹介します。 フルサイズのデモ IE8などHTML5のvideo要素に対応していないブラウザでは、代替の背景画像が表示されます。 実装は、非常にシンプルです。 HTML 動画はbody内の一番下にvideo要素で配置し、その上には通常通りコンテンツを配置できます。 <body> ... コンテンツ ... <!-- 背景に設置する動画 --> <video autoplay loop poster="http://mattgrossdesign.com/raw-media/first-frame-screencap" id="video-background" muted> <source src="http://mattgrossdesign.com/raw-media/wood
[CSS]実装のアイデアが面白い！枠線から背景をずらして配置するスタイルシート
枠線から背景をずらして、ゆる〜い感じにデザインされたスタイルシートを紹介します。 HTMLはbutton要素一つで実装されており、二つの要素をマイナスマージンで強引に重ねるとかの荒技ではないです。 デモページ 実装は、こんな感じです。 HTML button要素一つで実装します。divなど他の要素に変更してもOKです。 色の違いはclass指定で。 <button class="yellow"> View More </button> <button class="blue"> View More </button> CSS 枠線は通常通りbutton要素にスタイルし、ずらした背景は疑似要素の:afterを使います。 ちょっとだけ傾けるのがポイントです。 body {width:70%;text-align:center;margin:40px auto;} button { positi
[JS]指定した要素内いっぱいに背景画像を最適に配置するシンプルなスクリプト -Wallpaper
幅480pxで表示 Wallpaperの使い方 Step 1: 外部ファイル jquery.jsと当スクリプトを外部ファイルとして記述します。 <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> <script src="js/jquery.bp.wallpaper.js"> Step 2: HTML HTMLは通常通りで、背景画像を配置する要素は指定できるようidなどを加えます。 <header id="element"> ヘッダ </header> 複数箇所を適用する時は、classの方が便利です。 Step 3: JavaScript jQueryのセレクタで要素を指定し、sourceに画像を指定し、スクリプトを実行します。 $("#element").w
[JS]ベタ塗りのエレメントやページの背景に、繊細で美しいグラデーションを与えるスクリプト -Add Shine
ベタ塗りのページ全体の背景やボタンなどのエレメントなどの背景に、繊細で美しい輝きをもったグラデショーンを与えるjQueryのプラグインを紹介します。 グラデーションの適用 Add Shineの使い方 Add Shineの使い方は、簡単です。 Step 1: 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.js"></script> <script src="js/addShine.js"></script> Step 2: HTML HTMLはスクリプトを意識することなく、普通に実装します。 <body> <button>ボタン</button> </body> Step 3: CSS ページの背景とボタンは、ベタ塗りにします
[CSS]テキストの天地に美しいグラデーションのボーダーと背景を適用するスタイルシート
p要素などで実装したテキストの天地に、美しいグラデーションのボーダーと背景を適用するスタイルシートのデモを紹介します。 カルピスもちはおやつにもらったのがおいしかっただけで、スタイルシートには何の関係もありません。 上記は当方でテキストやサイズを変更したもので、デモは下記にあります。 Gradient Borders 実装はシンプルなので、他にも応用がききそうですね。 HTML p要素をdivで内包します。 <div class='backbox'> <p>This is the future.<br>Live it & love it.</p> </div> CSS まずは、Webフォントと背景カラーの設定です。 @import url(http://fonts.googleapis.com/css?family=Josefin+Slab); html { background-colo
[CSS]JavaScript無し、レスポンシブ対応、背景をコンテンツのスクロールに合わせて変更するスタイルシート
デモを幅780pxで表示 実装 実装は、5ステップです。 Step 1: 背景画像の用意 デモでは4つのコンテンツがあるので、3枚の背景画像を用意しています。一番大きい表示サイズを想定して、1,800x1,200pxの画像です。 Step 2: HTML HTMLは非常にシンプルです。 4つの各コンテンツはrapperのclassを付与したdiv要素で配置し、header, section, section, footerで内包します。 <!DOCTYPE html> <html class="no-js" lang="en"> <head> <meta charset="utf-8"> <title>From love for lavender</title> ... </head> <body> <header class=" content"> <div class="wrapper
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
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[CSS]背景画像に関する実用的なスタイルシートのテクニック集