☰
なじめばきまま Written by Fukutaro Sugiyama

【プログラミング】完全初心者！リアルな写経コーディング【HTML・CSS】

HTML/CSS プログラミング

こんにちは、Happytaroです。

現在HTMLとCSSを勉強中。今は「写経」をしてプログラミングを勉強しています。

基本を身につけた後に何をすればいいか分からなくなった。という方も多いはず。

この記事では、リアルではどんな風に『写経コーディング』をしているのか？という疑問に答えます！

実際やっている僕も、完全素人なのでよくわかんない部分、適当にやっている部分はたくさんあります。

でも「そうやってやればいいんだ」と初心者の写経コーディングの小さなきっかけになれば嬉しいと思っています。ぜひトライしましょう！

完全初心者！リアルな写経コーディング -作業環境編-


最初ということで僕が現在（2019.7)使っている作業環境をサクッとご紹介しておきます。

申し訳ありません。エディターの導入方法とかファイルの準備とかはググってください。

初心者のうちはけっこう適当でいいのかなぁと思っているので、特にこだわりはありません！

  • PC：MacBook Pro 13インチ
  • エディター：Atom
  • ブラウザ：Google ChromeとSafari
  • セカンドモニター：LG 29インチ 21:9 ウルトラワイドモニター
  • コクヨ　キャンパスノート（ワイヤーフレーム書く用）

実際の作業環境はこんな感じです。初心者にしては割とリッチな環境なんじゃないかと批判が来そうですね、、、

写経コーディング作業風景

上記の画像は、MacBook Pro側の作業画面です。

画面全体にAtomを広げてコーディングしています。

「この部分どうやってコード書けばいいんだろう？」と分からなくなった時は、３本指でサッとスライドさせれば、Safariですぐに調べ物ができるようにしています。（Macって便利ですよね）

セカンドスクリーン側の作業風景

上記の画像はセカンドスクリーン側の作業画面です。

ご覧の通り、画面比率21:9という特殊なディスプレイを使用しているので、横幅がビヨーンと長くなっているのがわかると思います。

画面の左にお手本となるページの画像を表示し、右側にブラウザで現在のコーディングの様子を確認できるようにしています。

簡単に見比べることができるので、けっこうおすすめ。

完全初心者！リアルな写経コーディング -コーディング編-


では「実際にどんなコード書いているのか気になるー」って方に私が実際書いたコードを見せてしまいます。

あくまで僕が書いたコードなので、正解とは程遠いものになっていますので、参考程度にしてくださいね。

お手本としたのは下記のサイト。
【初心者向け】HTML+CSS練習用のサンプルコード
※記事が削除されたようなので、リンクは切ってあります。

レイアウトが超シンプルで分量も少なめなので、Progateを終えたばかりの僕にはちょうどいい感じのボリュームでした。

ただし、製作者が未経験時代に作成したもので少し古いので、サンプルコードを鵜呑みにするのはちょい危険。

CSSもレイアウトにFloatしか使用されていないので、僕は横並びのレイアウトとかをFlexboxで組みました。

