imgタグのalt/style属性を整理した

Author: yasulab

app/views/docs/kata.html.erb

@@ -32,7 +32,8 @@
 	  <p>CoderDojo は、7〜17歳を対象とした非営利のプログラミング道場です。2011年にアイルランドから始まり、世界では110カ国・2,200以上の道場、日本では<a href="https://coderdojo.jp/#dojos">全国に222以上</a>の道場があります。CoderDojo は全国各地で定期的に開催されており、<a style="background-color: #ffffff;" href="https://coderdojo.jp/stats">延べ10,000人以上</a>の子ども達が毎年楽しみながら様々な作品を創っています。</p>
 	  <br>
 	  <p>各 Dojo は、チャンピオンやメンターと呼ばれる協力者によって自主的に運営されています。プログラマーやデザイナーだけでなく、学生や教員、アーティストやフリーランス、起業家や投資家などの方々が分野横断的に協力しあって、それぞれの Dojo が継続的に運営されています。もちろん、参加者自身や参加者の親が運営に協力する事例も多いです。</p>
-	  <img class="img-responsive lazyload" style="padding-top: -50px;" src="/kata/coderdojo-zero.png" alt="" /><br><br>
+	  <img class="img-responsive lazyload" style="margin-bottom: 100px;" src="/kata/coderdojo-zero.png" alt="CoderDojo を支える方々の写真" />
+	  
 	  <h3><strong>まず何を読むといい？</strong> 🤔</h3>
 	  <p>初めての方向けには次の資料をオススメしています。スライドや動画、インタビュー記事を見ると CoderDojo の雰囲気が掴めます。<br><br></p>
 	  <ul>
@@ -170,10 +171,11 @@
 	  <br>
 	  <p>上記の他にも、一般社団法人 CoderDojo Japan が発表したプレスリリースや公式ニュースレターもあります。詳細は <a href="https://news.coderdojo.jp/">news.coderdojo.jp</a> をご参照ください 📰</p>
 	  <br>
-	  <div id="learn" class="headline-anchor">
-	    <h2 class="headline">📚 学ぶ</h2>
-	    <img class="img-responsive lazyload" style="padding-top: -50px;" src="/kata/learn.png" alt="" /></div>
-	    <div>
+
+	  <div id="learn" class="headline-anchor"></div>
+	  <h2 class="headline">📚 学ぶ</h2>
+	  <img class="img-responsive lazyload" style="margin-bottom: 30px;" src="/kata/learn.png" alt="CoderDojo 梅田の様子" />
+	  <div>
 	      <div>
 		<p><a href="https://coderdojo.jp/stats">毎年 1,500 回以上</a>の Dojo が日本各地で開催されているため、CoderDojo で得られた知見を元に教材が作られることも多いです。</p>
 		<p>CoderDojo 関係者が制作した教材を中心にまとめてみたので、参加者や運営者、メンターなどのご参考になれば嬉しいです。</p>
@@ -221,11 +223,6 @@
 		  </li>
 		</ul>
 		<br>
-		<p><strong>Snap!</strong></p>
-		<ul>
-		  <li><strong><a href="http://153.127.198.12/aizu/aboutSnap.pdf" target="_blank">Snapのこと（入門テキスト）</a></strong><br>by 斎藤 ＠ <a style="background-color: #ffffff;" href="http://coderdojoaizu.mystrikingly.com/" target="_blank" rel="noopener noreferrer">CoderDojo 会津</a></li>
-		</ul>
-		<br>
 		<div>
 		  <p><strong>micro:bit</strong></p>
 		  <ul>
@@ -244,8 +241,9 @@
 		    <li>
 		      <p><strong><a href="https://memakura.github.io/s2microbit-ble/">Smi:bit / スマイビー (Scratch 2.0 対応)</a><br></strong>by 川嶋 @ <a href="http://coderdojo-nara-ikoma.github.io/">CoderDojo 奈良・生駒</a><br></p>
 		    </li>
-		    <li><strong><a href="https://note.mu/coding/n/n74d63b44531c">micro:bit で自由研究</a><br></strong>by E研究員 @ <a href="https://coderdojo-kohokunt.connpass.com/">CoderDojo 港北ニュータウン</a><br><br></li>
+		    <li><strong><a href="https://note.mu/coding/n/n74d63b44531c">micro:bit で自由研究</a><br></strong>by E研究員 @ <a href="https://coderdojo-kohokunt.connpass.com/">CoderDojo 港北ニュータウン</a></li>
 		  </ul>
+		  <br>
 		  <p><strong>HTML、電子工作、LEGO など</strong></p>
 		  <ul>
 		    <li>
