求職者支援訓練webサイト制作科授業資料

フェリカテクニカルアカデミー池袋の求職者支援訓練webサイト制作科7月クラスの授業解説ブログです。

CSS3

CSS3のアニメーションを使ったスクロールナビゲーション

<html lang="ja"> <head> <meta charset="utf-8"> <title>Scroll Fixed Navigation</title> <meta name="viewport" content="width=device-width"> <style> html,body,h1,p,ul,li { margin: 0; padding: 0; } ul { list-style:none; } a { text-decoration:none; color: #0b8793; } body { background: #CC…</meta></meta></head></html>

Flexboxを使ったレイアウト

Flexbox(Flexible Box Layout Module) FlexboxはCSS3の新しいレイアウトモジュールで、複雑なレイアウトを今までより少ないコードでフレキシブルなボックスを組むことが出来ます。以前からあった技術ですが、各ブラウザーによって書き方が違ったり、仕様が…

高解像度ディスプレイへの対応

Retinaディスプレイ Retinaディスプレイの特徴は画面解像度の高さにある。iPhone 4の画面サイズは前モデルのiPhone 3GSと同じ3.5インチのままであるが、Retinaディスプレイの搭載によって解像度は320×480ピクセルから640×960ピクセルに、つまり倍になってい…

SVGのアニメーション

carlphilippebrenner.comtympanus.netgardenstudio.com.br SVGとは? SVG【 Scalable Vector Graphics 】とは、XMLベースの2Dベクター画像記述言語。2001年9月にW3C勧告として公開された。 ベクター画像は画像をビットマップ形式ではなく、線や面などの図形…

CSS3によるアニメーション

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

dlを可変にする

<html> <head> <meta charset="utf-8"> <title>dlを可変</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="0809.css"> </head> <body> <h2 id="News_click">ニュースリリース</h2> <dl id="News_text"> <dt>2016年8月5日</dt><dd>[スプリングバレーブルワリー東京(代官山)限定]「サワーバケーション」を新発売</dd></dl></body></html>

スマートフォンサイトの作成

スマートフォン専用サイトの制作。まずは動きの少ないシンプルなレイアウトのスマートフォン専用サイトを制作します。 スマートフォン専用サイトなので、HTML5とCSS3を積極的に使います。 画像素材 トップページ <html lang="ja"> <head> <meta charset="utf-8"> <title>スマートフォン専用サイト</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> </meta></meta></head></html>

縦書きとルビの使い方

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

ボタンにアニメーションを追加する

「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>

before要素とafter要素

before要素とafter要素は指定した要素に擬似要素を生成します。content プロパティを使って、装飾的なコンテンツを要素に追加するのによく使われます。 コンテンツをスタイルシートの方で before要素は指定した要素に擬似要素を生成します。 after要素は指定…

CSS3アニメーション

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

transformプロパティ

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