WEB制作

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

2021年6月29日

me
悩んでいる人

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

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

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

cropped secondfavicon 1
よし

こんにちは、よし(@yoshi120208)です。

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

この記事でわかること

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

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

未経験の大学生がweb制作で案件を取れた方法
【独学】大学生がweb制作で稼げるようになったロードマップ

続きを見る

【web制作はオワコンなんかじゃない!】その理由と今後も稼げるweb制作者になる方法
【web制作はオワコン!?】その理由とオワコンにならない方法

続きを見る

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

それではいきましょう!

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

擬似要素 before,afterとは

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

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

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

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

擬似要素 before,afterの使用例

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

擬似要素before,afterの使用例1

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

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

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

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

擬似要素before,afterの使用例2

円背景の矢印

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

擬似要素before,afterの使用例3

吹き出し

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

擬似要素before,afterの使用例4

擬似要素 before,afterの注意点

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

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

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

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

flexboxとは

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

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

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

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

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

flexboxの使用例

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

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

横並び

flexboxの使用例1

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

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

縦並び

flexboxの使用例2

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

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

真ん中に配置

flexboxの使用例3

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

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

positionとは

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

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

positionの例

position:absolute;

positionの使用例1

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

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

position:relative;

positionの使用例2

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

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

position:fixed;

positionの使用例3

固定したい要素に

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

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

position:static;

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

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

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

いかがでしたか?

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

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

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

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

続きを見る

それではまた!

no image

大学生

2021/10/18

【暇な大学生におすすめ】暇な時間を有効活用できる方法

悪質な情報商材に騙されないポイントと怪しいと思った時の対処法【実体験】

WEB制作 ブログ運営 プログラミング

2021/10/16

悪質な情報商材に騙されないポイントと怪しいと思った時の対処法【実体験】

211007アートボード 1 のコピー 42

ブログ運営

2021/10/7

【特化ブログ運営4ヶ月目】アクセス微増、収益4桁達成!!

【テックアカデミー】PHP/Laravelコースで身に付くスキル、評価は?

プログラミング

2021/9/30

【テックアカデミー】PHP/Laravelコースで身に付くスキル、評価は?

【特化ブログ運営3ヶ月目】ちょっとサボっちゃったけど収益とアクセスは?

ブログ運営

2021/9/5

【特化ブログ運営3ヶ月目】ちょっとサボっちゃったけど収益とアクセスは?

【web制作挫折防止】クラウドソーシング案件で消耗しない為のポイント

WEB制作

2021/9/30

【web制作挫折防止】クラウドソーシング案件で消耗しない為のポイント

簡単なサムネ、バナーの作り方!

WEB制作 ブログ運営

2021/8/19

【簡単】短時間でサムネ、バナーを作る手順!

no image

WEB制作

2021/8/18

webデザイナーはコーディングできないといけない??

no image

WEB制作

2021/8/19

【web制作は大変?】実際に経験した感想を語る

no image

WEB制作

2021/10/8

webデザイナーは絵が下手でもなれる?!

no image

WEB制作

2021/8/15

web制作案件に必要なスキルセット【初心者必見】

【文系もOK】レバテックルーキーの評判、口コミと使ってみた感想

プログラミング

2021/10/16

【文系もOK】レバテックルーキーの評判と使ってみた感想

【Udemy】web制作が学べるおすすめ講座  

WEB制作

2021/10/14

【Udemy】web制作が学べるおすすめ講座  

5149301 s

ブログ運営

2021/8/20

【特化ブログ運営2ヶ月目】アクセス数と収益は先月から変わった??

fv e1622358020615

ブログ運営

2021/8/13

ブログのコンタクトフォームの必要性と実装方法

【Local By Flywheel】WordPressのローカル環境構築手順

WEB制作 wordpress

2021/8/23

Local By FlywheelでWordPressローカル環境を構築する方法

undraw warning cyit

プログラミング

2021/8/23

プログラミングスクール卒業生が「使えない」と言われる理由と解決策

WordPressの子テーマのメリットデメリット

wordpress

2021/10/12

【WordPress】子テーマの作成方法とメリットを解説

undraw researching 22gp

プログラミング

2021/10/12

文系大学生が新卒でエンジニア就職する方法

【安い】大学生に本気でおすすめのwebデザインスクール4選!

WEB制作

2021/9/29

大学生におすすめのwebデザインスクール4選【安い】

-WEB制作

© 2021 よしブログ Powered by AFFINGER5