LogoMark.png

岡部明日香/IdeaNote

岡部明日香 IdeaNote


↑

参考リンク

↑

2019.08.07

"続き”


▶︎ページレイアウト
CSSによるレイアウト作業は、大きな箱の中に小さな箱を詰めていく作業と考えるとイメージしやすい。
→ソースコードを書く際は、きちんとインデントをとってわかりやすく書く

ワイヤーフレームを描く

ワイヤーフレームとは、HTMLの枠組み構造を図解した「サイト設計図」です。HTML+CSSを効率よくコーディングするには、まずはじめにワイヤーフレームを描いて、header, nav, main {section+aside} , footer などの位置関係を明確にしましょう。詳細な領域区分をする場合、各要素 ID名を付ける場合は、この段階で明確にします。
GoogleImage:Web ワイヤーフレーム

ボックスモデルを理解する

箱組みをする際には、どこにどのような余白をつくるかが非常に重要です。以下のプロパティーについての理解が必要です。

   margin　境界の外側の余白
   border　境界
   padding　境界の内側の余白
   width, height　内容部分の幅と高さ

参考:CSS/BoxModel

▶︎余白

↑

{

   margin: 0;
   padding: 0;
   line-height: 100%;
   list-style-type: none;
   text-decoration: none;

}

ブラウザにはデフォルトCSSというものがあって、特に指定のない要素には自動的に margin, padding また line-height が適用されます。これは、デザイナーが精密な位置調整を行う場合に邪魔になるので、すべての要素に対して「余白のリセット」を行った上で、後に各々に余白の定義をするのが一般的です。

▶︎レイアウトに必須のキーワード

とりあえず、以下の２つのキーワードで大半のレイアウトは可能になります。

   Flexbox
   Position

Flexboxを用いたレイアウト

親要素(Flexコンテナ) に display: flex; を設定することで、子要素(Flexアイテム) の並び(縦・横)や順序(上下・左右)を制御する方法です。例えば、親要素に対して、display: flex; flex-direction: row; と書くと、子要素は横に並びます。
以下、メニューを横に並べる事例です。

   HTML側の記述
   <ul>
     <li><a href="#">about</a></li>
     <li><a href="#">gallery</a></li>
     <li><a href="#">links</a></li> 
   </ul>
   CSS側の記述
   ul {
     display: flex;
     flex-direction: row;
   }
   li {
     width: 120px;
     margin-right: 20px;
   }

詳しくは、CSS/Flexboxをご覧下さい。

▶︎画像
画面を小さくした時に歪む
→index(HMTL)側に大きさを入れているのが原因
→styleのほうでarticle imgでwidth100%とかく

▶︎positionを用いたレイアウト

floatを用いた「箱詰め作業」では、スペースに余裕がなければ収まりません。しかし、スペースの有無に関わらず、「絶対的にこの場所に表示したい」というケースもあります。そのような場合に使えるのが、positionというプロパティーです。
→ステッカー的な感じで浮かせる

   位置の基準となるブロック（一般的には #container）に
   position:relative;
   と書きます。これで基準となるブロックの左上が原点（0,0）となります。

→高さをしていすること

   対象となるブロックに
   position:absolute;
   top: Ypx;
   left: Xpx;
   と書きます。これで当該ブロックは（X,Y）の位置に表示されま

▶︎アップロード
http://www.kyusan-u.ac.jp/~k19asXXX

   FileZillaを起動します（実習室にはインストール済みです）
   以下の３つの情報を入力して接続します。
       サーバー　→　ftp.ip.kyusan-u.ac.jp または直接 133.17.4.74
       ユーザID　→　K'sLifeで用いているもの
       パスワード　→　K'sLifeで用いているもの

▷リンク
http://design.kyusan-u.ac.jp/OpenSquareJP/?%E5%AE%9F%E6%8A%80%E8%AC%9B%E7%BF%92%EF%BD%9CHTML%EF%BC%8BCSS

WWW-KSU→http://www.kyusan-u.ac.jp/~k19asXXX/ファイル名
いくつものサイトを作れる

▶︎演習

サンプルのHTML構造を変えて（ワイヤーフレーム構造を変えて）様々なパターンサンプルを作ってみましょう。

   以下のパターンは、サンプルから比較的簡単に変形できます。
   #container{ header{ nav} →構造を変える, main{ section, aside } , footer }
   #container{ header, main{ nav, section, aside } , footer }

→HTML自体を書き換えるひつようがある
⚠︎データはコピーして残しておく方がよき

   全体を #container で囲むというのは、初歩の体験として全体をつかみやすくするための発想です。絶対こうしましょう・・というものではありません。
   header, footer が画面幅100%になるパターン
   header{ nav } , main{ section, aside } , footer
   シングルページで校正する場合は、以下のようになります。
   header, nav,  main{ section, section, section ・・}, footer


↑

2019.08.05

”ホームページの作り方”


▶︎キーボード

   基本的なキー配列はWindowsと同様ですが、一部の特殊キーが異なります。
       [ ⌘（コマンド） ]：Windows の [ CTRL（コントロール） ]と同様
       [ option ]：Windows の [ ALT ]と同様
       [ delete ] の挙動が Windows とは異なる

▶︎MacのファンクションキーにはWinとは異なる機能があてられているので、
Windowsのように「入力後に [F7] でカタカナ」ができませんが、ひらがな入力を基本として、以下の操作で文字種を事後切り替えできます。

   [ CTRL ] + [ j ]　ひらがな
   [ CTRL ] + [ k ]　カタカナ　（Windowsの[F7]相当）
   [ CTRL ] + [ l ]（エル）　全角英数
   [ CTRL ] + [ ; ]　半角英数　（英数キーを２回押しでも可）

