Monthly Archives: 9月 2014

webプログラミング講座 24日目

今日からJavaScriptが始まりました。

ここからはプログラミングですのでかなり高度になると思われます。

JavaScriptの初日は、JavaScriptについて少し説明後、実際に動きを確認しながら実習しました。

ファイルの拡張子はjsです。

HTMLやCSSと違って半角での記述が基本で全角が混ざるとまったく動きません!

関数や変数など計算式も出てくるみたいですので、大変そうです。

これから約1ヶ月頭に汗をかきながら頑張らなければ。。。。。

webプログラミング講座 21日目

更新が遅れて休日に更新しています。

webプログラミング講座 21日目は、視差効果の実習です。今まで習った事で作品作りをしながら画像編集ソフトの使い方を学ぶですね!

画像ソフトも細かな画業などを覚える必要があり、解らない事が多いですね!

使った慣れる以外、私には覚えるすべはないと思いますのでこれからこの「GIMP」を使っていきたいと思います。

一様、簡単な作品は出来ましたが、納得出来ないのでもう1作品挑戦中です。

 

ではでは

 

 

webプログラミング講座 20日目

視差効果2日目

画像加工、画像ソフトを使って実際に画像を加工

 

今日は、画像ソフトの使い方と画像の切り取りなどなど

実際使ってみて、無料ソフト(GIMP)ですがいろいろな機能があり驚きました。

 

画像加工は、難しいですが興味があるのでアッという間の6時間でした。

画像処理や画像加工は想像力が大切ですね!

 

もう少し、授業の時間があってもいいのですが、視差効果は5日しかないのですね!

webプログラミング講座 19日目

昨日まででHTML5、CSS3の授業が終わり、今日から視差効果

パララックスです。

最近のサイトに良く使われる効果でこれから必要な効果ですね!

 

パララックスとは

スクロールをしたときに画像やイラストなどをランダムに表示する効果タイムラグなどの効果で奥行きなどを持たせるなど、魅力あるサイト作りが出来る効果です。今日の私の理解はここまで

 

最後に一言

デザインとは

人に何かを伝える事

webプログラミング講座 18日目

今日で、HTML5、CSS3の授業は最後です。

最後にテストがありましたが、なんとか理解出来ているようで問題を解くことが出来ました。

簡単な選択問題でしたので、タグなどを覚える必要がなかったことがラッキーでした。

テスト結果は補習もなく助かりました。

 

 

HTML5、CSS3の次はJabaScriptです。ますます難しくなるようなので頑張りましょう!

 

webプログラミング講座 16日目

今日は、最近取り組んでいた作品のプレゼンです。

どうせならと思いトップバッターを志願してプレゼンへGO!

 

人前で話すのが苦手なオイラは思っていたことの2/3ほどしか伝えることが出来ず、もう少ししっかり企画書など制作する必要を感じたね!

 

自分のプレゼンを先に終わらせて、他の人のプレゼンがしっかり聞くことが出来、勉強になる1日でした。

みんな、年下、若いのにしっかりしていますね!

 

ではでは

 

今日の弁当

004

webプログラミング講座 15日目

HTML5+CSS3の授業も後、今日を合わせて3日です。

今日は、ホームページ制作の時間をフルに取り、6時間全部をホームページ作りしていました。

 

なんとかみんなの力を借りて見れるだけのホームページが出来ました。

自分でサイトを作れて嬉しさ半分、ふがいなさ半分です。

サイト作っているうちに少しづつHTMLとCSSを理解出来てきたような気がします。

思い上がりかもしれませんが、どのタグがどこに効いているのか分ってきました。まだまだ聞きながらしか出来ていませんが少しは進歩しましたね!

 

ではでは

webプログラミング講座 14日目

2日休んで、今日からまたWEBの学校

毎日、新しい発見があり楽しみで来ています。

 

