2016-06-01から1ヶ月間の記事一覧
表 テキスト、P.048 table 要素 caption 要素 tr要素：table row（１行） td 要素：table description th要素：table header <body> <h1>Web年表</h1> <table border="1"> <caption>1999年以前</caption> <tr> <th>西暦</th><th>出来事</th> </tr> <tr> <td>1989年</td><td>WWWの誕生</td> </tr> <tr> <td>1993年</td><td>Mosaic 登場</td> </tr> <tr> <td>1995年</td></tr></table></body>
覚えておきたいマークアップのルール テキスト、P.035 要素の入れ子（ネスト）と親子関係 POINT テキスト、P.037 アークアップの肝は、コンテンツの内容を理解して「文書構造」を見つけること HTMLの文書構造の基本は「見出し」「段落」「箇条書き」 要素の…
情報のグループ化 テキスト、P.032 情報のまとまりごとにソースをグループ化し、そこに名前をつけてソースの可読性を高める レイアウトやデザインの再現のために必要な枠を用意する ソースコード例 レイアウトブロックのid名は、汎用型（どのサイトであって…
文書をHTMLでマークアップする テキスト、P.020 すでにあるテキストに意味づけをしていきます テキストに書いてあるように、実際に手を動かしならマークアップの練習をしていきます 文書構造をマークアップする テキスト、-P.020〜033 以下のテキストを利用…
HTMLで文書を作成する HTMLの概要 テキスト、P.014 基本構造の入力をします（詳細は、テキストで確認します） HTMLの役割 HTML（Hyper Text Markup Language） Webページを表示するためのマークアップ言語のひとつ マークアップとは、コンテンツの始めと終わ…
PIXEL PERFECT PRECISION
アップロード：Upload アップロードとは、コンピュータネットワークにおいてコンピュータに存在するファイルを接続された他のコンピュータに転送すること（ローカルからサーバーへのコピー） 対義語としてはダウンロードが挙げられる FTP：File Transfer Pro…
CSS3 ボックスシャドウ ボックスシャドウはボックスモデルの外側・内側に影を作ることができ、 「X軸・Y軸・ぼかし具合・色」を設定することができます。 また、カンマ（,）で区切ることによって複数の影を作れます。 <html lang="ja"> <head> <meta charset="UTF-8"> <title>CSS3 ボックスシャドウ</title> <style> #bShadow1,</meta></head></html>…
角丸（かどまる）をつける border-radius CSS3代表的なプロパティ 角丸 <html lang="ja"> <head> <meta charset="UTF-8"> <title>CSS3 角丸</title> <style> #radius1, #radius2, #radius3, #radius4 { border: 4px solid #F90; width: 200px; height: 100px; margin: 30px 50px; } #radius1 { border-radius: 20px; } #radius2</meta></head></html>…
フォーム関連機能まとめ required属性 入力必須を指定します placeholder属性 入力欄に初期値として表示されます autofocus属性 自動フォーカスを指定する IE6・7対応する場合は「autofocus="autofocus"」と記述します autocomplete属性 入力候補を提示して…
フォーム関連の新機能 input要素の新しいtype属性 email メールアドレス search 検索テキスト url URL tel 電話番号 number 数値 date 日付 datetime UTC datetime-local ローカル日時 month 月 week 週 time 時間 range 範囲 color 色 フォーム関連の新しい…
positionを使ったレイアウト 例１ ブラウザの天地左右の中央に表示されるよう記述しなさい 薬玉文様（くすだまもんよう） 薬玉とは、薬・香料を玉にして錦の袋に入れ、造花や蓬・菖蒲などを飾り、五色の糸を長く垂らしたもの。古代中国で端午の節句に薬玉を…
positionを使ったレイアウト 以下のサイトを作成しなさい ボタン「幅：160px、高さ：50px、色帯：5px」 #content「幅：500px、高さ：200px」 #sidebar「幅：280px、高さ：200px」 billboard.jpg（幅800px、高さ300px） logo.png（透過PNG ほぼ200px程度） #n…
positionとは テキストP.130〜136 positionプロパティは、ボックスの配置方法（基準位置）が、相対位置か絶対位置かを指定する positionプロパティで指定するのは、配置方法（基準位置）のみ static 特に配置方法を指定しません。この値のときには、top、bot…
文書構造の構築 レイアウトのための、id名・class名を付与する 画像挿入 《index.html》 <html lang="ja"> <head> <meta charset="UTF-8"> <title>うちのにゃんこ</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="container"> <div id="header"> <h1><span>★</span>うちのにゃんこ<span>★</span></h1> <p id="lead">我が家のアイドル、…</p></div></div></body></html>
実習（テキスト） 素材 ★うちのにゃんこ★ 我が家のアイドル、にゃんこ達を紹介します！ 我が家のにゃんこ紹介 飼い主紹介 猫写真募集 我が家のにゃんこ紹介 ●すばる（白キジトラ・オス） 目と耳が大きくてすばらしくイケメン。鳴き声もなかなかかわゆい。幼…
楕円形ツールを自由に使う ここまでは、ペンツールを使わなくても形にできます。 楕円を描いて、ハサミツールで切っても曲線にはなります。 アンカーポイント切り替えツールを使う 楕円の端をとがらすには、「アンカーポイント切り替えツール」でクリックし…
２カラムレイアウト基本 画像は適宜選択する 素材例 Homepage Title サブタイトルサブタイトルサブタイトル コンテンツのタイトル コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述しま…
ナビゲーションの役割 ユーザーが目指すページに進めるよう適切に案内すること HTML5では、主要なナビゲーションには nav要素を使用する ナビゲーションの基本形 li要素の横並びは、floatプロパティで配置する インライン要素は、displayプロパティでブロッ…
画像スペースの仮配置 placehold PLACEHOLD.IT 楕円形で仮配置したい場合 <html lang="ja"> <head> <meta charset="UTF-8"> <title>ロゴマークの仮配置</title> <style> h1>img { border-radius: 50%; } </style> </head> <body> <h1 class="logo"><img src="http://placehold.it/226x66" alt=""></h1> </body> </html>
新規ドキュメント 横幅800pxピクセルのナビゲーションボタンを作成するので、幅960pxを設定 ピクセルプレビュー ピクセルプレビューにチェック 長方形を描画 CS6・CCの場合 線の位置を内側にする（書き出しが、800pxからずれない） 区切り線を追加 ダイレク…
ページ内の必須項目 ヘッダー・フッターに使用する section要素やarticle要素に入れることもできる 《header要素とfooter要素を使ったマークアップ》 <html> <head> <meta charset="UTF-8"> <title>無題ドキュメント</title> </head> <body> <header> <h1>セクションの見出し</h1> <p>テーマのキーワードを含むリード文</p> <nav> <ul> <li><a href="#">メニュー１</a></li> <li><a href="#">メニュー２</a></li></ul></nav></header></body></html>
主要なナビゲーションに使う 主要なナビゲーションやサイドバーのグローバルメニューのみを扱う セクショニングコンテンツなので、アウトラインを明確に表示するためには見出しを入れることもあります テキスト中にある細かなリンクはnav要素である必要はな…
補足的なコンテンツに使う メインコンテンツに比べて重要度が低い補足的なコンテンツを扱う 一般的にサイドバーに配置されるコンテンツを入れますが、ページのサイドにレイアウトしなければいけないわけではありません 《aside要素を使ったマークアップ》 <section> <h1></h1></section>…
ブログなどの記事に使う 独立した記事として成立する内容に使う 自己完結した内容を示す 具体的には独立して配布や再利用できるものにマークアップします 雑誌や新聞の記事、ブログのエントリー、インタラクティブなウィジェットやガジェット、ユーザーが送…
section要素でアウトラインを表す コンテンツやテーマによってグループ分けをしたセクション区切り section要素は、要素の内容が明示的に文書のアウトラインに載る場合にのみ使用することが適切です 通常見出しを持っています section要素は、一般的なコンテ…
