Category Archives: プログラミング学校
webプログラミング講座 ２４日目
webプログラミング講座 ２３日目
webプログラミング講座 ２２日目
webプログラミング講座 ２１日目
webプログラミング講座 ２０日目
webプログラミング講座 １９日目
webプログラミング講座 １８日目
webプログラミング講座 １６日目
webプログラミング講座 １５日目
webプログラミング講座 １４日目
2日休んで、今日からまたＷＥＢの学校
毎日、新しい発見があり楽しみで来ています。
今日は、先週からの続きでホームページ作りですが、家でヘッダだけ作ってきていたのにＵＳＢの取り込み損ねていてない（汗
まだ制作の日にちがあるので大丈夫ですが、サイト作りは中々難しく自分のセンスのなさに情けない思いをしています。
午前中は、ホームページ作りの自習！
午後からは少し授業
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>
今日の弁当
webプログラミング講座 １３日目
今日は、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;
}
今日のべ弁当
webプログラミング講座 １２日目
午前中
テーブルの基本構造について
テーブルの基本を勉強
サイト作りには必要なスキルですね！今までしてきたことはどれも必要ですが、テーブルはいろいろな所で使うことも多くしっかり理解が必要です。
午後から
今まで学んできたことを応用してサイト構成を考え、サイトを製作する作業が今日から数日間始まりました。
同時にサイトの企画書を作り発表までするそうです。サイト作りだけでも大変ですが・・・・
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;
}
今日の弁当
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=”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;
}
}
今日の弁当
今日は、授業終了後、娘と梅田で食事をする約束
娘とデートでした。
娘の案内で少し怪しいい界隈を抜けたところの「ねぎ焼き屋」へ
大阪でネギ焼きと言えば「山本」ですが、その山本をスルーしてカウンターだけのこじんまりした「ネギ焼き屋」でした。
名前を見るのを忘れましたが、美味しかった～
多分、娘との久しぶりの食事で何を食べても美味しかったと思うが・・・
メインのネギ焼きの写真を撮っていませんでした。
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=”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プログラミング講座 ９日目
ｃｓｓの続きで、リスト、ボックスなどをｃｓｓで指定した作り方を学ぶ
前半は、珍しく理解出来ていると思っていたが、練習問題で理解不能
文章を理解出来なかった。
ボックスはよく使用することなのでしっかり理解しておきたい。
<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プログラミング講座 ８日目
今日は、雨の通学
ブルーでのはじまり！
昨日の続きでhtmlとcssで内部リンクと外部リンクについて
少しでづつhtmlとcss理解出来てきているのか、手も早くなっています。しかし覚えることが苦手な私は、パンク寸前！
リンクの文字指定や文字色、カーソルの指定など勉強！めっちゃ勉強になったぞ！
画像は昨日も少ししたのですが、続きで画像の指定などなど、画像はこれからもよく使うだろうからしっかり勉強しておこう！
画像にリンクを張る（指定）する作業まで行きました。
少し混乱・・・・？
理解不能なことも少し出てきました。
６時間の授業が終わるころには、疲れがでています。
追記
マウスを使わずにコピーや貼り付け、ページの選択などをパソコンに詳しい人に教えてもらっています。
毎日が新しい発見ばかりでスキルアップにつながっているのではないかと思っています。
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;
}
今使っている教科書はこれ！
webプログラミング講座 ７日目
今日の授業は昨日の続きのcssの記述です。
文字のカラー、文字の大きさ、文字の形をcssを使って帰る指示を出す作業でした。
手打ちで打つため、間違いが多くうまく指示が出ないこともあり、いらっと来ることも・・・・
１つでも文字が抜けると上手く動かないのですね！その間違いを見つけるのも一苦労です。
文字打ちも遅いため、みんなより少し遅れ気味でこれから足を引っ張りそうな感じがしてきました。
おっさんだから少しは許してもらおう！
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プログラミング講座 ６日目
今日は、htmlからcssへ
まだまだ、基礎中の基礎ですが難しくなってきています。ホルダーを開くだけでも時間がかかる私ですが、なんとか今は理解出来ています。
実際にTerapadと言う非力なソフトでhtmlを打ち込んでいますが、タッピングもそれほど出来ていないため、時間がかかります。
今は、時間を作業時間が長めに取っているので付いていけてますが・・・・
今日のポイント
１、CSSの基本とhtmlへの組み込み方
２、セレクタと要素の親子関係（階層）の理解
なんとなく、ホームページの仕組みを知ることが出来たような気がします。
あっという間に時間でした。
今日のテキスト
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;
}
webプログラミング講座 ５日目
今日は、webの直接関係のない人間関係やコミュニケーション能力についての講習がほとんどでした。
私も若い時は、人見知りや人と話す事が苦手でしたが、この年齢になるといろいろ社会で経験してきたことや趣味などで見知らる人と話す機会が多かったことなどから人見知りも少なくなりましたね！
WEBとは直接関係がない事が多かったですが、学歴が少ない私にはいろいろと勉強になります。学生時代より気持ちが素直なので授業も苦痛では有りません。
最近、少し学校に行く事が楽しみになってきているようです。この年になって、勉強出来る事を感謝しなければいけないですね！また若い子たちと同じ教室で勉強できる事はいろいろ刺激を受けています。
追記
今日は、以前より調子が悪かったスマホ（iphone）がとうとう逝っちゃいました。ホームボタンが押せない状態が続いていましたが何とか起動はしていたのですが、今は起動していません。 （涙
明日時間があればアップルストアに行こうと思っています。
もう、あと１ヶ月もすれば新型iphoneが出ると言う噂なのに・・・・・