学習の資料ストック

キックオフミーティング資料

HTML/CSSチュートリアル

2015/08/23資料_JavaScriptでパックマン Vol.1
ソースコードサンプル_JavaScriptでパックマン Vol.1

2015/09/13資料_JavaScriptでパックマン Vol.2
ソースコードサンプル_JavaScriptでパックマン Vol.2

2015/09/27資料_JavaScriptでパックマン Vol.3
ソースコードサンプル_JavaScriptでパックマン Vol.3

2015/10/11資料_JavaScriptでパックマン Vol.4

2015/10/24資料_JavaScriptでパックマン Vol.5
ソースコードサンプル_JavaScriptでパックマン Vol.5

2015/11/08資料_JavaScriptでパックマン Vol.6
ソースコードサンプル_JavaScriptでパックマン Vol.6

☆2015/11/29資料_JavaScript でパックマン!第7回 (一旦最終回)
★ソースコードサンプル_JavaScriptでパックマン Vol.7

 

第3回&第4回&第5回の活動レポート、次回のご案内。

MPS世田谷では3,4,5回目の活動を実施しました。

第3回
8/2(日) 9:45-11:45

HTML、CSSを基礎から学ぶ、手を動かすという内容でした。
最後に少しだけJavaScriptの話をしました。

P1030086


第4回 8/23(日) 9:15-11:45

今回から前後半に内容を分けるようにしました。 前半はHTML、CSSのチュートリアルを準備し、それを各自で取り組みました。 後半は「JavaScriptでパックマン」の第1回ということで金子さんによるハンズオンがありました。 HTML5のCanvas要素を使ってみることを体験しました。資料はこちらです。

P1030236


第5回
9/13(日) 9:15-11:45

前後半の構成を引き続き実施しました。
内容的には前半は同じチュートリアルを教材としました。
後半は「JavaScriptでパックマン」の第2回ということでCanvas要素でキャラクターの顔を描く方法を体験しました。
同じ形を描くにもコードの書き方は正解が1つしかないというわけではなくて、人それぞれの書き方ができることを学びました。
資料はこちらです。

P1030850


次回は第6回、
9/27(日) 9:15-
を予定しています。

イベント申込は こちら からお願いします!!
ご参加お待ちしています。

HTML/CSS入門 ver.0.1

HTMLとは

HyperText Markup Language
ハイパーテキストのための、文書に目印をつける 方法を定めた文法上の約束

マークアップの基本は、 文書の「論理構造」。

HTMLは複数のタグで生成されている。

<p>こんにちはー</p>


主要タグ①
「見出し」タグ

<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>

主要タグ②
「文書」タグ

<p></p>

主要タグ③
「リンク」タグ

<a></a>

主要タグ④ 「改行」タグ

<br>

・主要タグ⑤
「ブロック」タグ

<div></div>

主要タグ⑥
「インライン」タグ

<span></span>

主要タグ⑦
「画像」タグ

<img />

主要タグ⑧
「箇条書き」タグ

<ul>
<li></li>
<li></li>
<li></li>
</ul>

主要タグ⑨
「番号付け」タグ

<ol>
<li></li>
<li></li>
<li></li>
</ol>

 


基本のかたち

盛り込みたい要素を考えて、書いてみよう!


CSSとは

Cascading Style Sheets ウェブページのスタイルを指定するための言語。

CSSは、色とか形(スタイル)を 変更するためのもの。
CSSはstyleタグで表現されている 。

CSSは「セレクタ」で効果の出る対象を指定する。

1. 要素型セレクタ
例 p {color:blue;}

2. 全称セレクタ
例 * {color:blue;}

3. idセレクタ
例 p#sample {color:blue;}

4. classセレクタ
例 p.sample {color:blue;}


基本のCSSプロパティ

・文字の色
color