@@ -257,6 +255,7 @@
 		    <li>
 		      <p><strong><a href="https://lets.makewitharduino.com/">Let's Make With Arduino!</a> + <a href="https://docs.google.com/spreadsheets/d/1XNd1BK2tiDwk3GTYJ60RzaXj_kwvB3FDpDuXZVm-MCQ/edit">部品購入先リスト</a></strong><br>by 岡田バナナ @ <a style="font-size: 19.2px; background-color: #ffffff;" href="http://coderdojo-nishinomiya.info/">CoderDojo西宮 / 梅田</a><br>by 塚本 @ <a href="http://coderdojo-nara-ikoma.github.io/">CoderDojo 奈良・生駒</a></p>
 		    </li>
+		    <li><p><strong><a href="http://153.127.198.12/aizu/aboutSnap.pdf" target="_blank">Snapのこと（入門テキスト）</a></strong><br>by 斎藤 ＠ <a style="background-color: #ffffff;" href="http://coderdojoaizu.mystrikingly.com/" target="_blank" rel="noopener noreferrer">CoderDojo 会津</a></p></li>
 		    <li><strong><a style="background-color: #ffffff;" href="http://pegpeg.jp/tool/2014/09/09/686">スクラッチでピタゴラ装置を作ろう! (指導者向け)</a></strong><br>by 安川、石原 @ <a style="background-color: #ffffff;" href="http://tokyo.coderdojo.jp/">CoderDojo Tokyo (下北沢)</a></li>
 		  </ul>
 		  <ul>
@@ -303,7 +302,7 @@
 
 	    <div id="challenge" class="headline-anchor"></div>
 	    <h2 class="headline">腕試し</h2>
-	    <div><img class="img-responsive lazyload" style="padding-top: -50px;" src="/kata/challenge.png" alt="" /></div>
+	    <img class="img-responsive lazyload" src="/kata/challenge.png" alt="DojoCon Japan の様子" />
 	    <div>
 	      <div>
 		<p><br>プログラミングはやればやるほど日に日に力がついていきます。「プログラミングに少し慣れたかな」と感じたら、腕試しのつもりでキャンプやコンテストに挑戦してみてはいかがでしょうか?</p>
@@ -407,7 +406,7 @@
 
 	    <div id="startup" class="headline-anchor"></div>
 	    <h2 class="headline">立ち上げる</h2>
-	    <div><img class="img-responsive lazyload" style="padding-top: -50px;" src="/kata/startup.png" alt="" /></div>
+	    <img class="img-responsive lazyload" src="/kata/startup.png" alt="CoderDojo 調布の様子" />
 	    <br>
 	    <div>
 	      <div>
@@ -449,7 +448,9 @@
 		  </li>
 		  <li>立ち上げる CoderDojo の情報を入力し、申請する</li>
 		</ol>
-		<p>本セクションでは「アカウントはまだ持っていない」という状態から、CoderDojo 申請までの流れをまとめています。既にアカウントをお持ちの場合、以下の 2. から読み進めてください。<br><br></p>
+		<br>
+		<p>本セクションでは「アカウントはまだ持っていない」という状態から、CoderDojo 申請までの流れをまとめています。既にアカウントをお持ちの場合、以下の 2. から読み進めてください。</p>
+		<br>
 		<ol>
 		  <li>
 		    <p>まずは CoderDojo を申請するために、Raspberry Pi アカウント (※) を作成します</p>
@@ -500,7 +501,7 @@
 	      <div id="support" class="headline-anchor"></div>
 	      <h2 class="headline">🤝 支援・資料</h2>
 	    </div>
-	    <div><img class="img-responsive lazyload" style="padding-top: -50px;" src="/kata/support.png" alt="" /></div>
+	    <img class="img-responsive lazyload" src="/kata/support.png" alt="CoderDojo in Minecraft" />
 	    <div>
 	      <div>
 		<p><br>CoderDojo は国内外のパートナー企業から様々な支援を得ております。承認された Dojo では、必要に応じて次の支援を得ることができます。<a href="/kata#startup">CoderDojo を立ち上げて</a>、承認されたら、ぜひご活用ください 😆</p>
@@ -692,11 +693,12 @@
 		</ul>
 	      </div>
 	    </div>
+
 	    <div>
 	      <div id="faq" class="headline-anchor"></div>
 	      <h2 class="headline">📑 FAQ</h2>
 	    </div>
-	    <div><img class="img-responsive lazyload" style="padding-top: -50px;" src="/kata/faq.png" alt="" /></div>
+	    <img class="img-responsive lazyload" src="/kata/faq.png" alt="統計情報：参加者数の推移" />
 	    <div>
 	      <div>
 		<br>