今日は、先週からの続きでホームページ作りですが、家でヘッダだけ作ってきていたのにUSBの取り込み損ねていてない(汗

まだ制作の日にちがあるので大丈夫ですが、サイト作りは中々難しく自分のセンスのなさに情けない思いをしています。

午前中は、ホームページ作りの自習!

 

午後からは少し授業

CSS3で使えるようになったタグとCSSのレイアウトで知っておきたいブロックレベル要素、アニメーションなどをサッと解説

私のレベルでは、聞いてるだけで理解するまでは無理でしたが、この様なタグを入れるだけでいろいろな事がCSSだけで出来る事だけは理解しました。

 

ボタンなどを変化させる

HTMLファイル

<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title></title>
<style>
div{
width: 100px;
height: 50px;
background: lightblue;
/* アニメーション */
/*
transition-property: width, height, background;
transition-duration: 1s;
transition-timing-function:ease-out;
transition-delay:0.5s;
*/
-webkit-transition: all 1s ease-out 0.5s;
}
div:hover{
width: 200px;
height: 100px;
background: lightgreen;
}

</style>
</head>
<body>
<div>アニメーション</div>
</body>
</html>

 

アニメーションHTML

<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title></title>
<style>
div{
/*
width: 100px;
height: 50px;
background: lightblue;
*/
/* アニメーション指定 */
/*
animation-name: btn;
animation-duration: 2s;
animation-timing-function: ease-out;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: alternate;*/
/*まとめて記述*/
-moz-animation: btn 2s ease-out 0s infinite alternate;  /* firefox */
-webkit-animation: btn 2s ease-out 0s infinite alternate; /* chrome/safari */
animation: btn 2s ease-out 0s infinite alternate;
}
@-webkit-keyframes btn{  /* chrome/safari */
0%{
width: 100px;
height: 50px;
background: lightblue;
}
100%{
width: 200px;
height: 100px;
background: lightgreen;
}
}
@keyframes btn{
0%{
width: 100px;
height: 50px;
background: lightblue;
}
100%{
width: 200px;
height: 100px;
background: lightgreen;
}
}
</style>
</head>
<body>
<div>アニメーション</div>
</body>
</html>

 

今日の弁当
001

webプログラミング講座 13日目

今日は、form(フォーム)について

フォームとは、注文画面や問い合わせ画面などでよく目にするページのことです。

form

 

 

HTMLファイル

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”utf-8″>
<title></title>
<meta name=”author” content=”">
<meta name=”description” content=”">
<meta name=”keywords” content=”">
<link rel=”stylesheet” href=”02_markup.css”>
<style></style>
</head>
<body>
<form>
<dl>
<dt>会社名</dt>
<dd>
<input type=”text” name=”company” id=”company”>
</dd>
<dt>ご担当者名</dt>
<dd>
<input type=”text” name=”name” id=”name”>
</dd>
<dt>メールアドレス</dt>
<dd>
<input type=”text” name=”mail” id=”mail”>
</dd>
<dt>ホームページアドレス</dt>
<dd>
<input type=”text” name=”homepage” id=”homepage”>
</dd>
<dt>住所</dt>
<dd>
〒<input type=”text” name=”zip” id=”zip”><br>
<input type=”text” name=”address” id=”address”>
</dd>
<dt>電話番号</dt>
<dd>
<input type=”text” name=”tel1″ id=”tel1″>-
<input type=”text” name=”tel2″ id=”tel2″>-
<input type=”text” name=”tel3″ id=”tel3″>
</dd>
</dl>
<p>
<input type=”submit” name=”submit” value=”送信” id=”">
</p>
</form>
</body>
</html>

 

 

CSSファイル

@charset”utf-8″;

dl,dt,dd{
margin: 0;
padding:0;
}
dl {
background-color: #333;
border: 1px solid #999;
border-top: none;
width: 650px;
}
dt {
color: #ccc;
width: 12em;
padding: 0.5em 0 0.5em 1em;
border-top: 1px solid #999;
float: left;
}
dd {
background-color: #FFF;
margin: 0 0 0 12em;
padding: 0.5em 1em 0.5em 1em;
border-top: 1px solid #999;
border-left: 1px solid #999;
}

 

今日のべ弁当

001

webプログラミング講座 12日目

午前中

テーブルの基本構造について

テーブルの基本を勉強

サイト作りには必要なスキルですね!今までしてきたことはどれも必要ですが、テーブルはいろいろな所で使うことも多くしっかり理解が必要です。

 

午後から

今まで学んできたことを応用してサイト構成を考え、サイトを製作する作業が今日から数日間始まりました。

同時にサイトの企画書を作り発表までするそうです。サイト作りだけでも大変ですが・・・・

webスキルだけでは仕事とて成り立たないですものね!

 

ココに来てからいろいろな勉強が出来てありがたい!

 

HTMLファイル

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”utf-8″>
<title></title>
<meta name=”author” content=”">
<meta name=”description” content=”">
<meta name=”keywords” content=”">
<link rel=”stylesheet” href=”02_markup.css”>
<style></style>
</head>
<body>
<form>
<dl>
<dt>会社名</dt>
<dd>
<input type=”text” name=”company” id=”company”>
</dd>
<dt>ご担当者名</dt>
<dd>
<input type=”text” name=”name” id=”name”>
</dd>
<dt>メールアドレス</dt>
<dd>
<input type=”text” name=”mail” id=”mail”>
</dd>
<dt>ホームページアドレス</dt>
<dd>
<input type=”text” name=”homepage” id=”homepage”>
</dd>
<dt>住所</dt>
<dd>
〒<input type=”text” name=”zip” id=”zip”><br>
<input type=”text” name=”address” id=”address”>
</dd>
<dt>電話番号</dt>
<dd>
<input type=”text” name=”tel1″ id=”tel1″>-
<input type=”text” name=”tel2″ id=”tel2″>-
<input type=”text” name=”tel3″ id=”tel3″>
</dd>
</dl>
<p>
<input type=”submit” name=”submit” value=”送信” id=”">
</p>
</form>
</body>
</html>

 

 

CSSファイル

@charset”utf-8″;

dl,dt,dd{
margin: 0;
padding:0;
}
dl {
background-color: #333;
border: 1px solid #999;
border-top: none;
width: 650px;
}
dt {
color: #ccc;
width: 12em;
padding: 0.5em 0 0.5em 1em;
border-top: 1px solid #999;
float: left;
}
dd {
background-color: #FFF;
margin: 0 0 0 12em;
padding: 0.5em 1em 0.5em 1em;
border-top: 1px solid #999;
border-left: 1px solid #999;
}

 

 

今日の弁当

002

 

 

 

webプログラミング講座 11日目

今日は、昨日の午前中は復習をしたのですが」、昨日の今日なので以外に覚えていて安心!

午後からの授業は、レスポンシブのことを少し・・・

レスポンシブとは

最近のスマートフォンやタブレットに対応するサイトを適正に表示する事

このレスポンシブはこれから必要なスキルですのでしっかり理解せねば!

なんとなく理解できたかな~という感じです。

 

HTMLファイル

<!DOCTYPE html>
<html lang”ja”>
<head>
<meta charset”=”utf-8″>
<title></title>
<meta name=”author”content”">
<meta name=”description” content=”">
<meta name=”keywords”content”">
<link rel=”stylesheet” href=”01_fluid.css”>
<style></style>
</head>
<body>
<div id=”all”>
<div>
左   左<br>
<img src=”./image/test.jpg”>
</div>
<div>
右   右
</div>
</div>
</body>
</html>

 

CSSファイル

@charset “utf-8″;
#all {
/*width:630px;*/
width:100%;
border:solid 1px red;
overflow:hidden;
}
.left{
font-size:500%;
border: solid 1px gray;
/*width: 300px;*/
width:47.6194%;  /*300/630*/
/*margin: 10px;*/
margin:1.5873%;  /*10/630*/
float: left;
box-sizing: border-box;
}
img{
max-width: 100%;
}
.right{
font-size: 500%;
border: solid 1px gray;
/*width: 300px;*/
width:47.6194%;  /*300/630*/
/*margin: 10px 10px 10px 0;*/
margin:1.5873% 1.5873% 1.5873% 0; /*10/630*/
float: left;
box-sizing: border-box;
}

