【web制作】模写コーディングで難しいと感じるテクニック3選！

2021年6月29日 2021年7月15日

悩んでいる人

基礎学習が終わって模写コーディングをしてみたけで難しすぎ！！

web制作初心者にとって模写コーディングは難しくて当たり前です！

難しいと感じるテクニックをまとめてみたので、参考にしてみてください。

よし

こんにちは、よし（@yoshi120208）です。

今回はweb制作初学者が模写コーディングをする際に「難しい」と感じるポイントを解説しました。模写コーディングはもちろん、実際の案件でも頻出ポイントなので、しっかりチェックしましょう！

この記事でわかること

・模写コーディングで難しいと感じるテクニック

・模写コーディング頻出テクニックのコーディング例

: 【独学】大学生でもWeb制作で稼げるロードマップ

続きを見る

: 【Web制作はオワコン説を論破】オワコン化せず今後も稼いでいける方法とは

続きを見る

難しいと感じてしまうポイントを簡単なコード例を参考に確認していくので、しっかりついてきてくださいね。

それではいきましょう！

模写コーディングで難しいと感じるテクニック1
【擬似要素 before,after】

擬似要素 before,afterとは

まずは実案件でも多く使われる擬似要素　before,afterについて解説していきます。

擬似要素とは、CSSでHTMLを表現する機能です。

HTMLを擬似しているCSSの要素と考えると分かりやすいですね。

それでは、擬似要素before、afterではどんな事ができるのでしょうか？

擬似要素 before,afterの使用例

まずはこちらの例をみてください。

この例から分かる通り、beforeは要素の前、afterは要素の後に表示させる事ができます。

<h1 class="main1">hello world</h1>

1	<h1 class="main1">hello world</h1>

.main1::before{
    content:'before要素';
    color:red;
}
.main1::after{
    content:'after要素';
    color:red;
}

.main1::before{

content:'before要素';

color:red;

}

.main1::after{

content:'after要素';

color:red;

}

さらに、後述するpositionプロパティを合わせて使用する事で、様々な表現をする事が出来ます。

大見出しと小見出しの表現

例えば、大見出しと小見出しの表現が可能です。

<h1 class="main1">hello world</h1>

1	<h1 class="main1">hello world</h1>

.main1{
    position:relative;

}
.main1::before{
    content:'こんにちは、世界';
    color:red;
    font-size:16px;
    position:absolute;
    bottom:-20px;
    left:50%;
    transform: translateX(-50%);
}

.main1{

position:relative;

}

.main1::before{

content:'こんにちは、世界';

color:red;

font-size:16px;

position:absolute;

bottom:-20px;

left:50%;

transform: translateX(-50%);

}

円背景の矢印

少し難しいですが、円背景の矢印も作成可能です。

<div class="box"></div>

1	<div class="box"></div>

.box {
    position: relative;
    display: inline-block;
    padding-left: 20px;
    color: #333;
    text-decoration: none;
  }
  .box:before {
    content: '';
    width: 18px;
    height: 18px;
    background: #333;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: -3px;
    margin-top: -9px;
  }
  .box:after {
    content: '';
    width: 6px;
    height: 6px;
    border: 0;
    border-top: solid 2px #fff;
    border-right: solid 2px #fff;
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -4px;
    transform: rotate(45deg);
  }

.box {

position: relative;

display: inline-block;

padding-left: 20px;

color: #333;

text-decoration: none;

}

.box:before {

content: '';

width: 18px;

height: 18px;

background: #333;

border-radius: 50%;

position: absolute;

top: 50%;

left: -3px;

margin-top: -9px;

}

.box:after {

content: '';

width: 6px;

height: 6px;

border: 0;

border-top: solid 2px #fff;

border-right: solid 2px #fff;

position: absolute;

top: 50%;

left: 0;

margin-top: -4px;

transform: rotate(45deg);

}

吹き出し

こちらも少し難しいですが、擬似要素で三角形を作ることで吹き出しも実装できます。

