WEB制作

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

2021年6月29日

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

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

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

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

IMG 5924
よし

こんにちは、よし(@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

NFT

2022/4/8

【OpenSea】Polygon(ポリゴン)NFTは売れない?デメリットはある?

no image

NFT

2022/4/16

OpenSeaで予約販売(List)する方法【自動で出品】

no image

NFT

2022/4/5

売れないNFTアートと売れたNFTアートを徹底比較【実体験】

no image

NFT

2022/3/3

【超簡単】OpenSeaのアイテムをコレクション移動させる方法【販売後も可能】

no image

NFT

2022/2/5

写真のNFT化・販売方法について徹底解説!

no image

NFT

2022/2/2

OpenSeaが突然の出品制限【50作品×5コレクションが上限に?】

no image

NFT

2022/1/26

【簡単】OpenSeaのアカウントを複数作る方法

no image

WEB制作

2022/4/3

テックアカデミー「はじめての副業コース」のLiteプランがヤバすぎる!

no image

仮想通貨 NFT

2022/1/5

【簡単】コインチェックで仮想通貨を購入・MetaMaskに送金する手順

no image

NFT 仮想通貨

2022/1/5

【2022年】メタマスクの使い方・送金方法を徹底解説【初心者でも簡単】

no image

仮想通貨

2022/1/24

【実体験】仮想通貨初心者にコインチェックがおすすめな理由

no image

仮想通貨

2022/1/24

【2022年】コインチェックの口座開設方法を5段階で解説

no image

NFT

2022/1/6

【バズるコツも紹介】NFTギブアウェイ(Giveaway)のやり方とメリット・デメリットを解説

no image

仮想通貨

2022/1/6

Hi Dollars(ハイダラーズ)アプリのマイニングで仮想通貨を貰おう【無料でゲット】

no image

NFT

2021/12/30

NFTエアドロップの受け取り方・送り方を解説【初心者でも簡単】

no image

NFT

2021/12/26

NFTアートが売れないときの対処法と稼ぐコツ【今すぐできる】

no image

NFT

2022/1/5

OpenSeaでのNFTアートの作り方【出品手数料やガス代も解説】

no image

WEB制作 プログラミング

2021/12/21

分割払いできる?デイトラの支払い方法を解説!【結論:カード使えば分割可能】

no image

プログラミング

2021/12/7

【退会料はかかる?】レバテックルーキーの退会方法【他のIT就活サービスも紹介】

no image

WEB制作

2021/12/5

デジタルハリウッドSTUDIO by LIG(Webデザイナー専攻)の学習内容と評判【2021年最新】

-WEB制作

© 2022 よしブログ Powered by AFFINGER5