webプログラミング講座 25日目  JavaScript

JavaScrptの2日目で頭の中をかき混ぜなれた気分で理解不能になりかけています。

言語が多いのと記述してもすぐに見る事が出来ないので記述間違えを探すのが難しいです。

変数なども理解が難しく解ったような解らないような感じです。練習問題なども全然わかりません!きっぱり・・・

問題の意味が解りにくく理解できないので解けない(汗

まだ、JavaScriptも2日目ですのでこれから少しづつ理解していきます。

ではでは

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;
}

 

 

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

cssの続きで、リスト、ボックスなどをcssで指定した作り方を学ぶ

前半は、珍しく理解出来ていると思っていたが、練習問題で理解不能

文章を理解出来なかった。

ボックスはよく使用することなのでしっかり理解しておきたい。

<ul><li>タグを使いリストを制作、リストは理解出来ました。

 

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_list.css”>
<style></style>
</head>
<body>
<h1>リスト</h1>
<h2>果物</h2>
<ul>
<li>リンゴ</li>
<li>ラ・フランス</li>
<li>ミカン</li>
<li>なし</li>
<li>ぶどう</li>
<li>いちじく</li>
<li></li>
</ul>
<h2>果物</h2>
<ol>
<li>リンゴ</li>
<li>ラ・フランス</li>
<li>ミカン</li>
<li>なし</li>
<li>ぶどう</li>
<li>いちじく</li>
</ol>
<ol>
<li>秋田県</li>
<li>岐阜県</li>
<li>青森県</li>
<li>山形県</li>
<li>鹿児島県</li>
</ol>
<ol>
<li>秋田県</li>
<li>岐阜県</li>
<li>青森県</li>
<li>山形県</li>
<li>鹿児島県</li>
</ol>
<ol>
<li value=”2″>秋田県</li>
<li value=”2″>岐阜県</li>
<li>青森県</li>
<li>山形県</li>
<li>鹿児島県</li>
</ol>
</body>
</html>

 

CSSファイル

@charset “utf-8″;
h1{
color:red;
}
ul{
list-style-type:
lower-greek;
}
.mark{
list-style-image:
url(./image/listmark.gif);
}
.mark2{
list-style-image:
url(./image/listmark2.gif);
}
.mark3{
list-style-image:
url(./image/listmark2.gif);
}

 

 

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

今日は、雨の通学

ブルーでのはじまり!

 

昨日の続きでhtmlとcssで内部リンクと外部リンクについて

少しでづつhtmlとcss理解出来てきているのか、手も早くなっています。しかし覚えることが苦手な私は、パンク寸前!

 

リンクの文字指定や文字色、カーソルの指定など勉強!めっちゃ勉強になったぞ!

画像は昨日も少ししたのですが、続きで画像の指定などなど、画像はこれからもよく使うだろうからしっかり勉強しておこう!

画像にリンクを張る(指定)する作業まで行きました。

少し混乱・・・・?

理解不能なことも少し出てきました。

6時間の授業が終わるころには、疲れがでています。

 

追記

マウスを使わずにコピーや貼り付け、ページの選択などをパソコンに詳しい人に教えてもらっています。

毎日が新しい発見ばかりでスキルアップにつながっているのではないかと思っています。

 

Ctrl+C(コピー) Ctrl+V(貼り付け)

Shift +Tab(ページの変更、選択)

F5(更新)

マウスを使わずに何でも出来るようになる事を目標に・・・

 

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=”03_image.css”>
<style></style>
</head>
<body>

<div>
<a href=”01_link.html”>
<img src=”./image/autumn.jpg” alt=”紅葉”>

<p>紅葉の秋!温泉と味覚、上杉を巡る旅<br>
<span>山形おきたま観光特集</span>
</p></a>

</div>

<a href=”01_link.html”>
<div>
<img src=”./image/autumn.jpg” alt=”紅葉”width=”100″height=”100″>

<p>紅葉の秋!温泉と味覚、上杉を巡る旅<br>
<span>山形おきたま観光特集</span>
</p>

</div></a>

<a href=”01_link.html”>
<div>
<img src=”./image/autumn.jpg” alt=”紅葉”width=”100″height=”100″>

