PAGES

GUIDE

DATA

心のダム IdeaNote


MEMO | 2019.08,07

▷ボックスモデルを理解する
以下のプロパティーについての理解が必要

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

▷ユニバーサルセレクタによる余白のリセット
ブラウザにはデフォルトCSSというものがあり、特に指定のない要素には自動的に margin, padding また line-height が適用される。これは、デザイナーが精密な位置調整を行う場合に邪魔になるので、すべての要素に対して「余白のリセット」を行った上で、後に各々に余白の定義をするのが一般的。
ユニバーサルセレクタ( * )を使うと、すべての要素に一斉制御が可能になる。CSSの先頭で、以下のような記述をするとよい。

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

▷大学のサーバーにアップロード
学生個々人にメールアドレスとホームページ作成用のエリアがすでに用意されている。外部への公開には申請が必要ですが、学内のネットワークからは、以下のアドレスで閲覧可能。

http://www.kyusan-u.ac.jp/~k19asXXX

FileZillaを起動
以下の3つの情報を入力して接続

       サーバー → ftp.ip.kyusan-u.ac.jp 
       ユーザID → K'sLifeで用いているもの
       パスワード → K'sLifeで用いているもの

接続に成功すると
ウインドウ右側に、学生個々の個人ディレクトリが見える(中央会館の実習室で見える個人用のドライブと同じ)
WWW-KSUというフォルダがWeb公開練習用のフォルダ

▷アップロード
制作中のフォルダ内の各ファイルを、WWW-KSUフォルダの中へドラッグ&ドロップすることでアップロードされる。
2回目以降(つまりページの更新時)は「上書き」することになる。
学内からのみの閲覧とはいえ、不特定多数の人から見える状態になるので、不適切な記述、画像がないか、事前に確認。

  • アップロードに関する補足(アップしても表示されない場合)
    www.kyusan-u.ac.jp/~k19asXXX/ でアクセスできるようにするには、WWW-KSU 直下に index.html を含む全てのファイルをアップする必要がある。以下のような失敗例が多く見られる。
   ホームディレクトリ直下(WWW-KSU の外)にアップした場合
   これは基本的にアクセスできない
   WWW-KSU 直下に index.htmlが無い場合(例えば top.html とした場合)
   ・・・ac.jp/~k19asXXX/top.html と直接指定すれば閲覧可能
   WWW-KSU 直下にサイトのフォルダごとアップした場合
   ・・・.ac.jp/~k19asXXX/[フォルダ名] と指定すれば閲覧可能


MEMO | 2019.08.05

▷HTML文書の基本構成

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

▿セクション

  • 汎用区画:div, section, article, aside,
  • ヘッダー:header
  • ナビ:nav
  • メイン:main
  • フッター:footer
  • 見出し:h1, h2, ・・, h6
  • 水平線:hr
  • 文章段落:p
  • 強制改行:br ← 段落内での改行に使用する

▿リンク:a

  • 内部リンク(サイト内にある別のhtmlファイルへのリンク)

    a href="gallery.html">(リンク文字、画像)</a>

    • 外部リンク(外部サイトへのリンク)

      a href="http://www.~.com">(リンク文字、画像)</a>

▷CSSの記法
CSSではどの部分の・何を・どうするかを記述する。
記述の基本ルールは以下のとおり

セレクタ(どの部分の) {
プロパティー(何を)  :  値(どうする) ;
プロパティー(何を)  :  値(どうする) ;
             :
}


MEMO | 2019.07.10

2Dペイント系(ラスター)

Adobe Photoshop http://ja.wikipedia.org/wiki/Adobe_Photoshop
The GIMP http://ja.wikipedia.org/wiki/GIMP
SAI http://ja.wikipedia.org/wiki/Sai 

2Dドロー系(ベクター)

Adobe Illustrator http://ja.wikipedia.org/wiki/Adobe_Illustrator
Inkscape http://ja.wikipedia.org/wiki/Inkscape

