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