季卓芸/MEMO
をテンプレートにして作成
HOME
ソーシャルデザイン学科
最新の更新
2017
MEMBER 2017
伊藤晃生
加藤麻梨絵
木原慧士
古賀梨紗子
堺由加子
髙橋結
畑瀬英晴
平田愛恵
松浦直幹
山本桜雅
山本将嗣
井上友雅
河野紗恵
小池和輝
野村麗奈
榎木美里
王淑嬋
林ありさ
前田さや
枡田瑞穂
上田真衣
2018
MEMBER 2018
井上大輝
猪本結衣
上原一成
幸田奨之
小森丈
佐伯華帆
坂本将駄
田代飛凱
豊田祥歩
中川弘章
平塚海登
深江沙羅
眞島渓斗
山口佳奈
山村樹
江崎悠芽
大村雅人
小倉龍聖
中尾日香梨
林花野
増丸竣太
河原涼奈
富山真至
森栄里子
2019
MEMBER 2019
阿萬薫秋
生末知菜美
岩井玄貴
上村仁
岡部明日香
折橋和真
鹿毛鈴菜
川村晋太郎
紀野はるか
日下恵輔
興梠愛加
古賀旭
榛葉啓人
進こうへい
鈴木貴久
田中満里奈
田村ひより
手柴数騎
當山清龍
中嶋碧海
長岡茉理奈
奈須本真椰
成田佳津希
西隆彰
野田萌々菜
平川真聖
古野海志
銘苅和輝
森江龍雅
山川滉生
山本航
吉永龍太朗
渡部楓花
矢幡龍星
池田亮介
緒方悠人
木村柊介
小南龍翔
園田浩志郎
真嶋康成
森岡彦磨
安田美菜
2020
MEMBER 2020
有川真純
井田あぐり
伊藤みらの
岩井皓熙
大石修悟
大浦脩介
大隈莞名
奥田真矢
川口大空
木村天美
吉良琉汰
沓掛渚
児玉七菜美
佐藤洋祐
ジャング李音
高橋莉奈
谷口菜々子
玉木晴菜
名嘉はな
中村暁成
西元聖喜
野田悠斗
畑田優羽
蓮子太蔵
林耕平
平島功晴
堀田七海
牧野友紀
宮崎あゆ
山崎耀大
山城英太郎
山路由依
山田晃大
山田美優
山元友敬
有馬優
石垣永樹
石原明
江口虹晴
國政愛里
小林未來
佐藤拓眞
志土地裕月
中林幹仁
二宮龍之輔
波多江七穂
林竜我
眞鍋翔太
水野里菜
森美咲
STAFF
井上貢一
井上友子
岩田敦之
釜堀文孝
北島己佐吉
渡邊雄二
OBOG
SESSION
専門科目一覧
ソーシャルデザイン概論
ソーシャルデザイン演習
ソーシャルデザイン応用演習
情報デザイン演習I
地域ブランド企画演習I
情報デザイン演習IIA
情報デザイン演習IIB
情報デザイン演習IIIA
情報デザイン演習IIIB
情報デザイン研究I
情報デザイン研究II
地域ブランド企画演習IIA
地域ブランド企画演習IIB
地域ブランド企画演習IIC
地域ブランド企画演習IID
デザイン企画演習
視覚デザイン実習
視覚デザイン演習
Webデザイン実習
卒業研究
教務ガイダンス
卒展2020
OpenCampus
RecommendedVideo
BasicKnowledge
PROJECT
LINKS
SEARCH
開始行:
*MEMO
~
***2019.10.24
-http://design.kyusan-u.ac.jp/OpenSquareJP/?JavaScript/Sa...
-http://design.kyusan-u.ac.jp/OpenSquareJP/?ResponsiveDes...
~
***2019.09.19
-http://design.kyusan-u.ac.jp/OpenSquareJP/?PHP
-http://design.kyusan-u.ac.jp/OpenSquareJP/?PHP/Sample01
-http://design.kyusan-u.ac.jp/OpenSquareJP/?PHP/Sample02
~
FZ
学園サーバーFTP接続先：ftp.ip.kyusan-u.ac.jp（ 133.17.4....
最终保存的文件夹内位置
#image(66.png)
~
~
***CMS
#image(CMS.jpg,right,30%)
~
~
~
~
*** Webserver
#image(,right,30%)
~
~
~
~
#image(スクリーンショット 2019-09-19 10.41.48のコピー.p...
~
~
****UPLOAD写真PLUS 添加照片
#image(1.png)
*** Photoshop 照片调尺寸
1.サイズ ＊ イメージ中で 画像解析度640
2.フェルタ中でレンズ辅正
3.保存
size
#image(2.png)
~~
~
*画像データの準備(2019.10.17)
画像のリサイズ
画像のリサイズを行うにはオンラインツールやスマホ、PCにイ...
画像のリサイズサービスの活用
Bulk Resize Photos：https://bulkresizephotos.com/
上記の利用方法解説 ：https://ferret-plus.com/1866
Adobe Photoshop で「Web用に書き出し」を使う。
Photoshop Express Editor というオンラインツールも...
The GIMPなどのオープンソースフリーウエアを使う
第二回 2019.09.26.
*PHP
Hypertext Preprocessor（ Personal HomePage Tool ）
PHPはオープンソースの汎用スクリプト言語で、Webアプリケー...
file:///home/・・・/sample.html
自分のパソコンｈｔｔｐ
http://localhost/sample.php
~
***一方、PHPが含まれたWebアプリケーションの動作確認をする...
http://www.kyusan-u.ac.jp/・・・/sample.php
~
**JavaScript vs PHP
*点击画面有按键🔘。 文件名dice.html
today :2019.10.03
*PukiWiki サイト開発の前提
開発者自身が PukiWiki の使い方を熟知しておく必要がありま...
以下のような機能については、PukiWikiのプラグインを活用す...
検索機能：＃search プラグイン
投稿機能：＃article、 ＃comment プラグイン
最新の更新の表示：＃recent プラグイン
他のページの読み読み込み機能：＃include プラグイン
部分的な文字色の変更：＆color(red){・・・・}; プラグイン
部分的な文字サイズの変更：＆size(12){・・・・}; プラグイン
表組み：｜ (縦ストロークの利用)
囲み表示(整形済みテキスト)：行頭に半角スペース
左寄せ・センタリング・右寄せ：LEFT：、CENTER：、RIGHT：
参考：EditGuide
PukiWikiの記法とHTMLタグの関係理解
Wikiの記法がどのHTMLタグに対応するのか、その対応関係を知...
要素 Wikiの記法 HTMLタグ
ページ名 Wikiページ名 h1
大見出し * h2
中見出し ** h3
小見出し *** h4
箇条書き レベル１ - ul.list1 li
箇条書き第 レベル２ -- ul.list2 li
段落 記述+改行 p
整形済みテキスト 行頭半角空白 pre
引用 行頭に ＞ blockquote p.quotation
リンク [ [ ] ] a
強調 ’’文字列’’ strong
斜体 ’’’文字列’’’ em
取消線 ％％文字列％％ del
学科サイトの個人ページで、プラグインの活用を含め、様々な...
2019.10.24
**HTML最上方
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<title>Sample Site</title>
</head>
**HTML最上方《head》中添加
<script src="script.js"></script>
#image(スクリーンショット 2019-10-24 11.32.20.png)
背景变色
**HTML
<article>
<button onClick="MyFunction()" >Click Me!</butt...
article 01
</article>
**JS
function MyFunction(){
var obj = document.body;
obj.style.backgroundColor = 'blue';
}
～
～
***下方变色（JS）
**HTML
<article>
<button onClick="MyFunction2()" >Click Me!</but...
article 02
<header id="ABC">・・</header>
</article>
**JS
function MyFunction2(){
var obj = document.getElementById('ABC');
obj.style.backgroundColor = 'red';
}
～
～
***下方有色到变色（JS）
**HTML
<article>
<button onClick="MyFunction3()" >Click Me!</but...
article 03
<ul class="list">
<li class="line">A</li>
<li class="line">B</li>
<li class="line">C</li>
<li class="line">D</li>
<li class="line">E</li>
<li class="line">F</li>
<li class="line">G</li>
<li class="line">H</li>
<li class="line">I</li>
<li class="line">J</li>
<li class="line">K</li>
</ul>
</article>
**JS
function MyFunction3(){
// lineクラスの把握（情報が line[0], line[1] ,line[2]...
//var lines = document.getElementsByClassName('line');
var lines = document.querySelector('.list').children;
// i 番目の pタグ部分の背景を赤に
for( var i=0; i<lines.length; i++ ){
lines[i].style.backgroundColor = 'green';
}
}
**CSS中添加 可表示***条形
article ul li{
margin-bottom: 10px;
}
**尺寸变换自由缩小扩大
***HTML最上方《head》中添加
<meta name="viewport" content="width=device-width">
***CSS
举例：/****** Header ************/部分
header h1{
position: absolute;
top: 2rem;
left: 6rem;
font-size: 2rem;
color: white;
}
header h2{
position: absolute;
top: 5rem;
left: 6rem;
font-size: 2rem;
color: white;
}
**添加⬇️
@media only screen and (max-width: 768px) {
然后只输入调整的部分
header h1{
font-size: 1.5rem;
}
举例：/****** NAV ************/部分
nav {
padding: 1rem 3rem ;
background: #CCEAF2;
}
nav ul{
display: flex;
flex-direction: row;
}
nav ul li{
margin-right: 2rem;
}
nav ul li a {
color: white;
}
**添加⬇️
@media only screen and (max-width: 768px) {
然后只输入调整的部分
横的改为竖的
nav ul{
flex-direction: column;
}
}
**CSS 尺寸中的 高度自由合理变换
例： 添加👉min-height: 8rem;
article{
min-height: 8rem;
padding: 1rem;
margin-bottom: 2rem;
background: #FFF;
}
**関数の独立性を高める
可随机变换颜色
*** HTML側
<button onClick="ChangeBGColor()" >Click Me!</button>
***JS側
// 背景色の変更（汎用性が低い）
function ChangeBGColor( ){
var obj = document.body;
obj.style.backgroundColor =RandomColor();
}
//ランダムな16進6桁のカラーコードを生成（汎用性が高い）
function RandomColor(){
var col = Math.floor( Math.random() * 0xFFFFFF )....
for( var i = col.length; i<6; i++ ) { col = '0' +...
return '#' + col;
}
**情報科学研究科公式サイト開発
WireFrame > pukiwiki.skin.php
informationscience_20191205.zip
http://design.kyusan-u.ac.jp/socialdesign/?%E7%89%B9%E8%A...
終了行:
*MEMO
~
***2019.10.24
-http://design.kyusan-u.ac.jp/OpenSquareJP/?JavaScript/Sa...
-http://design.kyusan-u.ac.jp/OpenSquareJP/?ResponsiveDes...
~
***2019.09.19
-http://design.kyusan-u.ac.jp/OpenSquareJP/?PHP
-http://design.kyusan-u.ac.jp/OpenSquareJP/?PHP/Sample01
-http://design.kyusan-u.ac.jp/OpenSquareJP/?PHP/Sample02
~
FZ
学園サーバーFTP接続先：ftp.ip.kyusan-u.ac.jp（ 133.17.4....
最终保存的文件夹内位置
#image(66.png)
~
~
***CMS
#image(CMS.jpg,right,30%)
~
~
~
~
*** Webserver
#image(,right,30%)
~
~
~
~
#image(スクリーンショット 2019-09-19 10.41.48のコピー.p...
~
~
****UPLOAD写真PLUS 添加照片
#image(1.png)
*** Photoshop 照片调尺寸
1.サイズ ＊ イメージ中で 画像解析度640
2.フェルタ中でレンズ辅正
3.保存
size
#image(2.png)
~~
~
*画像データの準備(2019.10.17)
画像のリサイズ
画像のリサイズを行うにはオンラインツールやスマホ、PCにイ...
画像のリサイズサービスの活用
Bulk Resize Photos：https://bulkresizephotos.com/
上記の利用方法解説 ：https://ferret-plus.com/1866
Adobe Photoshop で「Web用に書き出し」を使う。
Photoshop Express Editor というオンラインツールも...
The GIMPなどのオープンソースフリーウエアを使う
第二回 2019.09.26.
*PHP
Hypertext Preprocessor（ Personal HomePage Tool ）
PHPはオープンソースの汎用スクリプト言語で、Webアプリケー...
file:///home/・・・/sample.html
自分のパソコンｈｔｔｐ
http://localhost/sample.php
~
***一方、PHPが含まれたWebアプリケーションの動作確認をする...
http://www.kyusan-u.ac.jp/・・・/sample.php
~
**JavaScript vs PHP
*点击画面有按键🔘。 文件名dice.html
today :2019.10.03
*PukiWiki サイト開発の前提
開発者自身が PukiWiki の使い方を熟知しておく必要がありま...
以下のような機能については、PukiWikiのプラグインを活用す...
検索機能：＃search プラグイン
投稿機能：＃article、 ＃comment プラグイン
最新の更新の表示：＃recent プラグイン
他のページの読み読み込み機能：＃include プラグイン
部分的な文字色の変更：＆color(red){・・・・}; プラグイン
部分的な文字サイズの変更：＆size(12){・・・・}; プラグイン
表組み：｜ (縦ストロークの利用)
囲み表示(整形済みテキスト)：行頭に半角スペース
左寄せ・センタリング・右寄せ：LEFT：、CENTER：、RIGHT：
参考：EditGuide
PukiWikiの記法とHTMLタグの関係理解
Wikiの記法がどのHTMLタグに対応するのか、その対応関係を知...
要素 Wikiの記法 HTMLタグ
ページ名 Wikiページ名 h1
大見出し * h2
中見出し ** h3
小見出し *** h4
箇条書き レベル１ - ul.list1 li
箇条書き第 レベル２ -- ul.list2 li
段落 記述+改行 p
整形済みテキスト 行頭半角空白 pre
引用 行頭に ＞ blockquote p.quotation
リンク [ [ ] ] a
強調 ’’文字列’’ strong
斜体 ’’’文字列’’’ em
取消線 ％％文字列％％ del
学科サイトの個人ページで、プラグインの活用を含め、様々な...
2019.10.24
**HTML最上方
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<title>Sample Site</title>
</head>
**HTML最上方《head》中添加
<script src="script.js"></script>
#image(スクリーンショット 2019-10-24 11.32.20.png)
背景变色
**HTML
<article>
<button onClick="MyFunction()" >Click Me!</butt...
article 01
</article>
**JS
function MyFunction(){
var obj = document.body;
obj.style.backgroundColor = 'blue';
}
～
～
***下方变色（JS）
**HTML
<article>
<button onClick="MyFunction2()" >Click Me!</but...
article 02
<header id="ABC">・・</header>
</article>
**JS
function MyFunction2(){
var obj = document.getElementById('ABC');
obj.style.backgroundColor = 'red';
}
～
～
***下方有色到变色（JS）
**HTML
<article>
<button onClick="MyFunction3()" >Click Me!</but...
article 03
<ul class="list">
<li class="line">A</li>
<li class="line">B</li>
<li class="line">C</li>
<li class="line">D</li>
<li class="line">E</li>
<li class="line">F</li>
<li class="line">G</li>
<li class="line">H</li>
<li class="line">I</li>
<li class="line">J</li>
<li class="line">K</li>
</ul>
</article>
**JS
function MyFunction3(){
// lineクラスの把握（情報が line[0], line[1] ,line[2]...
//var lines = document.getElementsByClassName('line');
var lines = document.querySelector('.list').children;
// i 番目の pタグ部分の背景を赤に
for( var i=0; i<lines.length; i++ ){
lines[i].style.backgroundColor = 'green';
}
}
**CSS中添加 可表示***条形
article ul li{
margin-bottom: 10px;
}
**尺寸变换自由缩小扩大
***HTML最上方《head》中添加
<meta name="viewport" content="width=device-width">
***CSS
举例：/****** Header ************/部分
header h1{
position: absolute;
top: 2rem;
left: 6rem;
font-size: 2rem;
color: white;
}
header h2{
position: absolute;
top: 5rem;
left: 6rem;
font-size: 2rem;
color: white;
}
**添加⬇️
@media only screen and (max-width: 768px) {
然后只输入调整的部分
header h1{
font-size: 1.5rem;
}
举例：/****** NAV ************/部分
nav {
padding: 1rem 3rem ;
background: #CCEAF2;
}
nav ul{
display: flex;
flex-direction: row;
}
nav ul li{
margin-right: 2rem;
}
nav ul li a {
color: white;
}
**添加⬇️
@media only screen and (max-width: 768px) {
然后只输入调整的部分
横的改为竖的
nav ul{
flex-direction: column;
}
}
**CSS 尺寸中的 高度自由合理变换
例： 添加👉min-height: 8rem;
article{
min-height: 8rem;
padding: 1rem;
margin-bottom: 2rem;
background: #FFF;
}
**関数の独立性を高める
可随机变换颜色
*** HTML側
<button onClick="ChangeBGColor()" >Click Me!</button>
***JS側
// 背景色の変更（汎用性が低い）
function ChangeBGColor( ){
var obj = document.body;
obj.style.backgroundColor =RandomColor();
}
//ランダムな16進6桁のカラーコードを生成（汎用性が高い）
function RandomColor(){
var col = Math.floor( Math.random() * 0xFFFFFF )....
for( var i = col.length; i<6; i++ ) { col = '0' +...
return '#' + col;
}
**情報科学研究科公式サイト開発
WireFrame > pukiwiki.skin.php
informationscience_20191205.zip
http://design.kyusan-u.ac.jp/socialdesign/?%E7%89%B9%E8%A...
ページ名:
