【TechAcademy】はじめてのレスポンシブ：動画で使用するソースコードを用意しました！
2019年4月26日 Html/CSS,Programing
マナブさんのプログラミングロードマップにて、レスポンシブについて、TechAcademyさんの動画が全部で19本ありますね！
下記のブログ同様、今回もhtmlソースコードを用意しました！
【TechAcademy】はじめてのCSS入門：動画で使用するソースコードを用意しました！
同じくTech AcademyさんのCSS学習動画でプログラミングを学んでいる方は、ご自由にコピペして使ってください(^^)
※順次追加していきます！
【TechAcademy】はじめてのレスポンシブWebデザイン入門講座19本
Contents
Tech Academy【CSSの動画】1-1～1-2のソースコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>類似要素の練習</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <ul> <li>The first chile of ul.</li> <li>2nd child.</li> <li>3rd child.</li> <li>4th child.</li> <li>5th child.</li> <li>6th child.</li> <li>7th child.</li> <li>8th child.</li> <li>9th child.</li> <li>The last child.</li> </ul> </body> </html> |
Tech Academy【CSSの動画】1-3のソースコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>UIに関する疑似要素の練習</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <form> <input type="text" name="name" placeholder="name"/> <input type="text" name="email" placeholder="email" disabled/> <dir> <input name="radio" id="radio1" type="radio"/><label for="radio1">option1</label> <input name="radio" id="radio2" type="radio"/><label for="radio2">option2</label> <input name="radio" id="radio3" type="radio"/><label for="radio3">option3</label> </dir> <input type="submit" name="submit"/> </form> </body> </html> |
Tech Academy【CSSの動画】1-4のソースコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>疑似要素の練習</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <p class="intro"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> </body> </html> |
Tech Academy【CSSの動画】1-5のソースコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>疑似要素の練習</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <p class="phone"> 0120-000-000 </p> <a class="dload" href="example.pdf" title="-PDF"> Download File </a> </body> </html> |
Tech Academy【CSSの動画】2-1～2-3のソースコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>疑似要素の練習</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h1>Lorem ipsum dolor sit amet.</h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> </body> </html> |
※2-4に関してはpタグ内を全て削除
Tech Academy【CSSの動画】4-1～4-3のソースコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta content="width=decive-width, initial-scale=1.0, user-scalable=no" name="viewport"/> <title>コアラ | portfolio</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <header> <nav> <ul> <li><a href="index.html" class="selected">portfolio</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">contact</a></li> </ul> </nav> <div id="logo"> <img src="efg.jpg" alt=""> <h1>コアラ</h1> </div> </header> <div id="wrapper"> <section> <h2>portfolia</h2> <ul id="gallery"> <li> <a href="retina_wood.png"> <img src="retina_wood.png" alt=""> <p>wood1</p> </a> </li> <li> <a href="retina_wood.png"> <img src="retina_wood.png" alt=""> <p>wood2</p> </a> </li> <li> <a href="retina_wood.png"> <img src="retina_wood.png" alt=""> <p>wood3</p> </a> </li> <li> <a href="retina_wood.png"> <img src="retina_wood.png" alt=""> <p>wood4</p> </a> </li> </ul> </section> <footer> <p>© 2015 koara.</p> </footer> </div> </body> </html> |
※黄マーカーの部分はご自分の画像URLを入れてください。
Tech Academy【CSSの動画】4-4のソースコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta content="width=decive-width, initial-scale=1.0, user-scalable=no" name="viewport"/> <title>コアラ | portfolio</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <header> <nav> <ul> <li><a href="index.html" class="selected">portfolio</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">contact</a></li> </ul> </nav> <div id="logo"> <img src="efg.jpg" alt=""> <h1>コアラ</h1> </div> </header> <div id="wrapper"> <section> <h2>contact</h2> <p>下記よりお問い合わせください</p> <h3>連絡先</h3> <ul class="contact"> <li class="phone"><a href="tel:03-1234-5678">03-1234-5678</a></li> <li class="mail"><a href="mailto:aiueo@example.com">aiueo@example.com</a></li> <li class="twitter"><a href="http://twitter.com/aiueo">@aiueo</a></li> </ul> </section> <footer> <p>© 2015 koara.</p> </footer> </div> </body> </html> |
※黄マーカーの部分はご自分の画像URLを入れてください。