3D

3dsMax http://ja.wikipedia.org/wiki/3ds_Max
Maya http://ja.wikipedia.org/wiki/Maya
Blender http://ja.wikipedia.org/wiki/Blender
Cinema 4D http://ja.wikipedia.org/wiki/CINEMA_4D
MODO http://ja.wikipedia.org/wiki/Modo
Shade http://ja.wikipedia.org/wiki/Shade
LightWave http://ja.wikipedia.org/wiki/LightWave
SoftImage http://ja.wikipedia.org/wiki/Softimage
MMD https://ja.wikipedia.org/wiki/MikuMikuDance

映像編集・オーサリング

Adobe After Effects http://ja.wikipedia.org/wiki/Adobe_After_Effects
Adobe Flash http://ja.wikipedia.org/wiki/Adobe_Flash
Adobe Premiere http://ja.wikipedia.org/wiki/Adobe_Premiere
Apple FinalCut http://ja.wikipedia.org/wiki/Final_Cut_Pro
Jahshaka http://ja.wikipedia.org/wiki/Jahshaka
Lightworks https://www.lwks.com/ Freeware
YouTube STUDIO https://studio.youtube.com/

プログラミング言語

C言語 http://ja.wikipedia.org/wiki/C%E8%A8%80%E8%AA%9E
C# https://ja.wikipedia.org/wiki/C_Sharp
JAVA http://ja.wikipedia.org/wiki/Java
JavaScript http://ja.wikipedia.org/wiki/JavaScript
Processing http://ja.wikipedia.org/wiki/Processing
Python http://ja.wikipedia.org/wiki/Python
OpenGL(ライブラリ)http://ja.wikipedia.org/wiki/OpenGL


オープンソースとは、ソフトウェアのソースコード(プログラム)を、インターネット上に無償で公開し、万人にその改良や、再配布を認めたソフトウェアのことです。ソースコードをもとに、その技術の転用や、派生バージョンの作成ができる。誰もが自由に利用できる共有財産といえる。
1998年、The Open Source Initiative(OSI)という団体によって「The Open Source Definition」(OSD)が定義された。
オープンソースソフトウエア(OSS)には、以下ののような定義がある。
1. 自由な再頒布ができること
2. ソースコードを入手できること
3. 派生物が存在でき、派生物に同じライセンスを適用できること
4. 差分情報の配布を認める場合には、同一性の保持を要求してもかまわない
5. 個人やグループを差別しないこと
6. 適用領域に基づいた差別をしないこと
7. 再配布において追加ライセンスを必要としないこと
8. 特定製品に依存しないこと
9. 同じ媒体で配布される他のソフトウェアを制限しないこと
A. 技術的な中立を保っていること

MEMO|2019.06.19

・それは何か(名称)+図版:WHAT
・それはどのような目的で開発されたのか:WHY
・いつ・どこで・誰が開発したものか:WHEN, WHERE, WHO
・それはどのように機能するか(どのように使うか):HOW
・それはいくらするか:HowMuch
このフォーマットを参考にして下さい > http://design.kyusan-u.ac.jp/OpenSquareJP/index.php?plugin=attach&refer=Layout&openfile=Sample.pdf

MEMO|2019.06.05

"読ませる文字 と 見せる文字"
セリフ系は「可読性」にすぐれる >「読ませる文字」
サンセリフ系は「視認性・誘目性」にすぐれる >「見せる文字」

"GoogleFonts"
https://fonts.google.com


IDEA WORKSHOP|2019.05.15


  • メンダコ溶ける
    メンダコの形の製氷機を作る
  • 感情鳴らす
    キーボードに打ち込んだ言葉や文章などからAIが感情を読み取って音を鳴らす→活用法…イライラしている時に穏やかな音を鳴らして気分緩和


Last-modified: 2019-08-07 (水) 16:05:48