PAGES

GUIDE

DATA

岡部明日香 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 が適用されます。これは、デザイナーが精密な位置調整を行う場合に邪魔になるので、すべての要素に対して「余白のリセット」を行った上で、後に各々に余白の定義をするのが一般的です。

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

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

   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を起動します(実習室にはインストール済みです)
   以下の3つの情報を入力して接続します。
       サーバー → 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 ] + [ ; ] 半角英数 (英数キーを2回押しでも可)

▶︎そのほか
[ ⌘ (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"
▶︎3種類の記述方法

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

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

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) 社会・環境をかたちづくる思考力

Last-modified: 2019-08-07 (水) 16:08:03