WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

HTML5+CSS3

Webフォントの使い方

Webフォントとは? 元来、ブラウザは端末にインストールされているフォントを呼び出し文字を表示する。端末のフォント如何では、Webデザイナーが意図しないフォントが表示されてしまい、デザインに制約が生じてしまう。フォントを画像にして表示するという手…

Webフォントの使い方

Webフォントとは? 元来、ブラウザは端末にインストールされているフォントを呼び出し文字を表示する。端末のフォント如何では、Webデザイナーが意図しないフォントが表示されてしまい、デザインに制約が生じてしまう。フォントを画像にして表示するという手…

transformプロパティ

CSS3のtransformプロパティを使うことで要素に2D変形、または3D変形を適用する事が出来ます。 transformプロパティでは 移動(translate) 縮尺(scale) 回転(rotate) 傾斜(skew) 遠近効果(perspective) の5つの動きがありますが、このうち移動、縮尺…

提出課題 atella

指定の通り、HTML5で記述し、アウトライン構造を意識して制作してみましょう。 アウトライン構造1 アウトライン構造2 <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によるアニメーション

CSS3によるアニメーションは大きく分けて、トランジション(transition)とアニメーション(animation)の2つに別ける事が出来ます。CSS3におけるトランジション(transition)とアニメーション(animation)の違い 「transition」 動かすために:hoverなど…

動画を背景に使う

最近は動画を背景に使ったWebサイトもよく見かけます。サイトの雰囲気や、サービスの具体的な内容を背景に流すことで、よりユーザーの視点をスクリーンに注目させることができます。 実例 www.joe-san.com optimo.com www.kalexiko.com poolhouse.co 作る際…

rubyタグの使い方

HTML5から採用された「ruby」タグですが、以前はFirefoxで表示が出来なかったので実用的ではありませんでしたが、「Firefox 38」からルビ表示がサポートされるようになりました。(2015年8月1日現在、Firefoxの最新版は39) このため、IE、Chrome、Safari、F…

CSS3アニメーション・transitionのよるホバーアクション

CSS3によるアニメーションは大きく分けて、トランジション(transition)とアニメーション(animation)の2つに別ける事が出来ます。CSS3におけるトランジション(transition)とアニメーション(animation)の違い 「transition」 動かすために:hoverなど…

CSS3アニメーション・transitionのよるホバーアクション

CSS3によるアニメーションは大きく分けて、トランジション(transition)とアニメーション(animation)の2つに別ける事が出来ます。CSS3におけるトランジション(transition)とアニメーション(animation)の違い 「transition」 動かすために:hoverなど…

マウスホバーした進入方向からオーバーレイ要素がスライドしてくるjQuery

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>

画像をホバーした時のアニメーションその2

今回のパターンは transform: scale(1.2); を使います。 CSS3の「transform:scale()」を使用すると要素や画像を拡大・縮小して表示することが出来ます。 「scale()」は下記のようにX方向とY方向で指定することもできます。 transform: scale(1.2,1.2); また…

画像をホバーした時のアニメーションその1

この方法は非常にシンプルな方法で、画像をホバーした際に画像のサイズをひと回り大きくする、という手法です。 ポイントは「li」に複数のクラス名を付けて、それぞれにスタイルシートを記述しなければいけないので、考え方はシンプルですが記述方法は少し煩…

CSS3によるアニメーションーその3

「transform-style: preserve-3d」を使い、画像の表と裏が回転しているように見せる。 <html> <head> <meta charset="utf-8"> <title>無題ドキュメント</title> <style> /*================================================= * ブラウザのデフォルトのスタイルをリセットする * ===================================</meta></head></html>…

CSS3によるアニメーション その2

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によるアニメーション-ニュースティッカー

今回はCSS3の「animation」を使い、テキストを動かしてみます。 「animation」を使う際はベンダープレフィックスを使い、主要ブラウザーにしっかり対応させる事が大事です。http://caniuse.com/などのサイトでブラウザサポート状況を確認すること。 デモ htt…

videoタグで動画を表示する

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属性…

HTML5でのコンテンツモデル

各要素は、文書構造を作る上でページ内に複数使用することになります。 そこで、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="#">メニュー1</a></li> </ul></nav></header></body></html>

HTML5で追加された要素

HTML5で追加された主な要素 文書構造やテキストの意味を明確にする section要素 header要素 nav要素 footer要素 動画と音楽のための要素 video要素 audio要素 フォームに関する要素・属性 バリデーション機能 range属性 date属性 Webアプリケーションのため…

HTML5の基本形

<html lang="ja"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href=""> </link></meta></head></html>

background-sizeを使ったデザイン

画面いっぱいに背景画像を表示させる際に注意しなければいけないのが、異なるサイズのディスプレイで見た時に画像が切れたり、リピートされてしまわないようにする事です。 今回は「background-size:cover」を使い、異なるサイズのディスプレイで見た時でも…