▶︎そのほか
[ ⌘ (CTRL) ] + [X]　カット（切り取り）
[ ⌘ (CTRL) ] + [ F ]　検索窓の表示　

作るソフト　TextEditor ＞ Atom
見るソフト　Browser ＞ Firefox, Chrome, Safari, Microsoft Edge(I.E.)
転送するソフト　FTP ＞ FileZilla , FFFTP

注）フォルダ名、ファイル名は必ず半角英数で
images　page01.html　page-01.html　page_01.html　logoMark.jpg など、
Webサイトを構成するフォルダやファイルの名称は、すべて英字ではじまる半角英数で命名します。日本語や特殊記号、またスペースも不可です。

▶︎パソコンの仕組み
HD→デスクトップ→ソフトウェアなど→細かいデータなど



”HTML"
▶︎HTMLタグの基本
HTMLは、情報要素を以下のようなタグでくくる形で記述します。

◯◯>　〜　</◯◯>　← 前者を開始タグ、後者を終了タグといいます。

HTML文書の基本構成

   文書の全体：<html> 〜 </html>
   ページに関する前置き情報：<head> 〜 </head>
   ブラウザの主画面に表示される情報：<body> 〜 </body>

　→ヘッドとボディーは一つだけ
　▷イメージは箱の中に箱がある感じ

▶︎用語
セクション

   汎用区画：div, section, article, aside,

　→

   ヘッダー：header

　→はじめのタイトル的な

   ナビ：nav

　→メニュー

   メイン：main

　→メインはメイン

   フッター：footer

　→一番の下のところ

▶︎表示

   見出し：h1, h2, ・・, h6
   水平線：hr
   文章段落：p
   強制改行：br　← 段落内での改行に使用します。

▶︎リンク

a href="gallery.html">（リンク文字、画像）</a>
→aではさむとリンクになる

▶︎画像

img src="images/sample.jpg" width="320">


”CSS"
▶︎３種類の記述方法

   HTMLファイル内の各開始タグの中に直接書く（以下 例）
   <h1 style="font-size: 24px;">・・・</h1>
   HTMLファイルのヘッダー部分に<style>タグを使ってまとめて書く
   HTMLファイルとは独立した別のファイルに書く（ 拡張子は .css ）
   で、結論から言うと、３つめを採用するのがWeb標準で、ここではそれにしたがって、style.css を別ファイルとして独立させています。

▶︎反映の仕方
index.html の<head>内に、以下の１行を追記して下さい。

link href="style.css" rel="stylesheet" >
→画面を分割するとよき（表示→ペイン分割）

▶︎CSSの記法
セレクタ（どの部分の） {

   プロパティー（何を）  :  値（どうする） ;
   プロパティー（何を）  :  値（どうする） ;
        　　　 :

}
が必要

▶︎文字
移動　　◯ rem→◯文字分
https://www.colordic.org/
WEB色見本

特定のものだけ変える時
HTML要素に id="任意名称" を加える。記号は#（シャープ）

何個かある時
HTML要素に id="任意名称" を加える。記号は.（ドット）

書籍　HTML CSS 検索🔍

↑

2019.06.19

memo
↓↓↓
inoue.ko※ip.kyusan-u.ac.jp 19AS0000_情報デザイン概論
レポート提出について
テーマ「◯◯の可能性」〜情報デザインにできること〜
Webアプリケーションや動画共有サービスといった「仕組み(ソフトウエア)」、あるいは、スマートフォンや◯◯デバイスといった「情報機器(ハードウエア)」をひとつ取り上げて、それについてレポートして下さい。
レポートの構成
まず、取り上げた対象について以下のような基本情報を記載して下さい。
・それは何か(名称)＋図版：WHAT
・それはどのような目的で開発されたのか：WHY
・いつ・どこで・誰が開発したものか：WHEN, WHERE, WHO
・それはどのように機能するか（どのように使うか）：HOW
・それはいくらするか：HowMuch
そして、それが今後の人と社会の未来にとって、どのような可能性を持つか、あなたの意見・感想・提案等を自由に語って下さい。
形式：A4サイズ 1枚（文字＋図版、手書き不可）> PDFでメール添付
このフォーマットを参考にして下さい　＞　fileSample.pdf
提出締切：7月17日(水)

　

↑

2019.06.05

文字の存在意義
記憶の外在化と蓄積・保存
情報の時間差伝達を可能に
→メモなど、後から見てわかる
文字という情報伝達媒体の特殊性
文字は視覚情報であると同時に聴覚情報である
→見た瞬間頭の中で音声が流れる
目は形から言葉をとらえ、耳は音から言葉をとらえる


やまとことば
太古より日本人が使い続けてきた言葉。日本語の文章の中の、漢語、外来語、また「〜する」という形の動詞以外のもので、一般に「訓読み」のもの
訓読み：音を聞いただけで意味が定まる　→　歌詞、キャッチコピー
音読み：漢熟語、同じ音でも複数の意味（じしん：自身、地震、時針・・）

Google Font

https://fonts.google.com/specimen/VT323
https://fonts.google.com/specimen/Amatic+SC
https://fonts.google.com/specimen/Overpass+Mono
https://fonts.google.com/specimen/Major+Mono+Display


↑

IDEA WORKSHOP｜2019.05.15



↑

2019.05.06

人間（HUMANITY） もの・ことづくりを導く創発力
本質（HONESTY） 現代社会に対する洞察力
創造（INNOVATION） 未来を切り開く構想力
魅力（ESTHETICS） 豊かな生活文化を想起させる想像力
倫理（ETHICS） 社会・環境をかたちづくる思考力

PAGES

↑

GUIDE

Last-modified: 2020-03-30 (月) 20:15:03