心のダム 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が感情を読み取って音を鳴らす→活用法…イライラしている時に穏やかな音を鳴らして気分緩和