［CSS3］ トランジション / アニメーション / トランスフォーム トランジション（transition） 動かすために:hoverなどのきっかけが必要 実行後に元のプロパティ値に戻る 比較的簡単な記述で動かす事が可能 アニメーション（animation） transitionより細か…

［CSS］ レスポンシブウェブデザインの練習 ruby要素 / 縦書き ［作成例］

［CSS］レスポンシブウェブデザイン スマートフォンに最適化する（ex 『Google Mobile-Friendly Website』） レスポンシブウェブデザインpcとpsをひとつのファイルで管理する 動的な配信.htaccesspcとpsで別々のデータを用意するpcとpsで自動的に互換性をも…

［HTML5］ HTML5のOutline構造を正しく記述する 『HTML 5 Outliner』 https://gsnedders.html5.org/outliner/ 『HTML5 Outliner』 Chromeの拡張機能を利用 HTML5 h(見出し) + p(段落) ［作成例］ ［CSS］ 配色理論を理解する ・可読性を考える × 背景色が濃…

［HTML5 / CSS］ 『Progate』 『CODEPREP』を使って復習する 忘れているもの、見落とし…などをまとめる ・transition : 滑らかに変化させる属性( width, height など) linear 秒数(s) ; linear：速度は変わらない ease:：ゆっくり始まりゆっくり終わる ease-…

［JavaScript］ 課題：3の倍数を判別するプログラムを記述しなさい ボタンを押したら実行するように設定 初期値：var if(){ } else { } 出力：〜は、3の倍数です。〜は、3の倍数ではありません。 ＊memo 遭遇したエラー missing ) after argument list. 原因…

［HTML / CSS］ ワークフローの再確認 1. ディレクトリ・パス（大前提として、PCを正しく管理できるか？） フォルダ名・ファイル名（日本語禁止！）の管理をできているか？ レギュレーション（ガイドライン）に従う （レギュレーション：ある一定のルールに…

［CSS］ 色彩計画 基調色（ベースカラー） 強調色（アクセントカラー） アソート ＊ 可読性を重視する ガントチャート 記述における注意点 idとclassを使い分ける（レイアウト→id、要素→class） ツリー構造（優先順位）を考える backgroundの彩度を抑える na…

［CSS］ ベンダープレフィックス GoogleChrome / safari：-webkit- Firefox：-moz- Opera：-o- InternetExplorer：-ms- HTML5+CSS3の新要素が反映されるブラウザ Googlechrome Firefox / safari 現場で使われる新要素は４種類程度（用途に合わせて使い分ける…

［CSS］ positionプロパティの練習 ［作成例］ グリッドデザインを作成する上での注意点 グリッドデザインは1pxでもズレてはいけない スライス：画像を細切れにしていく作業のこと Photoshopで画像にガイドを引いていく→ガイドをロックする スライスツール：…

［CSS］ floatの練習 floatしているもの同士はmarginが加算される（marginの相殺の影響を受けない） ［作成例 その１］ ［作成例 その２］ ［作成例 その３］ ［Photoshop］ ツールの使い方を覚える コピースタンプツール：何かを消す フィルタ→レンズ補正：…

［CSS］ positionプロパティ ［Today's viewpoint］ 表示スピードはブラウザの表示スピードを優先する（時代性を考慮する） HTML CSS：４ファイル以上読み込むと遅くなる（リセットを外部CSSに書かない） JavaScript（jQuery） img

［CSS］ heightとline-heightプロパティ / 隠し文字について ［作成例］ ［Illustrator］ Illustratorの覚書 練習の場合新規ファイルのカラー設定はCMYKでよい グラデーションは必然性がある場合に使う 疑似立体をつくる（効果→3D→回転体） アキュートアクセ…

［CSS］ 横ナビゲーション / グロバールナビゲーション 現在ではあまり使われない。新しいことが起きるという可能性を感じさせない CSSSprites 画像自体を先読みして、後から見せたい場所をつくる diplay: block; ・display：要素の表示形式を指定する ・blo…

［CSS］ floatを使った『２カラムレイアウト』を作成する CSSはブラウザを基準として書く ボックスモデルに従い、ブラウザを基準とした幅を指定する ネガティブマージン （ex margin-top: -50px;）は初心者向けではない ［作成例］ 肩慣らしの1カラムレイア…

［HTML / CSS］ ・meta要素 メタファーについてどのような特性をもっているかブラウザに伝える役割 <meta name=" 値 " content=" "> ↑ ↑ ↑ 要素 属性 ex) width=device-width ・ブレイクポイント：強制改行。CSSが切り替る画面幅。 ブレイクとは混乱時に基準をつくるという意味 ・リセット</meta>…

［HTML / CSS］ 復習課題。以下の要件定義に従う h1のみ記述（テキストはテーマタイトルとする） 幅640px以下はスマートフォンの表示に切換え h1は幅460px高さ300px。空間指定は不要 背景画像はimgフォルダー内のh1_bg.png リセットを記述する。CSSはエンベ…

［HTML / CSS］ 正しいワークフローで作業をする。ルールに従う id <div id="">：レイアウト class <p class="">：意味を例示するための付加 要素に対して振り分けるならば100%"class"で良い 要素内のidはJavaScriptで利用する（ex getElementById） padding: 上 右 下 左 ; text-al</p></div>…

［HTML / CSS］ ワークフロー 文書構造の作成 div要素によるグループ化 CSSファイルのリンク reset → fonts → body layout（外側から） HTML CSS ブラウザ ［memo］ 16px(body)≒1.0em≒100% 16px × 0.625%=10px（ex 14px=0.875em） em %：比率 rem：root + em…

［CSS］ ボーダーの作成 太さ 種類（solid>dotted>dashed） 色 HTML CSS ブラウザ