@media screen and (min-width: 640px){
body{
background:red;
}
}

 

今日の弁当

001

 

今日は、授業終了後、娘と梅田で食事をする約束

娘とデートでした。

娘の案内で少し怪しいい界隈を抜けたところの「ねぎ焼き屋」へ

大阪でネギ焼きと言えば「山本」ですが、その山本をスルーしてカウンターだけのこじんまりした「ネギ焼き屋」でした。

名前を見るのを忘れましたが、美味しかった~

多分、娘との久しぶりの食事で何を食べても美味しかったと思うが・・・

メインのネギ焼きの写真を撮っていませんでした。

001

 

002

webプログラミング講座 10日目

9月がスタート

プログラミング講座も10日目ですが、ペースが早く付いて行くのがやっとです。

 

★今日はレイアウト(ブロックの構成)の理解

★フロートの挙動を理解

 

分ったような分らないような感じです。理屈は理解出来ているので良しのしましょう!(汗

ホームページの枠組みの仕組みですのでしっかり理解しとかないときれいなサイト作りが出来なくなりますよね!

まだまだ、サイトを作れるレベルではありませんが、少しづつ前進あるのみ!

 

9月1日の月曜日から雨でブルーな月になりそう!

 

HTMLファイル

<!DOCTYPE html>
<html lang”ja”>
<head>
<meta charset”=”utf-8″>
<title></title>
<meta name=”author”content”">
<meta name=”description” content=”">
<meta name=”keywords”content”">
<link rel=”stylesheet” href=”01_boxmodel.css”>
<style></style>
</head>
<body>
<div id=”all”>
<div>ひだり</div>
<div>真ん中</div>
<div>みぎ</div>
</div>
</body>
</html>

 

CSSファイル

@charset “utf-8″;
#all {
border:1px solid gray;
width:300px;
overflow:hidden;
}
#all .left {
border:1px solid red;
width:100px;
float:left;
padding:5px;
box-sizing:border-box;
}
#all .center {
border:1px solid green;
width:100px;
float:left;
padding:5px;
box-sizing:border-box;
}
#all .right {
border:1px solid blue;
width:100px;
float:left;
padding:5px;
box-sizing:border-box;
}