<div class="box1"></div>

1	<div class="box1"></div>

.box1 {
    display: inline-block;
    background-color: #fc9637;
    width: 200px;
    height: 50px;
    padding: 20px 10px;
    border-radius: 20px;
    position: relative;
}
.box1::after {
    content: "";
    width: 0px;
    height: 0px;
    border-style: solid;
    border-color: #fc9637 transparent transparent transparent;
    border-width: 20px 20px 0 20px;
    position : absolute;
    bottom: -20px;
    left: 0;
    right: 0;
  margin: auto;
}

.box1 {

display: inline-block;

background-color: #fc9637;

width: 200px;

height: 50px;

padding: 20px 10px;

border-radius: 20px;

position: relative;

}

.box1::after {

content: "";

width: 0px;

height: 0px;

border-style: solid;

border-color: #fc9637 transparent transparent transparent;

border-width: 20px 20px 0 20px;

position : absolute;

bottom: -20px;

left: 0;

right: 0;

margin: auto;

}

擬似要素 before,afterの注意点

擬似要素はCSSで表現されている為、HTMLファイルに直接書かれているわけではありません。

その為、SEO的に重要な要素を擬似要素で表現してしまう事はおすすめ出来ません。

逆に装飾としての場合は擬似要素を使った方がいいとも言えます。

模写コーディング難しいと感じるテクニック2
【flexbox】

flexboxとは

flexboxは要素を横並びにする際によく使われます。

ただ横並びにするだけではなく、画面幅によってカラム落ちさせる事もできるのでとても便利です。

模写コーディングはもちろん、実案件でも必ずと言っていいほど使われます。

プロパティーも多い為、初めは難しいと感じるかもしれません。

しかし、基礎を押さえつつ、実戦で覚えていけば問題ありません。

flexboxの使用例

フレックスボックスには多くのプロパティーがあるので、全ては触れられません。

僕が模写コーディング、案件をこなす中で最低限覚えておきたいポイントを解説します。

横並び

    <div class="wrapper">
        <div class="box box1">box1</div>
        <div class="box box2">box2</div>
        <div class="box box3">box3</div>
        <div class="box box4">box4</div>
    </div>

</div>

  .wrapper{
    display:flex;
　　　　flex-direction: row;
    flex-wrap:wrap;
  }

  .box{
    display:inline-block;
    width:300px;
    height:300px;
    margin:20px;
    background-color:orange;
  }

.wrapper{

display:flex;

　　　　flex-direction: row;

flex-wrap:wrap;

}

.box{

display:inline-block;

width:300px;

height:300px;

margin:20px;

background-color:orange;

}

flexboxを使用することで、要素を横並びすることが出来ます。

また、flex-wrap:wrap;と記述することで、画面幅に合わせて要素をカラム落ちさせる事も可能です。

縦並び

<div class="wrapper">
        <div class="box box1">box1</div>
        <div class="box box2">box2</div>
        <div class="box box3">box3</div>
        <div class="box box4">box4</div>
    </div>

</div>

.wrapper{
    display:flex;
    flex-wrap:wrap;
    flex-direction: column;
  }

  .box{
    display:inline-block;
    width:300px;
    height:300px;
    margin:20px;
    background-color:orange;
  }

.wrapper{

display:flex;

flex-wrap:wrap;

flex-direction: column;

}

.box{

display:inline-block;

width:300px;

height:300px;

margin:20px;

background-color:orange;

}

flexboxはデフォルトでflex-direction:row;が設定されているため、基本的には横並びになります。

しかし、flex-direction:column; と記述すると横並びから縦並びへと変えることが可能です。

真ん中に配置

<div class="wrapper">
        <div class="box">box1</div>
    </div>

</div>

 .wrapper{
    margin:0 auto;
    background-color:orange;
    display:inline-block;
    width:300px;
    height:300px;

    display:flex;
    justify-content: center;
    align-items: center;
  }

.wrapper{

margin:0 auto;

background-color:orange;

display:inline-block;

width:300px;

height:300px;

display:flex;

justify-content: center;

align-items: center;

}

