2016-01-01から1ヶ月間の記事一覧
セマンティックなマークアップを効果的に実践 文書構造を最適化する 4つの段階（フェーズ） ロボット巡回 インデックス追加 アルゴリズム適合 ペナルティ回避 内的要因のチェック ソースコードの最適化 検索エンジンにとってわかりやすいサイト ↓ 検索エンジ…
外部CSSファイルの読み込み index.htmlと同一階層に「css」フォルダーを作成し、style.cssを作成し保存します <html lang="ja"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/style.css"> </link></meta></head></html>
文書構造の基本設計 見出し（ページの構造が複雑にならないように、h3〜h4まで使用するに止める） 本文 箇条書き <body> <h1>Cafe Debut</h1> <p>baser CMS カフェサイト用テーマ<br> baser CMS テーマコンテスト2012 飲食店系テーマ賞受賞（受賞結果はこちら）</p> <h2>いますぐ、はじめら</h2></body>…
DOCTYPE宣言 必須 ルート要素 html要素 lang属性も含める <html lang="ja"> 基本情報の記述場所 head要素 <head>〜</head> エンコードの種類の指定 meta要素 charset Unicode（UTF-8） <meta charset="UTF-8"> ページのタイトル title要素 検索対象にするキーワードから書き始める <title></title> スタイルシートの設定 style</meta></html>…
HTML5フォームの新属性 HTML5で追加されたフォーム関連の機能 フォームコントロール これまでのHTMLにあったテキストボックスやラジオボタンなどの入力フォーム要素に、電話番号やメールアドレスなどに特化した属性が追加されました その他、数値や日付など…
主要なナビゲーションに使う ヘッダー・フッターに使用する section要素やarticle要素に入れることもできる アウトラインに影響を与えない 《header要素とfooter要素を使ったマークアップ》 <header> <section> <h1>セクションの見出し</h1> <p>テーマのキーワードを含むリード文</p> </section> <nav> <ul> <li><a href="#">メニ</a></li></ul></nav></header>…
主要なナビゲーションに使う 主要なナビゲーションやサイドバーのグローバルメニューのみを扱う セクショニングコンテンツなので、アウトラインを明確に表示するためには見出しを入れることもあります テキスト中にある細かなリンクはnav要素である必要はな…
補足的なコンテンツに使う メインコンテンツに比べて重要度が低い補足的なコンテンツを扱う 一般的にサイドバーに配置されるコンテンツを入れますが、ページのサイドにレイアウトしなければいけないわけではありません 《aside要素を使ったマークアップ》 <section> <h1></h1></section>…
ブログなどの記事に使う 独立した記事として成立する内容に使う 自己完結した内容を示す 具体的には独立して配布や再利用できるものにマークアップします 雑誌や新聞の記事、ブログのエントリー、インタラクティブなウィジェットやガジェット、ユーザーが送…
section要素でアウトラインを表す コンテンツやテーマによってグループ分けをしたセクション区切り section要素は、要素の内容が明示的に文書のアウトラインに載る場合にのみ使用することが適切です 通常見出しを持っています section要素は、一般的なコンテ…
HTML5で使う属性 《HTML5のグローバル属性一覧》 id属性 ID名を定義 class属性 クラス名を定義 style属性 直接CSSを適用 title属性 タイトルなどの補足情報を定義 accesskey属性 ショートカットキーを割り当て tabindex属性 タブキーでフォーカスするかとそ…
カテゴリー ７つのカテゴリーの関係は以下の図のようになります フローコンテンツの中には、一部のめたデータコンテンツ以外のほとんどの要素が含まれています カテゴリーは大きく分けて、heading-content、sectioning-content、それ以外のまとまりの３つ 要…
新しい要素・属性 要素（element）・属性（attribute） 文書構造を明確にするための要素 section要素 header要素 nav要素 hgroup要素（2014年12月勧告時点で削除されているため使用不可） など テキストの意味を明確にするための要素・属性 time要素 mark要…
HTML5の基本的な文法 HTML5の文法は、基本的にHTML4.01と同じです DTD(Document Type Definition)：文書型定義 DTDはスキーマ言語の一種です HTML5ではDTDの指定が不要 今後はHTMLのバージョンがなくなり１つになるため 2014年12月時点では、以下のいずれか…
Webアプリケーションとは 単に情報を表示するだけではなく、ユーザーの操作に応じて結果を返すWebページ 初期のWebアプリケーションの仕組み HTMLのフォームを利用してユーザーが入力したデータをWebサーバーに送り、Webサーバー内のプログラムがデーターを…
HTML5の特徴と代表的な機能 HTML4.01で定義されているHTMLの仕様を継承 誰でも簡単に情報が配信できる仕組み ブラウザのみで色々な処理が行えるWebシステムを開発できる仕組み マークアップに関する機能 構造化要素 HTML5では、これまでのHTML以上に文書構造…
HTML5を理解するためのキーワード W3C（World Wide Web Consortium） ティム・バーナーズ=リー IETF（Internet Engineering Task Force） WHATWG（Web Hypertext Application Technology Working Group） Hypertext Markup Language Internet Draft HTML5の…
HTML5 HTML5 は、WHATWG および W3C が HTML4 に代わる次世代の HTML として策定を進めている HTML 仕様 広義のHTML5 いままでより高度な機能をもつWebページ 特定のOSやブラウザに依存しない CSS3やECMAScript5を含む 狭義のHTML5 HTML4.0に続く5番目のHTML…
必須 授業の復習 CODEPREP HTML CSS JavaScript（if文まで） Progate HTML&CSS 基礎編 HTML&CSS 応用編 JavaScript（if文まで） Cyllabus HTML CSS WEB 自由選択 ひとつでも習慣化できるものを見つけて継続しましょう Learn to code | Codecademy Learn to c…
変形 すでに描画されているオブジェクトの変形を練習します。 コンピューターは既存の形を利用することが得意 特に複製は、コンピューターのもっとも得意とするところ 素材 リフレクトツール 「線対称」の複製を作るときに使用するツールです。 ドキュメント…
イラストを作成 イラストはIllustratorで描画し、ステージに読み込みます（同一バージョンでは、コピー&ペースト） （１）新規ドキュメント［Web］で、イラストを描画する （２）コピーをして、Flash（ステージ上）でペースト MovieClipシンボルを作成 シン…
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>
for文 同じ処理を何度も繰り返し実行する 「カウンタ」と呼ばれる変数を使って、「１回目」「２回目」と数えながら繰り返すことができる 繰り返す回数がわかっているときに使用する for( カウンタの初期化；繰り返しの条件；カウンタの増減 ) { 繰り返し実行…
メディアクエリ メディアクエリは、ウィンドウのサイズやモニターの物理サイズ、画面密度やデバイス向きなど、閲覧環境の特性（メディア特性）に応じてCSSを分岐させることができる機能で、CSS2.1の時代から使われている media属性の拡張として定義されてい…
transition（トランジションアニメーション） transition は、「:hover」などの動作をきっかけとして、アニメーションでプロパティの値を変化させることができるプロパティです
反転の考え方 （1）右に移動 右端までは移動速度が代入され続け、右に移動します onClipEvent (load) { var speed:Number = 10; //移動速度 } onClipEvent (enterFrame) { _x += speed; } （2）ステージの右端まで移動 右端のX座標を指定 右端のX座標を上回…
transform-origin（変形の原点） ローカル座標の原点は、transform-origin の値を変更することでいつでも変更できます 変形の原点を変更する
条件を見つける 連続的にムービークリップを右に移動する 右端まできたら左端に移動する 条件：右端まできたら 処理：左端に移動する if文 if（ 条件式 ）{ 条件式を満たしおこなう処理 } 前回作成したファイルに追加していきます。 load と enterFrame どち…
transform（変形） transformプロパティは、二次元座標での変形を行うプロパティです 値に translate( ) / scale( ) / rotate( ) / skew( ) の４種類のトランスフォーム関数を取り、それぞれ移動・拡大縮小・回転・傾斜させることができます 移動の書式 tran…
イベント 「いつ」を設定する部分になります。 ActionScriptでは「イベントハンドラ」という構造で、イベントでおこなう処理を管理します。 onClipEvent (イベント) { 処理１ 処理２ …onClipEventハンドラ イベント 説明 load ムービークリップインスタンス…
