---
# System prepended metadata

title: 'HTML, CSSを調べられるようになる勉強会'

---

# HTML, CSSを調べられるようになる勉強会

## h2 hogehogefoofoo

福田君：
なぜやるのかの具体例を示してほしい

奥村さん：
宿題出してみる

PC画面二つに増やしてみる。

城下さん：
qiitaにまとめる

**HTML**
変更は`diff=`
```diff=
- html
+ html
```

```html=
<body>
    <h1>勉強会<h1>
   <h2>HTMLとCSS使ってみる<h2>
    <img src="https://i.imgur.com/zAoOAQt.png">
</body>

<body>
  <input type="button" value="Check" onclick='sample()'>
</body>

```

```css
body {
  background:#212121;
  text-align:center;
}

h1 {
  color:white;
}

h2 {
  color:#ef5350;
}
```

```javascript=
document.write("hello world");
document.getElementById("moji").style.color = "red";
//ページ読み込み時
window.onload = function() {
  alert("ページが読み込まれました！");
};

function sample() {
    document.write("Hello world!")
    //hello world 無限増殖
    document.write("<input type='button' value='Check' onclick='sample1()'>");
}
}
```
```html=
<p>あなたの名前は？</p>
<input type="text" id="name">
<button type="button" id="form-button">入力</button>
<div id="form-text"></div>
```

```css=
focus {
  outline: 1px solid #666;
}
input[type="text"] {
  margin: 0 0 15px;
  padding: 8px 10px;
  border: 1px solid #d0d1d3;
}
button {
  padding: 8px 15px;
  background: #979380;
  color: #fff;
  border: none;
}
```

```javascript=
document.getElementById("form-button").onclick = function() {
  document.getElementById("form-text").innerHTML = "こんにちは " + document.getElementById("name").value + " さん！";
}
```

### 新しく作ってみた：１
HTML
```html=
<body>
    <h1>勉強会<h1>
    <h2>HTMLとCSS使ってみる<h2>
</body>

<SCRIPT type="text/javascript">
function showimg1(){
document.area1.src = "https://i.imgur.com/rnYZcmu.jpg";
}
</SCRIPT>

<img src=https://i.imgur.com/Qp7Nizo.jpg" name="area1">

<input type="button" onclick="showimg1()" value="画像をもっと見る">
```
CSS
```css=
body {
  background:#212121;
  text-align:center;
}

h1 {
  color:white;
}

h2 {
  color:#ef5350;
}
```
### 新しく作ってみた sin ver.
HTML
```html=
<body>
    <h1>勉強会<h1>
    <h2>HTMLとCSS使ってみる<h2>
</body>

<SCRIPT type="text/javascript">
  let imgs = ["https://i.imgur.com/Qp7Nizo.jpg",
      "https://i.imgur.com/rnYZcmu.jpg"]
  let count = 0;
function showimg1(){
  count++;
  document.area1.src = imgs[count%2];
}
  
</SCRIPT>
<input type="button" onclick="showimg1()" value="画像をもっと見る">
<br>
<img src='' name="area1">
```
CSS
```css=
body {
  background:#212121;
  text-align:center;
}

h1 {
  color:white;
}

h2 {
  color:#ef5350;
}
```

こんにちは、今年入学しました殿山と福田です。
今回、こんな状況であることなどを考え、今この時間を有意義に使おうと思い、私どもが主宰する勉強会を立ち上げました。
今回はzoomを用いて、「ググりながらサイト構築」を行いたいと思います。
ここで身に付く教養としては、Webを使った調べる力、それから実際にコードを書く能力や、言語理解です。
対象は全学年を対象にしています。
大学院生の方も協力してくれるそうなので、ぜひ参加しませんか？
日程は5月？？日〜？？日で行おうと考えています。
皆様のご参加をお待ちしております。


![](https://i.imgur.com/kUmreXK.jpg)
![](https://i.imgur.com/CYIwnnX.jpg)
![](https://i.imgur.com/tPThSk5.jpg)
![](https://i.imgur.com/yZflLHx.jpg)

![](https://i.imgur.com/qZ7vRaT.png)
![](https://i.imgur.com/2pjjBz0.png)



## h2
横：500px
![](https://i.imgur.com/NyuLkeS.jpg)
![](https://i.imgur.com/XdxpTtV.jpg)
![](https://i.imgur.com/9jeeKuc.jpg)

![](https://i.imgur.com/L97PLLn.jpg)



迎さんフォローして頂きありがとうございます。私、大阪電気通信大学 情報通信工学部１年の殿山雄大と申します。

私もラーメン屋さんでアルバイトしていた時に、エクセル勤務表を集計する簡単なソフトを作ったことがあり、業務管理を効率化するサービスには非常に興味があります。
https://github.com/Tonoyama/Miyako-Platform

ぜひ、事業内容とプロダクトについて詳しく聞かせて頂けると幸いです。