PAGES

GUIDE

DATA


#author("2020-02-21T15:15:27+09:00;2020-02-21T15:13:44+09:00","default:member","member")
#author("2020-02-21T15:51:06+09:00;2020-02-21T15:15:27+09:00","default:member","member")
//&color(red){雛形を置いています。◯◯◯◯の部分を氏名等に修正して下さい。};
*岡部明日香&small(IdeaNote);
~
**参考リンク

[[See-ss>https://see-ss.com/components/button/]]
[[Hover>http://ianlunn.github.io/Hover/]]
-[[See-ss>https://see-ss.com/components/button/]]
-[[Hover>http://ianlunn.github.io/Hover/]]

**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

~


-''にんじん'' を ''やめる''
&answer2(キャラクターデザイン,「やめる」シリーズ…にんじんをやめた人参、消しゴムをやめた消しゴムなどをキャラクター化);

-''たまねぎ'' に ''泊まる''
&answer2(施設,玉ねぎ型の宿泊施設。きのこやカボチャなど、やさいをモチーフにした宿泊施設);

~

**2019.05.06

-''グッドデザイン賞の理念''
#hr

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