コーディング実践演習の実施と表示確認完了まで（有料note記事を使用）

2021年3月13日 2025年5月6日

WEB制作の勉強として模写を数件実施してきましたが、これまでプロレベルの方に確認してもらったことはありませんでした。

ネットで調べてみると、noteというWEBサイトにある“しょーごさん”という方が書いた記事が目に止まり、有料だったものの、それほど高額ではなかったため購入し、この記事のコーディング実践演習をやりました。

表示確認まで実施してくれるコーディング実践演習

この記事の凄いところはプロレベルの方にコーディング実施後に表示確認を安価な料金で2回も実施してもらえることです。

下記にリンクを貼ります。

https://note.com/samuraibrass/n/n1622c507b9c7

金額は初級Exのこの記事で980円です。※2021年3月現在です。

中級からは動きのあるWEBサイトのコーディングになります。まだ、現時点ではやっていませんが、JavaScript、jQueryを使用することになると思います。

私は次の記事の初級から上級記事をまとめて購入しました。

https://note.com/samuraibrass/m/mad296098d928

初級Exのコーディングを少しやってみての感想は、少し前にデイトラの簡単な模写と“はにわまんさん”のサイトの模写をやり切っていたため、それほど時間がかからないと思っていましたが、想像以上に大変でした。

下記にその模写をした際の記事を貼っておきます。

完全初心者からの仕事と両立したWEB制作の勉強

2021.2.19

こんにちは、ゆいちです。 21年2月に入って２週間経ちましたが、この間はWEB制作のための勉強を重点的に行っていました。 WEBサイト制作となると必要な知識はとです。この他にも、等もあると思います。まず、ここまでの私のWEB制作に対しての勉強、実施した内容については、以下の通りです。 W...

私は日中は会社員として働いているため、やれるのは帰宅してからか、出社前の早朝かになります。しかし、仕事の疲れと育児もやらないといけないといけないため、平日はあまり作業時間が取れず、まとまって作業できるのは休日になります。

時間も確保できないこともあって、予想以上に時間がかかってしまいました。

気付いたら、1回目の表示確認の依頼まで2週間かかっていました。

前回のデイトラの無料模写と“はにわまんさん”の模写も多くの勉強をしましたが、今回もかなりの勉強をさせてもらいました。

作成したコードを見返して、苦労した時のことを思い返しながら、今後も使うであろうコード、キーとなったコードを下記に示します。

HTMLコーディングの復習コード

- 図表であることを示す。

<figure></figure>

- 時間表記であることを示す。

<time datetime="20xx-xx-xx”></time>

- Google マップの実装。

<iframe src=“url” width="" height="" frameborder="" style="" allowfullscreen></iframe>

下記の“はにわまんさん”のサイトが参考になりました。

https://haniwaman.com/google-map/

CSSコーディングの復習コード

- 背景画像の設定

background: transparent url('../images/——.png/*画像名*/‘) center center no-repeat padding-box;

background-color
background-image
background-position
background-repeat
background-origin 背景配置領域

- 縦書き

-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;

- フォントの設定

font: normal normal bold 24px/35px Noto Sans JP;

font-style
font-variant
font-weight
font-strech
font-size
line-height
font-family

- マーカーのように線を引く。

background: linear-gradient(transparent 70%, #———/*色*/ 70%);

- 親要素に対して子要素の位置を設定

/*親要素*/
position:relative;

/*子要素*/
position:absolute;

transform: translateX(-50%); /*X方向の中心揃え*/
-webkit-transform: translateX(-50%); /*Google Chrome、Safari対応*/
-ms-transform: translateX(-50%); /*Internet Explorer対応*/

/*親要素のrelativeをキャンセル*/
position:static;