<p>紅葉の秋!温泉と味覚、上杉を巡る旅<br>
<span>山形おきたま観光特集</span>
</p>
<p>
上杉鷹山公で知られる城下町米沢市をはじめ、
長井市、南陽市、高畠市、川西市、小国町、飯豊町
からなる山形県置陽地域、自然と歴史がうまく溶け合う
エリア。米沢牛や米沢ラーメン、ら・フランスなど
の果樹、ワインなど食も秘湯・名湯も豊富</p>
</div></a>

</body>
</html>

 

CSSファイル

@charset “UTF-8″;

.box1 {
border: 1px solid gray;
margin: 10px;
padding: 30px;
}

span {
font-size: 1.5em;
}
.case1 {
float: left;
margin: 8px;
padding: 2px;
border: 1px solid gray;
width:100px;
max-width:100%;
}
.aso{
background:red;
padding:20px;
margin: 10px;
}
今使っている教科書はこれ!

002

 

 

 

 

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

今日の授業は昨日の続きのcssの記述です。

文字のカラー、文字の大きさ、文字の形をcssを使って帰る指示を出す作業でした。

手打ちで打つため、間違いが多くうまく指示が出ないこともあり、いらっと来ることも・・・・

1つでも文字が抜けると上手く動かないのですね!その間違いを見つけるのも一苦労です。

 

文字打ちも遅いため、みんなより少し遅れ気味でこれから足を引っ張りそうな感じがしてきました。

おっさんだから少しは許してもらおう!

 

cssでバックグランドの写真などの指定も少し理解出来た。前から疑問に思っていたホームページの後ろの写真を固定する方法も分ったので収穫あり!

意外とペースが早く小さな脳みそには少しオーバー気味で頭痛が・・・・・

 

今日のファイル

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=”05_selecter.css”>
<style></style>
</head>
<body>
<div id=”introduction”>
<p>マジカルリミックスWeb政策事業部は仙台のデザイン会社「株式会社マジカルリミックス
の事業部です。ホームページ製作を核としながら<strong>インターネットを活用したビジ
ネスの提案</strong>や<strong>ブログのコンサルティング</strong>を得意ととしています。
小規模な案件からある程度まとまった案件まで、各種製作実績が多数あります。</p>
</div>
<h2>事業内容</h2>
<div>
<h3>WordPress</h3>
<p>WordPressはもともとブログを運営すようなツールです</p>
</div>
<div>
<h3>jimdo</h3>
<p>Jimdoはドイツうまれの、Web製作の専門知識がなくても更新、運営可能な
<strong>ASPサービス</strong>です。</p>
</div>
</p>
</body>
</html>

CSSファイル

@charset”utf-8″;
#introduction{
border: 1px solid #000;
padding: 10px;
}
/*IDセクタ→#ID名で指定
※要素名#ID名でも指定可能*/
h2,p {color:#000000;}

/*複数セレクタ
->「,」
.wordpress {background: #eaeaea;}
/* 要素セレクタ ->要素名で指定*/
/*CLASSセレクタ→.CLASS名でも指定可能*/
h3{color:#ff0000;}

/*子孫セレクタ ->セクタ 子孫セレクタ(半角スペース)*/
.jimdo strong{color:#ff0000}

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

今日は、htmlからcssへ

まだまだ、基礎中の基礎ですが難しくなってきています。ホルダーを開くだけでも時間がかかる私ですが、なんとか今は理解出来ています。

実際にTerapadと言う非力なソフトでhtmlを打ち込んでいますが、タッピングもそれほど出来ていないため、時間がかかります。

今は、時間を作業時間が長めに取っているので付いていけてますが・・・・

今日のポイント

1、CSSの基本とhtmlへの組み込み方

2、セレクタと要素の親子関係(階層)の理解

なんとなく、ホームページの仕組みを知ることが出来たような気がします。

 

あっという間に時間でした。

 

 

今日のテキスト

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=”03_rink.css”text/css”>
</head>
<body>
<p>
外部cssファイルを使って
スタイルを変更してみよう
</p>
</body>
</html>

 CSSファイル

@charset “utf-8″;

p{
color:red;
background: yellow;
font-size:28px;
}

 

1 2 3 4 5