{ color: #00ff00 }

・背景の色
background-color

{ color: #eeffee }


サンプル

<!DOCTYPE html>
<html lang=”ja”>

<head>
<meta charset=”utf-8″>
<title>WEBページのタイトル</title>
<style type=”text/css”>
body {
background-color: pink;
}
p#mystory {
color: #0000CD;
}
</style>
</head>
<body>
<h1>わたしの名前</h1>
<p id=”mystory”>生い立ち…</p>
</body>
</html>

 


*参考*

Webカラー

ウェブカラー(英: Web colors)はウェブページのデザインで使う色であり、その色を指定し記述する方法である。16進の色コードはハッシュ記号 (#) が先頭に付与される
(Wikipediaより)

カラーピッカー↓
http://www.benricho.org/colors/color_picker/


第1回&第2回の活動レポート、次回のご案内

MPS世田谷が立ち上がって1ヶ月少々が経ちました。

既に2回の活動を実施しましたので内容をレポートします。


MPS世田谷 キックオフ・ミーティング(第1回)
2015-06-28(日)10:00 – 12:00
https://mpsamurai.doorkeeper.jp/events/26788

参加者10名

内容

皆さんのやりたいことについて語り合いました。
そのあとで
プログラミングで少し世界を広げよう
というタイトルで金子さんから講義があり、
参加者でPCを使って実際にPythonのプログラミングを体験しました。

P1030066

 


MPS世田谷 ミーティング 第2回
2015-07-19(日)10:00 – 12:00
https://mpsamurai.doorkeeper.jp/events/27828

参加者7名 内容 今回は 「スマホでつくれるホームページ!」 と題しまして 皆様お手元のスマホアプリでプログラミングを体験できる企画を実施しました。 金子さんからの「HTML入門」講座のあと、 皆さんスマホまたはPCを使って、 「作りたいホームページを作る」ことを 企画メモを作ってから、実際にHTMLコードを書いていきました。 プログラミング未経験者3名の方も、 非常に吸収が早くて、皆さんホームページを作っておられました。

P1030073


次回、第3回のご案内です。

MPS世田谷 ミーティング 第3回
2015-08-02(日)09:45 – 11:45

内容予定

「スマホでもつくれるホームページ!」
の第2回です。

皆様お手元のスマホアプリでもプログラミングを体験できる企画です。
iOSまたはAndroidであれば動作に問題ありません。

ホームページづくりの第一歩を踏み出してみませんか?
前回はhtmlの基本を体験しましたので、今回は装飾に関わるCSSを
中心に学べればと思っています。

前回不参加の方で今回から参加でも大丈夫です。

ご参加希望の方は
https://mpsamurai.doorkeeper.jp/events/28739
このDoorkeeperのイベントページからお申込ください。

↑Doorkeeperに飛ぶQRコードです。

お待ちしております!

MPS世田谷にようこそ!

こんにちは! MPS世田谷のWebsiteにようこそ!
私たちの活動についてご説明します。

MPS (Morning Project Samurai) は、 メンバー1人1人が主体的に「世の中の役に立つソフトウェア開発プロジェクト」を提案し、「リーダーとなる機会を持つことのできる環境」を作ります。

MPSは2014年5月に始まった活動です。
1年間文京区で活動を続け、年間で25回を越えるミーティングを実施しました。
ミーティングでは、参加者1人1人が自分のやりたいことを話し、プログラミングを学びながら実践し、チームでプロジェクトを進めていきます。

2015年6月からは、世田谷区にも場を広げ、「MPS世田谷」として活動を開始しました。

MPSでは、こんな思いを持った方々の参加をお待ちしています。

  • 自身のキャリアアップを図りたい
  • 何かを一緒に作る仲間が欲しい
  • 自分たちの手で作ったもので社会貢献したい
  • IT技術を用いて解決したい身の回りの問題を持っている
  • プログラミングに興味のある
  • 何か作りたいソフトウェアがある
  • ユーザインタフェースデザインに興味のある
  • 知識や技術を誰かと共有したい
  • リーダーシップを身につけたい

活動予定については、以下になります。

キックオフミーティング

参加お申込方法(下記いずれかでお願いいたします)

  1. 方法その1 →上記のDoorkeeperイベントページからお申込ください。
    • Doorkeeperアカウントはメールアドレスがあればすぐに作れます。
    • Facebook, Twitter, GitHub, いずれかのアカウントをお持ちの方は、認証するだけでDoorkeeperを使えます。
  2. 方法その2 → 参加申込メールをお送りください(本文中にお名前をご記入ください)。

何かやってみたいことがある、課題を解決したい、という方。
あるいはITやプログラミングに興味がある、という方。
ぜひお越しください! お待ちしています。

MPS世田谷 代表 高橋昌紀 (Facebook

MPSに興味を持った方、ご質問のある方はお気軽に、メールをお送りください。