他にも便利な機能があったらドンドン使ってしまいましょう！

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>sample</title>
<link rel="stylesheet" href="css/stylesheet.css">
</head>
<body>
<!-- heading -->
<header>
<div class="header_container">
<div class="header_logo">
<img src="images/logo.png">
</div>
<div class="header_right">
<div class="header_text">
<p>TEL 00-0000-0000<br>
(受付時間　平日　9:00~17:00)</p>
</div>
<div class="header_contact">
<button type="button" class="btn header_btn">お問い合わせ</button>
</div>
</div>
</div>
</header>
<!-- mainimage -->
<div class="main_image">
<img src="images/main_image01.jpg">
<div class="main_image_innner">
<h1>キャッチコピー</h1>
</div>
<div class="main_image_text">
<div class="baloon">
<p>テキストテキストテキスト</p>
</div>
</div>
</div>
<!-- main-content-top -->
<div class="main_content_top_wrap">
<div class="main_content_top">
<div class="main_content_top_text">
<div class="arrow">
<p>1.テキストテキ<br>ストテキスト</p>
</div>
</div>
<div class="main_content_top_text">
<div class="arrow">
<p>2.テキストテキ<br>ストテキスト</p>
</div>
</div>
<div class="main_content_top_text">
<div class="arrow">
<p>3.テキストテキ<br>ストテキスト</p>
</div>
</div>
</div>
</div>
<!-- main-content -->
<div class="main_content_container">
<div class="main_content">
<div class="main_content_box">
<img src="images/photo01.jpg">
<div class="main_content_text">
<h2>1.テキストテキストテキスト</h2>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div>
</div>
<div class="main_content_box">
<img src="images/photo02.jpg">
<div class="main_content_text">
<h2>2.テキストテキストテキスト</h2>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div>
</div>
<div class="main_content_box">
<img src="images/photo03.jpg">
<div class="main_content_text">
<h2>3.テキストテキストテキスト</h2>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div>
</div>
</div>
</div>
<!-- footer -->
<div class="footer">
<div class="footer_container">
<div class="footer_text">
<p>TEL 00-0000-0000<br>
(受付時間 平日9:00〜17:00)</p>
</div>
<div class="footer_contact">
<button type="button" class="btn footer_btn">問い合わせボタン</button>
</div>
</div>
</div>
<!-- creative commons -->
<div class="creative_container">
<div class="commons_text">
<p>©️samplesamplesamplesamplesample</p>
</div>
</div>
</body>
</html>
view raw index.html hosted with ❤ by GitHub

