読者です 読者をやめる 読者になる 読者になる

WEBサイト制作の勉強|フェリカテクニカルアカデミー

WEBサイト制作の勉強の為の解説ブログ。東京池袋のフェリカテクニカルアカデミーでは求職者支援訓練の一環として、WEBサイト制作を学ぶことができます。

画像をレスポンシブに対応させる(可変にする)

画像をレスポンシブに対応させる為にはたった2種類のやり方しかありません。img画像であればフルードイメージ化させる。background画像であれば、background-sizeの指定をする。 この2種類の使い方と特徴を覚えれば、画像に関しては問題なくレスポンシブに…

SVGを使ったアニメーション

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

CSS3によるアニメーション・animation

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

transformプロパティ

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

background-size: の値

background-sizeプロパティは、背景画像のサイズを指定する際に使用します。これまで使ってきたようなピクセルやパーセンテージの他に「contain」「cover」といった値でも設定出来ます。 「contain」 縦横比は保持して、背景領域に収まる最大サイズになるよ…

覚えると便利なnth-child()

これまでの授業でもCSS3の疑似クラス「:nth-child(odd)」「:nth-child(even)」や「:nth-child(3)」は使って来ましたが、()の内に数式を入れる事で非常に便利になります。「:nth-child(2n+1)」= 「:nth-child(odd)」(奇数のみ指定)計算式 n=0: 2*0+1= 1 =…

縦書きとrubyタグの使い方

「webは横書きが当たり前」そんな常識は変化しつつあります。 実はwebにおける縦書きの取り組みは、Internet Explorer5.5(2000年)が独自に実装していましたが、他のブラウザーでは実装されていませんでした。CSS3の策定を機会に最新の主要なウェブブラウザは…

cssセレクタの指定方法 復習

jQueryの勉強を進めていく上で、cssでのセレクタの取り方の重要性を改めて感じたと思います。 jQueryやCSS3が上手く動かない理由の多くは実はcssでセレクタが正しく指定出来ていない、だったりします。この機会にもう1度cssでのセレクタの指定方法を確認しま…

動画を背景に使う

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

Flexboxの使い方

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

clickイベントとtransform

以前やったtransform(変形)ではhover時にtransformを使用し、移動、回転、拡大などを行いました。 ただ、hoverでのtransformはマウスを離すと元に戻ってしまうという問題があります。 yachin29.hatenablog.com 今回はhoverでは無く、jQueryのclickイベントを…

jQueryとCSS3を使ったアニメーション

HTML5 × CSS3 × jQueryのハイブリッドアニメーション 最近のWebアニメーションはスマホで表示する事も考慮し、動きの軽いアニメーションが求められています。その為には単一のスクリプトではなく複数のスクリプトを合わせる必要があります。jQueryの特徴の1…

フルスクリーンレイアウト その1

最近、よく見かける「1枚画像」を画面全体に表示させているようなフルスクリーンレイアウト。 こういったレイアウトを作る際の1番のポイントは、用意する画像の大きさです。 自分のPCでは綺麗にフルスクリーンで表示されるけど、別のPCでは写真が見切れて…

モバイルファーストを意識したレスポンシブデザインサイトの制作 2

授業で制作を進めているモバイルファーストを意識したRWDサイト(netsmart)のモバイルサイト部分を完成させましょう。完成例 http://yachin29.webcrow.jp/sp/ 今回組み込むjQuery キービジュアルのスライド(bxslider) タブパネル アコーディオンパネル ウィ…

「 display: table」を使ったタブパネル

これまでHTML上でスタティック(縦)に並んでしまう要素を横並びにする方法として、 float inline、inline-block などを用いてきましたが、今回は「 display: table」を使い横並びに。さらにjQueryを使ってタブパネルにしてみます。 「 display: table」とは…

ホバーにCSS3アニメーション

