Webサイト制作科 忘筌

求職者支援訓練 Webサイト制作科 10月11日開講クラス補足メモ

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

CSS3で作るマウスオーバーアニメーション 背景色が変化するアニメーション <html lang="ja"> <head> <meta charset="UTF-8"> <title>Flexboxを使ったナビゲーション</title> <style> html,body,h1,ul,li { margin: 0; padding: 0; line-height: 1.0; } ul { list-style: none; } a { text-decoration: none; color: inherit; } </meta></head></html>…

positionによるレイアウト

CSS

positionとは テキストP.146〜154 positionプロパティはボックスの配置方法(基準位置)が、相対位置か絶対位置かを指定する positionプロパティで指定するのは、配置方法(基準位置)のみ static 特に配置方法を指定しません。この値のときには、top、botto…

CSS3 - ホバーキャプション

ホバーキャプション <html lang="ja"> <head> <meta charset="UTF-8"> <title>ホバーキャプション</title> <style> html,body,h3,p { margin: 0; padding: 0; line-height: 1.0; } img { vertical-align: bottom; } figure { position: relative; overflow: hidden; width: 480px; } figcaption { position: absolute; left: …</meta></head></html>

CSS3 - Transition[トランジションアニメーション]

Transition[トランジションアニメーション] <html lang="ja"> <head> <meta charset="UTF-8"> <title>Transition</title> <style> html,body,h2,h3,p { margin: 0; padding: 0; line-height: 1.0; } a { text-decoration: none; } body { text-align: center; } .content { margin: 50px; padding: 30px; border: 1px sol…</meta></head></html>

CSS3 - Transform[変形]

Transform[変形] <html lang="ja"> <head> <meta charset="UTF-8"> <title>Document</title> <style> html,body,h3,p { margin: 0; padding: 0; line-height: 1.0; } .content { margin: 50px; padding: 30px; border: 1px solid #aaa; } h3 { margin-bottom: 20px; } .container { display: flex; justify-c…</meta></head></html>

CSS3 - 透明とグラデーション

透明(不透明度) opacityプロパティを使って全体を透明に CSSのopacityの書き方 img要素に対して「opacity:1 」を指定すると完全不透明です 「opacity: 0.5」だと透明度は50%です .content>img { opacity: 0.5; } ホバー時に透過させる .content>img { opac…

CSS3 - 背景画像

multiple-background CSS3からは、1つの要素に複数の背景画像を指定できるようになりました 従来通り1枚背景画像を指定した後、カンマで区切って2枚目の背景画像を指定します 後から指定した画像は、一番下に配置されます 複数の背景画像の利用 developer…

CSS3 - プロパティ

CSS3のプロパティ テキストP.276 テキストシャドウ テキストP.276 テキストに影をつけるプロパティ <div class="content"> <h3>text-shadow</h3> <ul class="sample ts"> <li class="ts01">Drop Shadow</li> <li class="ts02">Grow</li> <li class="ts03">Bevel</li> <li class="ts04">Embos</li> <li class="ts05">Stroke</li> <li class="ts06">Neon</li> </ul>…</div>

CSS3 - セレクタ

属性セレクタ 新たに追加された属性セレクタ テキスト P.264 ul,li { margin: 0; padding: 0; } .sample { list-style: none; border: 1px solid #aaa; } li { margin: 10px; padding: 10px 20px; background: #ECECEC; border: 2px solid #aaa; } 属性値が…

CSS3の基本

CSS3の概要 CSS3は、これまで使ってきたCSSの延長 CSS3を使うメリット テキスト P.258 www.shoeisha.co.jp classやidに頼らないセレクタ作りが可能になる CSS3だけで表現できるデザインの幅が広がる 簡単に柔軟な他段組を実現できるようになる CSSだけで「動…

Webサイト制作ワークフロー

Webサイト制作のワークフロー phase フェイズ(フェーズ) システム開発やプロジェクトマネジメントにおいて、プロジェクトの各段階や工程のこと オリエンテーションとヒアリング オリエンテーションは仕事の始まり、クライアントの意向を知るスタートライン…

モーダルウィンドウ

モーダルウィンドウ コンピュータアプリケーションソフトウェアのユーザインタフェース設計において、何らかのウィンドウの子ウィンドウとして生成されるサブ要素のうち、ユーザーがそれに対して適切に応答しない限り、制御を親ウィンドウに戻さないもの Lig…

Slider

SLIDERJS SlidesJS 3.0 www.slidesjs.com <html lang="ja"> <head> <meta charset="utf-8"> <title>SlidesJS Standard Code Example</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="css/example.css"> </link></meta></meta></head></html>

bxSlider

bxSlider スライドショーを手軽にWebページ内に設置できるスライドライブラリ ulでもdivでもスライダーが使える スライド動作も3種類選べる カルーセルタイプにすることも可能 bxSliderをダウンロード 読み込んで利用 <link rel="stylesheet" href="css/jquery.bxslider.css"> <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="js/jquery.bxslider.min.js"></script> スライド画像の設定 …</link>

タブパネル - 実践

基本のタブパネルの作り方 タブ(見出し)とパネル(表示する内容)をそれぞれ別のリストで記述します タブのul要素には「tab」、パネルのul要素には「panel」というclass名をつけます パネル部とタブ部が連動するよう「id名」をつけ、href属性に#(ハッシュ…

タブパネル

タブパネルとは タブの切替は複数のコンテンツの表示・非表示を操作してコンテンツが変わっているように見せる 要素を非表示にするには hideメソッドを使い、表示には showメソッドを使う パネルの順番とコンテンツの順番が比例している場合は、indexメソッ…

縦の動き slideDown / slideUp / slideToggle

slideDown / slideUp displayがblockに、noneに変化する途中のアニメーション効果 <html lang="ja"> <head> <meta charset="utf-8"> <title>アコーディオンパネル</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <link rel="stylesheet" href="style.css"> </head> <body> </body></html>

実践的なメソッド

hide()メソッド 表示されている要素を非表示にする 引数がない場合は、即座に非表示 キーワードは、「slow」「normal」「fast」のいずれかを記述 秒数で指定する場合は、「1000」が1秒 <html lang="ja"> <head> <meta charset="UTF-8"> <title>hide()メソッド</title> <style> .box {width: 300px; height: 300px;} #hide1 {ba</meta></head></html>…

thisキーワード と readyイベント

thisキーワード JavaScriptの予約語 thisは、標準の要素オブジェクト jQueryメソッドにアクセスするには、「$()関数」で「this」をラッピングする必要があります 「$()関数」を利用することで、標準の要素オブジェクトをjQueryオブジェクトに変換できます そ…

イベント

イベントとは ユーザーとWebサイトとの間でやりとりを行う処理を「イベント」と呼びます イベントには、「ユーザーイベント」と「ブラウザイベント」の2種類があります ユーザーイベントは、キーボードやマウスを操作することで実行されます ブラウザイベン…

HTML/CSSを操作する

HTML/CSSを操作するjQueryの命令 どのHTMLの要素を操作するか指定する(セレクター) 操作する内容(命令) jQueryの命令 テキストの変更と取得 HTMLの変更と取得 HTMLの挿入 HTMLの移動 他の要素で包む 親要素を取り除く 要素の置き換え 要素の削除 属性値…

jQueryとは

jQueryとは よく使うJavaScriptを簡単に使えるようにしたもの JavaScriptのライブラリのひとつ HTMLやCSSを操作して、要素・属性・スタイルを追加・変更・削除できる 要素に対してアニメーションできる 主要なブラウザをサポート(ブラウザ依存を気にしなく…

タイマーを使って一定時間ごとに動かす

要素を動かす クリックイベントにより、X座標・Y座標の値を変更する <html lang="ja"> <head> <meta charset="UTF-8"> <title>要素を動かす</title> <style> .box { position: absolute; left: 50px; top: 50px; width: 100px; height: 100px; background: #8EDED4; text-align: center; line-height: 100px; } </style> </head> <body> </body></html>

ボタンイベント

ボタンのクリック処理 ボタンがクリックされたときの処理を、DOMイベントリスナーで記述する <html lang="ja"> <head> <meta charset="UTF-8"> <title>DOMイベントリスナー</title> </head> <body> <h1>ボタンクリックイベントの例</h1> <button id="mybtn">クリックしてね</button> <script> function btnclick() { alert('クリックされました'); } window.addEventListener('load',</body></html>…

画像置換

PhotoshopCC2018でJavaScriptでの書き出し 「PhotoshopCC2018」→「Presents」→「Scripts」→「Export Layers to Files.jsx」を開いて以下のように修正します レイヤー名をファイル名として書き出し JavaScriptで画像置換 CSSは必要なし! onmouse属性を使った…

イベントとイベントハンドラ

イベントとは ブラウザー上でユーザーが行う様々な動作のこと マウスをクリック マウスをダブルクリック マウスのポインターの移動 マウスのボタンを押す マウスのボタンを放す など イベントハンドラとは イベントの発生をきっかけにして、何らかの処理を実…

ノードを追加・削除する

ノードを追加する 要素 / テキストノードを作成 createElement / createTextNode ノード動詞を組み立て、ドキュメントに追加 appendChild createElementメソッド 要素を作成する document.createElement( name ) name: 要素名 ノードを作成するためだけのメ…

DOM-実践演習

DOMによる書き換え DOMツリーでは、トップレベル要素は「document」オブジェクトです documentオブジェクトから、button(エレメントノード)をid属性を指定して参照しています <html lang="ja"> <head> <meta charset="UTF-8"> <title>背景色を書き換える</title> <style> body { background-color: #CAE4FF; } button { curso</style></meta></head></html>…

DOMの記述に書き換える

ボタンが押されたらブラウザに表示 <html lang="ja"> <head> <meta charset="UTF-8"> <title>オブジェクト</title> </head> <body> <h1>表示するプログラム</h1> <p><button onclick="result()"></button></p> <h2 id="ans">ここに表示</h2> <script> function result() { var element=document.getElementById('ans'); var str='結果を表示する文字列'; e…</body></html>

関数の応用

関数の代入と匿名関数 関数は、数値や文字列のように変数に入れて扱うことができます この方法を使うと、条件に応じて異なる関数を変数に設定したり、関数を引数として別の関数に渡したりと、より柔軟に関数を利用できます 変数名 = 定義済みの関数名; 《関…