html,body,div,span,iframe,h1,h2,h3,h4,h5,p,a,img,ul,li,table,tr,th,td,tbody,footer,header,main,nav,section {
margin: 0;
padding: 0;
border: 0;
font-weight: normal;
list-style: none;
text-decoration: none;
}
body {
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
body {
width: 100%;
}
/* header */
.header_container{
width: 960px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content:space-between;
padding: 10px;
}
.header_right{
display: flex;
align-items: center;
}
.header_text{
margin-right: 20px;
}
.btn{
color: white;
background-color: red;
text-align: center;
border-radius: 1px;
}
.header_btn{
padding: 10px 20px;
}
/* mainimage */
.main_image{
position: relative;
width: 1200px;
margin: 0 auto;
}
.main_image_innner{
position: absolute;
color: lightgray;
top: 45%;
left: 50%;
transform: translate(-50%,-50%);
font-size: 2em;
margin: 0;
padding: 0;
}
.main_image_text{
position: absolute;
width: 100%;
color: white;
font-size: 2em;
top: 94%;
left: 50%;
text-align: center;
transform: translate(-50%,-50%);
background-color: lightgray;
padding: 10px 0;
}
.baloon{
position: relative;
}
.baloon:after{
content: "";
position: absolute;
right: 0;
bottom: -25px;
left: 48%;
width: 0;
height: 0;
border-style: solid;
border-color: lightgray transparent transparent transparent;
border-width: 15px 20px 0 20px;
}
/* main content top */
.main_content_top{
width: 960px;
display: flex;
justify-content: space-around;
padding: 100px;
margin: 0 auto;
}
.main_content_top_text{
position: relative;
width: 190px;
height: 190px;
border: solid 2px black;
border-radius: 50%;
}
.main_content_top_text p{
position: absolute;
font-size: 22px;
left: 0;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
width: 190px;
text-align: center;
}
.arrow{
}
.arrow:before,
.arrow:after{
content: "";
position: absolute;
right: 0;
left: 40%;
width: 0;
height: 0;
}
.arrow:before{
bottom: 13px;
border-style: solid;
border-color: black transparent transparent transparent;
border-width: 20px 17px 0 17px;
}
.arrow:after{
bottom: 18px;
border-style: solid;
border-color: white transparent transparent transparent;
border-width: 20px 17px 0 17px;
}
/* main content */
.main_content_container{
width: 1200px;
margin: 0 auto;
}
.main_content_box{
height: 400px;
display: flex;
}
.main_content_box:nth-child(even){
flex-direction: row-reverse;
}
.main_content_text{
background-color: lightgray;
padding: 20px;
}
.main_content_text h2{
color: white;
}
.main_content_text p{
color: white;
margin: 25px 40px 0 0;
}
/* footer */
.footer{
width: 1200px;
margin: 0 auto;
}
.footer_container{
margin: 60px 190px;
padding: 30px;
background-color: lightgray;
display: flex;
justify-content: space-between;
align-items: center;
}
.footer_btn{
padding: 20px 100px;
font-size: 1em;
}
.footer_text{
margin: 0 auto;
}
/* creative commons */
.creative_container{
width: 100%;
height: 70px;
background-color: lightgray;
}
.commons_text{
line-height: 70px;
width: 1200px;
margin: 0 auto;
}
.creative_container p{
font-size: 0.8em;
margin: 0 100px;
}
view raw stylesheet.css hosted with ❤ by GitHub

現役のエンジニアの方が見たら、「めちゃくちゃだな！」と怒られそうなコードですが、見た目がそれっぽくなっていたらそれでいいのです。

レスポンシブデザインなんて考えてません！

コーディングの期間としては、余裕で１ヶ月くらいかかってます、、、

「他の仕事やっててできなかったんだよー」なんて言ったら、言い訳にしかなりませんが、ものすごい時間かかってしまいました。絶望…

現役の方だったら1日か2日で、余裕で仕上げてくる内容だと思います。もっと効率よくコーディングできるようにしていきます。はい。

完全初心者！リアルな写経コーディング -写経のポイント編-


「写経」といっても、ただ単にソースコードを書き写せばいいというものではありません！

次に僕が意識している写経コーディングのポイントをまとめましたのでご参考になさってください。

  • お手本となるページを、ソースコードを見ずにコーディング。
  • 分からなくなったら、すぐ調べる。
  • ただし調べても解決できなかったら、ソースコードを見ても良い。
  • 見た目はしっかり整える。
  • レスポンシブデザインで作る。

コーディング完了後

写経コーディングが終わり、ページが完成したら、お手本となっているサイトのソースコードと自分の書いたコードを見比べてみましょう。

見た目は同じでも、中身が違うということが多いです。

ほとんどのサイトは僕ら初心者が書くよりも、キレイで効率の良い書き方をしているはずなので、「この部分こういう書き方してるんだ」とか「そうすれば簡単に書けたんだな」とか

簡単に分析してみると、次につながる写経コーディングになります。

完全初心者！写経コーディング -まとめ-

この記事では、

  • 作業環境編
  • コーディング編
  • 写経のポイント編

と3つに分けて写経コーディングをご紹介しました。

写経コーディングは基礎を勉強するよりも、難しく時間がかかりますね。

でも新しい知識が増えると、ウキウキしている自分にも気がつくのではないでしょうか？

このウキウキが次のコーディングにも必ず役立ちますので、継続してやっていきましょう！

ペット保険ペット保険の資料一括請求サービス

キャットフード愛猫にスッキリ快適な毎日を過ごしてほしいあなたへ『モグニャン』

関連記事

【CSS】の基本的な書き方【ちょっと実用的な書き方も紹介します】...

HTML/CSS

【CSS】!importantとは？使い方を解説【優先順位を理解しよう】...

HTML/CSS

【CSS】width（幅）・height（高さ）とは？【よく使う指定を解説します】...

HTML/CSS

【解決】送信されたurlにnoindexタグが追加されています の対処法...

WordPress

HOME >  HTML/CSS >  【プログラミング】完全初心者！リアルな写経コーディング【HTML・CSS】