transitonによるアニメーション <html> <head> <meta charset="utf-8"> <title>transitonによるアニメーション</title> <style> /* reset */ html, body, div, h1, h2, h3, h4, h5, h6,p, blockquote, pre, address,ul, ol, li, dl, dt, dd,table, th, td, form, fieldset { margin: 0; padding: 0; line-height: 1.0;</meta></head></html>…

CSSで計算式を可能にするcalc()ファンクション

CSSで演算というと、SaccやLessといったメタ言語を使うというイメージですが、単純な四則演算であれば、CSS3の「calc()」機能で代用出来ます。 IEはIE9からサポートしていましたが、他のブラウザーのサポートが中々進まなかったことから、余り使われてきませ…

SVGを使ったアニメーション

http://carlphilippebrenner.com/portfolio/beatricecreationscarlphilippebrenner.comtympanus.netgardenstudio.com.br SVGとは? SVG【 Scalable Vector Graphics 】とは、XMLベースの2Dベクター画像記述言語。2001年9月にW3C勧告として公開された。 ベク…

ハンバーガーメニューにアニメーションを追加する

今回は前回のハンバーガーメニューに、CSS3のアニメーション機能を使って、クリックした際に3本線が✕印に変わるエフェクトを追加します。 CSS3の「 transform: rotate」を使って線を動かします。 3本線の1番上の線と1番下の線を反時計周りに回転させ、✕…

css3を使って文字を動かす(横方向)

以前、CSS3のanimation機能を使って文字を縦方向に動かしました。yachin29.hatenablog.com 今回はモデルとしているキリンのサイトにあるような、テキストが横に動いていくバージョンに変更します。 横方向に動かす時にはX方向の座標とY方向の座標をどう取れ…

HTML5でのアウトライン構造を理解する

アウトラインとは階層構造のことで、HTML5のマークアップでは、このアウトラインを意識することが非常に重要になってきます。また、正しいアウトライン構造を作るためにはsectionタグを使用したセクショニングをしっかりと理解する事が大事です。webサイトを…

HTML5でのアウトライン構造を理解する

アウトラインとは階層構造のことで、HTML5のマークアップでは、このアウトラインを意識することが非常に重要になってきます。また、正しいアウトライン構造を作るためにはsectionタグを使用したセクショニングをしっかりと理解する事が大事です。webサイトを…

css3アニメーションで桜が舞う

<html> <head> <meta charset="utf-8"> <title>桜が舞う</title> <style> html, body { margin: 0; padding: 0; } #container { width: 100%; height: 700px; background: #000; } .inner { position: relative; width: 300px; margin: 0 auto; } .inner div { opacity: 0; animation-name: Drop; animation-du…</meta></head></html>

css3アニメーションで桜が舞う

<html> <head> <meta charset="utf-8"> <title>桜が舞う</title> <style> html, body { margin: 0; padding: 0; } #container { width: 100%; height: 700px; background: #000; } .inner { position: relative; width: 300px; margin: 0 auto; } .inner div { opacity: 0; animation-name: Drop; animation-du…</meta></head></html>

「 display: table」を使ったタブパネル

これまでHTML上でスタティック(縦)に並んでしまう要素を横並びにする方法として、 float inline、inline-block などを用いてきましたが、今回は「 display: table」を使い横並びに。さらにjQueryを使ってタブパネルにしてみます。 「 display: table」とは…

before要素とafter要素

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

before要素とafter要素

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

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

前回やった「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フォントの使い方

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>

借景デザイン

借景 今回はCSS3の「background: rgba()」を使い、ヘッダー要素などの背景色を透明にする事で、その後ろにある背景画像が見えるようになります。 ヘッダーに画像を使う事無く、bodyやcontainerの背景画像を表示させる事が出来ます。 参考サイト 一般財団法人…

画像をホバーした時のアニメーションその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でのコンテンツモデル

各要素は、文書構造を作る上でページ内に複数使用することになります。 そこで、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の特徴

W3C HTML5 Logo HTML5とは HTML5 は WHATWG によって2004年に定められた Web Applications 1.0 に Web Forms 2.0 を取り入れたものが W3C の専門委員会に採用され、W3C より2008年1月22日にドラフト(草案)が発表され、2014年10月28日に勧告された[1]。2016…

HTML5の基本形

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