2012-11-01から1ヶ月間の記事一覧
CSSによるページ構築の手順 この「グループ化」をするときに、「id名」「class名」を使い分けて、グループの意味を作っていきます。 文書構造のグループ化 グループ化とは、div要素によるコンテンツのブロック化 「コンテンツのブロック化」であるので、１行…
リンクの色（擬似クラス：Pseudo-classes） 要素の性質スタイルを適用させたい場合に使います 主に「a要素」のリンク時のカーソルの表示状態を設定します 疑似クラスには次の6種類があります。 lang 指定された言語のスタイル link 通常リンク（未アクセス）…
文字の囲み borderプロパティの値を指定する 文字と囲みとの空きは、paddingプロパティの値を指定する <html lang="ja"> <head> <meta charset="UTF-8"> <title>実践枠で囲む</title> <style> </meta></head></html>
ボックスモデルの解説の代表例 ボックスを構成する要素 ボックス幅は、コンテント領域幅 ＋ パディング ＋ ボーダーの太さ ＋ マージンです。 コンテント領域がボックス幅ではないので、注意が必要です。 ※コンテント：widthとheightプロパティで規定される…
セレクタの種類 タイプセレクタ IDセレクタ classセレクタ 子孫セレクタ 属性セレクタ ユニバーサルセレクタ などがあります。 タイプセレクタ 要素に対してスタイル指定する div: division em：emphasis h1 { color: #00CC00; } <h1>大見出し要素</h1> 複数セレクタ …
相対パスと絶対パス ホテルの法則 「ホテルの法則」は存在しません。（授業内で説明します。） このクラスでの「相対パス」の理解のための法則です。 相対パス（relative path） ハードディスクなどでファイルやフォルダの所在を示す文字列(パス)の表記法の…
勉強のステップ Webサイトを見る デフォルトCSSが適用されたページを見る HTMLのソースコードを見る CSSのソースコードを見る ギャラリーサイトの活用 ギャラリーサイトを閲覧する 気になったサイトを分類しながらブックマークする ブックマークを管理する C…
達成目標 授業４日経過時点での目標 できるかできないかではなく、やるかやらないか 「愚直」にやる、それだけです よく見る 誰かが作ったWebサイトをよく見る 見たことも無い「アート」を作る仕事ではありません。 先人たちの良い例をいっぱい見ることで、…
CSS（Cascading Style Sheets） 文書構造と体裁を分離させるという理念を実現する為に提唱されたスタイルシートの、具体的な仕様の一つ。 メリット サイトの重さ軽減（SEO対策にも効果あり） 自由なレイアウト（文章構造を保ちながら可能） 編集が簡単（外部…
文書構造：まとめ 文書構造とは 「文書構造」つまり、ページ内容のツリー構造を指します。 この文書構造を理解するには「パラグラフの概念」を理解する必要があります。 記述（入力）する この段階では、複雑な意味やルールは存在しません。 テキストエディ…
ブラウザに表示される仕組み 表示するものは「HTMLドキュメント」です。 「HTMLドキュメント」は、テキストで書かれた「HTML文書」です。 文章を解釈して表示するのが、「ブラウザ」です。 HTMLファイル内に記述されている「画像の置いてある住所」をもとに…
指示通り操作する １日目は、「パソコンの使い方」なのですが、そもそも使えなければ勉強のしようもないので、これから勉強をしていく上での環境を整えましょう。 パソコンを起動しましょうと言われたら起動する ブラウザーを立ち上げましょうと言われたら立…
Webデザインの勉強の仕方 テキストはゆっくり読む（速読法などもってのほかです） 疑問がでてきたら考える（脳に考えていることを教えます） ノートに鉛筆で書いてみる（手で書けることはPC入力はできます） 寝る前にはTVなどをみないで頭を休ませる（脳は動…
海馬の確認 「聞く→見る→書く」これを繰り返します このとき「感情のスイッチ」を入れないこと（いやだなぁ〜と思いながらやっていると、ほんとうに嫌になります。） 学生が英単語を覚えるように、そらで出てくるまで繰り返しましょう。 SEOはどうでもよいの…
初心者が最初に手にする本 IllustratorやPHPの本ではなく、これだ！（もちろん図書館で借りる） 痛快!コンピュータ学 (集英社文庫)作者: 坂村健出版社/メーカー: 集英社発売日: 2002/03メディア: 文庫購入: 16人 クリック: 233回この商品を含むブログ (24件)…
内閣告示『外来語の表記』 外来語の表記 Wikipedia:外来語表記法/英語 Microsoft マイクロソフト製品ならびにサービスにおける外来語カタカナ用語末尾の長音表記の変更について 2008 年 7 月 25 日 (Japan) ルール変更の理由とメリット コンピューターが広範…
無彩色の中にある有彩色 授業の中で詳細を説明します 作り方は、Photoshopの授業で 知覚心理学と色彩理論はデザインの理論の授業で ひとが好ましいと思ったり、欲しいと思うことには理由があります。 現在のWebの仕事には、そういったことにも配慮して作る必…
Jimdoは JimdoというCMSは、就職活動には使いにくいかもしれません ホームページ（Webサイト）は、誰でも簡単に作ることができるという体感にはうってつけです Jimdoの使い方 -基礎 超初心者が、Jimdoをどう使えばよいかはほぼ書きました（まだスタイルに関…
Dreamweaverは、高価なテキストエディタ なぜ高価なのか？ その金額で買う人がいるから なぜ買うのか？ その価値があるから コードヒント 「環境設定」→「コードヒント」 この設定をすれば、単なる「高価なテキストエディタ」です。 よくネット上に書いてあ…
見る力 どれが良いサイトなのかを判断するには、「見る力」が必要です 漠然と「見る」といっても難しい まず、良いサイトの紹介サイトをサイトを見つけてみましょう 真似をして、「好きなサイト100選」作ってみましょう（授業の中では、Jimdoをつかいますが…
基本操作の確認 パソコンの起動・終了ができる マウスのクリック、ダブルクリック、ドラッグができる フォルダーを作り、名前を変更することができる フォルダーを所定の位置に移動できる 和欧文混合の文字入力ができる コピー＆ペーストができる 一般的に、…
ドキュメント（コンテンツ） ドキュメントは、多くの人へ効率的に情報を伝達するために適したツールです。 その中に書かれる内容が「コンテンツ」です。 そのドキュメントをHTML形式で書いたものが、Webページです。 そして「body要素」内に書かれる部分を「…
HTML：HyperText Markup Language Webページを記述するためのマークアップ言語 「ハイパーテキストのための、文書に目印を付ける方法を定めた文法上の約束」ということになります。ある文章の中にある言葉から、関連のあるページのその言葉にリンクしてある…
【準備課題01】〜【準備課題50】は、授業までの時間を有効活用するための課題です。 ここからは、授業に即した実践です。 【準備課題51】 ヨーロッパの城で、日本人が所有者の城の名前は？ 検索する Webの勉強にもっとも必要なスキルは？と聞かれれば、検索…
LibreOffice Officeでやるべきなのですが、持っていない人もいると思うので無料の「LibreOffice」を使います。 LibreOfficeのサイトに検索でたどり着く LibreOfficeをダウンロードする 圧縮されている場合は、解凍する インストールする 以上の操作は、Webの…