上記のように記述する事で、子要素を親要素の中心に設置することも可能です。

模写コーディングでつまずくポイント3
【position】

positionとは

positionプロパティーも実務で必ずと言っていいほど使用されているので、模写コーディングでも頻出の技術です。

こちらも少し難しいですが、画面に固定させるヘッダーメニューであったり、上で解説した擬似要素を配置する際によく使用されるのでしっかり理解しましょう。

positionの例

position:absolute;

    <div class="wrapper">
        <div class="box">box1</div>
    </div>

</div>

.wrapper{
  background-color:orange;
  display:inline-block;
  width:300px;
  height:300px;
  position:relative;
}
.box{
  position:absolute;
  top:0px;
  right:0px;
}

.wrapper{

background-color:orange;

display:inline-block;

width:300px;

height:300px;

position:relative;

}

.box{

position:absolute;

top:0px;

right:0px;

}

position:absolute;では、親要素を起点に要素を移動させます。

親要素にposition:relative;を記述しない場合はページ全体が起点となります。

position:relative;

    <div class="wrapper">
        <div class="box">box1</div>
    </div>

</div>

.wrapper{
  background-color:orange;
  display:inline-block;
  width:300px;
  height:300px;
}
.box{
  position:relative;
  top:0px;
  right:50px;

}

.wrapper{

background-color:orange;

display:inline-block;

width:300px;

height:300px;

}

.box{

position:relative;

top:0px;

right:50px;

}

position:relative;では、元の位置から、相対的に移動させる事が出来ます。

ただ、個人的にはrelativeで移動させることはあまりなく、positionの起点にする為記述することが多いです。

position:fixed;

固定したい要素に

position:fixed;
top:〜px;
left:~px;

position:fixed;

top:〜px;

left:~px;

と記述する事で要素がスクロールしても画面内に固定されるようになります。

ヘッダーメニューやお問い合わせボタンなどでよく使われます。

position:static;

staticはpositionプロパティーの初期値です。

こちらの記事で解説しているように、レスポンシブコーディングの際に、スマホ時は初期値に戻したい時によく使用します。

まとめ　模写コーディングが難しいと感じるポイントを見直そう

いかがでしたか？

Web制作初学者にとって、基礎学習を終えた後の模写コーディングは難しいと感じることは仕方がありません。

しかし、自分がどの部分で難しいのかを理解し、知識を補っていくと、案外簡単に出来ることに気がつきます。

模写コーディングが終わったら、案件獲得のため、自作サイトの作成にも挑戦しましょう！

: 【web制作案件獲得に向けて】模写コーディングが終わったら、自作サイトを作ろう！

続きを見る

それではまた！

この記事タイトルとURLをコピー

-WEB制作

【web制作】模写コーディングで難しいと感じるテクニック3選！

【独学】大学生でもWeb制作で稼げるロードマップ

【Web制作はオワコン説を論破】オワコン化せず今後も稼いでいける方法とは

模写コーディングで難しいと感じるテクニック1【擬似要素 before,after】

擬似要素 before,afterとは

擬似要素 before,afterの使用例

大見出しと小見出しの表現

円背景の矢印

吹き出し

擬似要素 before,afterの注意点

模写コーディング難しいと感じるテクニック2【flexbox】

flexboxとは

flexboxの使用例

横並び

縦並び

真ん中に配置

模写コーディングでつまずくポイント3【position】

positionとは

positionの例

position:absolute;

position:relative;

position:fixed;

position:static;

まとめ 模写コーディングが難しいと感じるポイントを見直そう

【web制作案件獲得に向けて】模写コーディングが終わったら、自作サイトを作ろう！

模写コーディングで難しいと感じるテクニック1
【擬似要素 before,after】

模写コーディング難しいと感じるテクニック2
【flexbox】

模写コーディングでつまずくポイント3
【position】

まとめ　模写コーディングが難しいと感じるポイントを見直そう