HTML5+CSS3
前回やった「jQueryのclickイベントを使ってtransformを適用させる」を応用し、ボタン自体にアニメーションを追加させてみましょう。 <html lang="ja"> <head> <meta charset="utf-8"> <title>線を動かす</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script> $(function() { $('.btn').on('click', function…</meta></head></html>
Webフォントとは？ 元来、ブラウザは端末にインストールされているフォントを呼び出し文字を表示する。端末のフォント如何では、Webデザイナーが意図しないフォントが表示されてしまい、デザインに制約が生じてしまう。フォントを画像にして表示するという手…
Webフォントとは？ 元来、ブラウザは端末にインストールされているフォントを呼び出し文字を表示する。端末のフォント如何では、Webデザイナーが意図しないフォントが表示されてしまい、デザインに制約が生じてしまう。フォントを画像にして表示するという手…
CSS3のtransformプロパティを使うことで要素に2D変形、または3D変形を適用する事が出来ます。 transformプロパティでは 移動（translate） 縮尺（scale） 回転（rotate） 傾斜（skew） 遠近効果（perspective） の5つの動きがありますが、このうち移動、縮尺…
指定の通り、HTML5で記述し、アウトライン構造を意識して制作してみましょう。 アウトライン構造１ アウトライン構造２ <html lang="ja"> <head> <meta charset="utf-8"> <title>パスタとワインの店</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="container"> <header> <h1>パスタとワインの店｜atella</h1> <p class="mainImg"></p></header></div></body></html>
CSS3によるアニメーションは大きく分けて、トランジション（transition）とアニメーション（animation）の２つに別ける事が出来ます。CSS3におけるトランジション（transition）とアニメーション（animation）の違い 「transition」 動かすために:hoverなど…
最近は動画を背景に使ったWebサイトもよく見かけます。サイトの雰囲気や、サービスの具体的な内容を背景に流すことで、よりユーザーの視点をスクリーンに注目させることができます。 実例 www.joe-san.com optimo.com www.kalexiko.com poolhouse.co 作る際…
HTML5から採用された「ruby」タグですが、以前はFirefoxで表示が出来なかったので実用的ではありませんでしたが、「Firefox 38」からルビ表示がサポートされるようになりました。（2015年8月1日現在、Firefoxの最新版は39） このため、IE、Chrome、Safari、F…
CSS3によるアニメーションは大きく分けて、トランジション（transition）とアニメーション（animation）の２つに別ける事が出来ます。CSS3におけるトランジション（transition）とアニメーション（animation）の違い 「transition」 動かすために:hoverなど…
http://yachin29.html.xdomain.jp/sample2.html 参考サイト wiseyeti.co.ukwiseyeti.co.uk index.html <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <title>無題ドキュメント</title> </meta></meta></head></html>
今回のパターンは transform: scale(1.2); を使います。 CSS3の「transform:scale()」を使用すると要素や画像を拡大・縮小して表示することが出来ます。 「scale()」は下記のようにX方向とY方向で指定することもできます。 transform: scale(1.2,1.2); また…
この方法は非常にシンプルな方法で、画像をホバーした際に画像のサイズをひと回り大きくする、という手法です。 ポイントは「li」に複数のクラス名を付けて、それぞれにスタイルシートを記述しなければいけないので、考え方はシンプルですが記述方法は少し煩…
「transform-style: preserve-3d」を使い、画像の表と裏が回転しているように見せる。 <html> <head> <meta charset="utf-8"> <title>無題ドキュメント</title> <style> /*================================================= * ブラウザのデフォルトのスタイルをリセットする * ===================================</meta></head></html>…
CSS3のアニメーション機能を使って、背景色とボックスシャドウに動きを加える。 デモページ http://yachin29.html.xdomain.jp/animation/bg-anime.html <html> <head> <meta charset="utf-8"> <title>無題ドキュメント</title> <style> body { background: #000; } #box-shadow { width: 300px; height: 300px; posit</meta></head></html>…
今回はCSS3の「animation」を使い、テキストを動かしてみます。 「animation」を使う際はベンダープレフィックスを使い、主要ブラウザーにしっかり対応させる事が大事です。http://caniuse.com/などのサイトでブラウザサポート状況を確認すること。 デモ htt…
HTML5ではFlashムービープレイヤーなどを使わずに、videoタグのみで動画を再生する事が出来ます。ブラウザーによって対応している拡張子が違ったり、読み込み速度の問題など、色々と問題点もありますが、使い方をしっかり覚えておきましょう。 <video width="" height="" poster="img/poster.jpg" controls > <source src="img/〇〇○.mp4" type="video/mp4"> <source src="img/○○○.webm" type="video/webm"> </video> poster属性…
各要素は、文書構造を作る上でページ内に複数使用することになります。 そこで、CSSやJavaScriptに対応させるためには「ID名」が必須になります。 HTML5の記述例 <html> <head> <meta charset="utf-8"> <title>HTML5の基本構造</title> </head> <body> <header id="header"> <h1>HTML5の基本構造</h1> <p>メインコンテンツの本文</p> <nav id="glovalNav"> <ul> <li><a href="#">メニュー１</a></li> </ul></nav></header></body></html>
HTML5で追加された主な要素 文書構造やテキストの意味を明確にする section要素 header要素 nav要素 footer要素 動画と音楽のための要素 video要素 audio要素 フォームに関する要素・属性 バリデーション機能 range属性 date属性 Webアプリケーションのため…
<html lang="ja"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href=""> </link></meta></head></html>
画面いっぱいに背景画像を表示させる際に注意しなければいけないのが、異なるサイズのディスプレイで見た時に画像が切れたり、リピートされてしまわないようにする事です。 今回は「background-size：cover」を使い、異なるサイズのディスプレイで見た時でも…
