カテゴリー

  • Tech
  • 英語学習
  • セブ島・留学準備
  • キャリア
  • Kredo
KredoのIT留学
スタッフ募集中
留学体験談
無料相談はこちら
セブ島IT留学の「Kredo」が運営するメディア「Kredoblog」
  • TECH Tech
    • Web・プログラミング

      Web・プログラミング

    • テクノロジー

      AI・テクノロジー

  • ENGLISH 英語学習
    • 英語学習法

      英語学習法

    • 英語表現・フレーズ

      英語フレーズ

  • STUDYABROAD セブ島・留学準備
    • 語学留学

      語学留学

    • IT留学

      IT留学

    • セブ島情報

      セブ島情報

  • CAREER キャリア
    • ITキャリア

      ITキャリア

    • 転職・海外就職

      転職・海外就職

    • インタビュー

      インタビュー

  • KREDO Kredo
    • ニュース・キャンペーン情報

      ニュース・キャンペーン情報

    • CEO・STAFFブログ

      CEO・STAFFブログ

    • IT×英語留学体験談

      IT×英語留学体験談
      [Kredo公式サイトへ]

5月申し込み限定授業料半額 kredo it留学オンライン
  • TOP
  • Tech
  • Web・プログラミング
  • CSSの練習におすすめな模写コーディングとは?

CSSの練習におすすめな模写コーディングとは?

Kredo編集部
Kredo編集部
公開日:2020.01.24
更新日:2020.01.23
Web・プログラミング |
  • ツイート
  • シェア
  • はてな
  • ポケット
独学
少年

CSSって習得するのが難しそう。どんなふうに練習すればいいんだろう

少女

CSSの基礎知識についてはちゃんと学習したけど、まだ自分ではコーディングできない…

参考書などでCSSを一通り学習したものの「自分で0からWebサイトを制作するのは難しい」と感じている方もいらっしゃるのではないでしょうか。

CSSをマスターするためには、知識を覚えるだけでなく、自分で手を動かしてWebサイトを制作することも必要です。

ただ「いきなり自分でWebサイトを制作するのはハードルが高い…」とも感じてしまいますよね。

そのような方は、既存サイトの模写コーディングをして、CSSの練習するのがおすすめです。

この記事では、CSSの練習におすすめな模写コーディングについて解説します。

主に模写コーディングのやり方や、模写コーディングにおすすめなサイトを紹介するので、ぜひ読んでみてください。

記事のもくじ

  • 模写コーディングとは?
  • 模写コーディングがCSSの練習におすすめな理由
    • コーディングのやり方が理解できる
    • デザイン力が身につく
    • 新しい知識も身につく
    • 自分の実力を把握できる
  • 模写コーディングでCSSの練習をする際の注意点
    • 最初はLPの模写がおすすめ
    • デベロッパーツールは極力使わない
    • 色やフォントは調べてもOK
    • 文字の大きさなどは細かくこだわらない
    • レスポンシブ対応にもする
  • 模写コーディングの流れ
  • 模写コーディング後のチェックポイント
    • コードの書き方がどのように異なるか
    • 高さや幅に大きな相違はないか
    • レスポンシブにしたら崩れないか
  • CSSの模写におすすめなサイト
    • Write
    • FLOWER
    • PAS-POL
  • まとめ:模写コーディングをしてCSSを練習しよう!

模写コーディングとは?

模写コーディングとは、既存のWebサイトのデザインを真似して、自分でWebサイトを制作することを指します。

画像やテキストの配置、装飾、大きさなどを見本通りに、自分なりに再現していきます。

基本的にWebサイトの見た目は、HTMLとCSSのコーディングで作られているので、それらをを一通り学習した人の練習として模写コーディングはぴったりです。

模写コーディングがCSSの練習におすすめな理由

模写コーディングがCSSの練習におすすめなのには、いくつか理由があります。

【模写コーディングがおすすめな理由】
  1. コーディングのやり方が理解できる
  2. デザイン力が身につく
  3. 新しい知識も身につく
  4. 自分の実力を把握できる

CSSの練習として模写コーディングをやれば、勉強になる部分がたくさんあります。

コーディングのやり方が理解できる

おすすめする一つ目の理由に、HTMLとCSSのコーディングのやり方が理解できることが挙げられます。

HTMLとCSSを一通り学習したものの「このプロパティはどのように使えばいいの?」「どんなコーディングをすれば綺麗なWebサイトが作れるの?」と疑問に感じたことはないでしょうか。

知識をインプットするだけでは学んだことを実践するのが難しいですが、模写コーディングで手を動かすことで「こうしたい時はこのプロパティを使えばいいんだ!」と、段々やり方がわかってきます。

0からオリジナルのWebサイトを作るのはハードルが高いですが、模写コーディングによる練習は取り組みやすいです。

デザイン力が身につく

模写コーディングでCSSの練習をすることは、デザイン力の向上にもつながるのです。

模写コーディングにはお手本となるWebサイトが必要ですが、模写するWebサイトを探していく過程で、様々なWebサイトに触れられます。

あらゆるWebサイトを見ていく中で「このようなデザイン方法があるんだ!」「このWebサイトの配色、バランスが取れているな」と、デザインに関する刺激を受けられるでしょう。

そして実際に模写コーディングで練習をすることで、デザイン性の高いWebサイトを作るスキルが身についていきます。

新しい知識も身につく

プログラマーが年収を上げる方法

「HTMLとCSSについてはしっかりと勉強してきた!」と思っていても、模写コーディングをしてみると、自分の知らなかったコーディング方法やプロパティに遭遇することが多いです。

またすでに学習した事柄であっても「これはどういう意味なんだろう…」と、理解しきれなかった部分もあるかもしれません。

しかし模写コーディングでCSSを練習していく中で、参考書を読むだけでは理解できなかった部分も理解できるようになる場合もあります。

参考書を読むだけでなく、実際に手を動かして練習することで身に付く知識もあるのです。

自分の実力を把握できる

実際に模写コーディングでCSSの練習をしていると、自分のコーディングの実力を把握できます。

模写コーディングでWebサイトを制作することによって、自分のできている部分と苦手な部分が見えてきます。

コーディングをしていて「難しい」「意外とできていない部分が多い…」と思うこともありますが、CSSコーディングのスキルを上達させるためにも、自分の実力を知ることは重要です。

模写コーディングでCSSの練習をする際の注意点

CSSの練習で模写コーディングをする際、いくつか注意しなければいけない点があります。

【模写コーディングの注意点】
  1. 最初はLPの模写がおすすめ
  2. デベロッパーツールは極力使わない
  3. 色やフォントは調べてもOK
  4. 文字の大きさなどは細かくこだわらない
  5. レスポンシブ対応にもする

CSSのスキルをアップさせるためにも、注意点を守った上で練習を重ねていきましょう。

最初はLPの模写がおすすめ

LPとはランディングページ(Landing Page)の略で、訪問者が最初にアクセスする縦長のページを指します。

LPの模写コーディングであれば、複数のページを模写する必要がありませんが、縦長なレイアウトなので練習になる量も丁度良いです。

また縦長ゆえに、ページ全体の構成を把握する力も身につきます。

LPは検索すればたくさんヒットするので、練習したいサイトを探してみましょう。

デベロッパーツールは極力使わない

デベロッパーツールとは、そのサイトがどのようなコーディングで作られているかを表示してくれる機能です。

デベロッパーツールは便利な機能ですが、模写コーディングでは基本的に自力でコーディングするようにしましょう。

もしデベロッパーツールを見ながら模写コーディングをすると「ここはどうすれば再現できるんだろう…」と、自分の頭で考えて組み立てる力が身につきません。

わからない部分があっても自分で色んなコードを試したり、Google検索で解決方法を調べることによって、自力でコーディングできるようになるのです。

デベロッパーツールは模写コーディングが終わった後の答え合わせか、どうしてもわからない時の最終手段として使いましょう。

色やフォントは調べてもOK

模写コーディングは自力でやることが基本ですが、Webサイトに使われている色やフォントは調べてもOKです。

色やフォントの判別は難しいので、その際はデベロッパーツールや調査ツールを使って調べましょう。

文字の大きさなどは細かくこだわらない

文字や画像の大きさなどは、細かくこだわらなくても大丈夫です。

よほど大きさがずれているのでなければ、大きさが違うことによってレイアウトが崩れることはないので、おおよそのサイズを予想してコーディングしていきましょう。

レスポンシブ対応にもする

現在はスマホやタブレットからアクセスする人も多いので、PCだけでなくスマホやタブレットにも柔軟に対応している(=レスポンシブ対応)サイトの需要が高いです。

なので、模写コーディングをする際はレスポンシブ対応のサイトを作りましょう。

表示が切り替わるラインはおおよそで大丈夫ですが、現在はスマホユーザーが多いので、せめてスマホ表示には対応させましょう。

模写コーディングの流れ

模写コーディングは、以下の流れて行います。

【模写コーディングの流れ】
  1. 模写したいWebサイトを探して決める
  2. HTMLで構造を作る
  3. CSSでデザインを整える
  4. デベロッパーツールで答え合わせをする

模写コーディングの際、まずはHTMLでおおよその構造を作っておいた方が、CSSが書きやすくなります。

模写コーディング後のチェックポイント

模写コーディングをした後はデベロッパーツールで答え合わせをしますが、以下の点についてしっかりとチェックしましょう。

【模写コーディング後のチェックポイント】
  1. コードの書き方がどのように異なるか
  2. 高さや幅に大きな相違はないか
  3. レスポンシブにしたら崩れないか

それぞれの点について解説します。

コードの書き方がどのように異なるか

模写コーディングをし終えて、見た目はちゃんと再現できていても、コードの書き方が異なる場合は多いです。

例えばdivタグの使い方や、CSSでのセレクタの指定方法など、その特徴はコーディングする人によって大きく異なります。

コードの書き方の違いに着目すれば、見た目は同じ結果でも「この書き方の方がより効率が良いかも!」「こういうプロパティの使い方があったんだ!」と、新たな発見があるはずです。

高さや幅に大きな相違はないか

画像などの高さや幅に大きな相違がないかもチェックしましょう。

数px単位の誤差は気にしなくても大丈夫ですが、あまりにも大きさが違いすぎるとレイアウトが崩れるので、気をつけましょう。

レスポンシブにしたら崩れないか

「PC表示では綺麗に表示されるけど、スマホ表示にしたらデザインが崩れる…」というのはよくあるパターンです。

具体例としては、スマホ表示にしたら「画像が切れて表示される」「そもそもCSSが聞いていない」という場合が多いです。

レスポンシブ対応もデベロッパーツールで確認できますので、スマホ表示でも問題なく表示されるかをチェックしましょう。

CSSの模写におすすめなサイト

最後に、CSSの模写コーディングを始めたい方に向けて、おすすめなサイトを紹介します。

【CSSの模写におすすめなサイト】
  1. Write
  2. FLOWER
  3. PAS-POL

どれもCSS初心者におすすめなサイトなので必見です。

Write

Writeは白を基調とした、非常にシンプルなサイトです。

画像やテキストの配置も難しい配置ではないので、コーディング初心者でもプレッシャーなく取り組めます。

FLOWER

FLOWERはスマホアプリのLPサイトです。

divタグの設定や横(縦)並びの配置に苦手意識がある方に向いています。

ページの情報量も多すぎず少なすぎない程度なので、取り組みやすいです。

PAS-POL

PAS-POLは「上の2つのサイトよりも少し難しめのサイトにチャレンジしたい!」という方におすすめです。

ヘッダーやフッターのデザイン、ボタンの配置、テキストの揃え方など、コーディングしていくうちに様々なことが学べます。

まとめ:模写コーディングをしてCSSを練習しよう!

今回は、CSSの練習方法としておすすめな模写コーディングについて解説しました。

CSSのコーディングを自力でできるようにするするのは、難しそうに思われるかもしれません。

しかし模写コーディングであればハードルが低いですし、お金をかけずにできるのでおすすめです。

ぜひ模写コーディングで練習をして、実践力を身につけましょう。

「これからの時代、プログラミングと英語が必要そう…」
それは、間違いではありません。

あと10〜20年の間に、人間が行う仕事の約半分が機械に奪われると言われています。
そのような未来がきたとき、自分自身、そしてあなたの大切な人を守れますか?

セブ島 IT×英語留学の「Kredo」では、
政府公認ITカリキュラム
大学教授レベルのフィリピン人IT教員
スピーキングに特化した英語クラス
日本人スタッフによる学習サポート
などによって、 これからの時代に必要なIT×英語のスキルが
初心者からでも最短で身につきます。

KredoのIT留学で人生を変えてみませんか?

\プログラミングと英語が同時に身につく!/
KredoのIT留学について詳しくみる

  • ツイート
  • シェア
  • はてな
  • ポケット
この記事を書いた人
Kredo編集部
Kredo編集部

Kredo編集部です!Tech、英語学習、キャリア、セブ島留学の情報を発信していきます。

関連記事

  • Web・プログラミング

    初心者必見!Pythonの詳しい導入手順を徹底解説【Windows・Mac別】

    2020.10.19
  • Web・プログラミング

    Rubyで開発?Ruby開発に向いているもの&開発に必要なことまで解説

    2020.09.26
  • 【2020年版】Ruby on Railsの習得度別おすすめ学習本10選!
    Web・プログラミング

    【2020年版】Ruby on Railsの習得度別おすすめ学習本10選!

    2020.09.25
  • 【初心者向け】Ruby on Railsの開発環境の基礎からおすすめ統合開発環境6選!
    Web・プログラミング

    【初心者向け】Ruby on Railsの開発環境の基礎からおすすめ統合開発環境6選!

    2020.09.11
kredo it 英語 留学

よく読まれている記事

  • 2020.12.03

    【1/6&1/7 無料オンラインセミナー】なぜ今、プログラミング × 英語を身につけるべきなのか?

  • Kredo CEO横田猛夫さん
    2019.06.26

    IT×英語を学ばなければ取り残される!Kredo CEOが日本衰退とIT業界の未来を解説

  • バックエンドエンジニアのコーディングのイメージ画像
    2019.06.05

    未経験でも習得できる実務レベルのプログラミングを学ぶコツを紹介!

  • ショッピングを楽しんでいる男女のイメージ画像
    2019.02.12

    海外就職を成功させたい人へ!経験者が教えるメリットとデメリット

  • 熱心にプログラミングを教えるフィリピン人講師と日本人留学生

    【日本語で学んでいる場合じゃない】“英語”でIT・プログラミングを学ぶメリットとは?

IT留学オンライン
kredo 留学

まずはお気軽にカウンセラーへご相談ください!

無料カウンセリングを予約する

IT×英語留学体験談

  • 10代
  • 20代
  • 30代
  • 40代~
  • 1〜4週間の短期留学
  • 5〜23週間の中期留学
  • 24週間以上の長期留学
  • WEBベーシックコース
  • WEBデザインコース
  • WEBデベロップコース
  • Ruby on Railsコース
  • AIコース
  • 英語留学コース

Kredo Blog

Tech 英語学習 セブ島・留学準備 キャリア Kredo
クレドページ
学校案内
  • Kredoの想い
  • Kredoが選ばれる理由
  • なぜ今、ITと英語なのか
  • 卒業実績
施設案内
  • 校舎・宿泊施設
  • セブ島・生活環境
留学準備
  • お申し込みまでの流れ
  • ご留学までの準備
  • 現地到着後の流れ
  • 留学中の1日のスケジュール
留学コース・料金[コース概要]
  • コース一覧
  • あなたに合ったコース選び
  • ITクラス・カリキュラム・教員
  • 英語クラス・カリキュラム・教員
  • 留学料金一覧
留学コース・料金[各コース一覧]
  • WEBベーシックコース
  • WEBデザインコース
  • WEBデベロップコース
  • Ruby on Railsコース
  • AIコース
  • 英語留学コース
  • 無料留学プログラム
  • 海外ITインターン留学(LIG)
  • 海外ITインターン留学(Sprobe)
  • 海外ITインターン留学(Alliance)
  • 親子留学 Kredo Kids
その他
  • Kredo Blog
  • Kredoスタッフ
  • 留学体験談
  • よくある質問
  • お問い合わせ
  • 法人のお客様
  • 会社概要
  • KREDO JAPAN株式会社
  • 特定商取引法に基づく表示
  • 採用情報
  • プライバシーポリシー
学校案内
  • Kredoの想い
  • Kredoが選ばれる理由
  • なぜ今、ITと英語なのか
  • 卒業実績
施設案内
  • 校舎・宿泊施設
  • セブ島・生活環境
留学準備
  • お申し込みまでの流れ
  • ご留学までの準備
  • 現地到着後の流れ
  • 留学中の1日のスケジュール
留学コース・料金 [コース概要]
  • コース一覧
  • あなたに合ったコース選び
  • ITクラス・カリキュラム・教員
  • 英語クラス・カリキュラム・教員
  • 留学料金一覧
[各コース一覧]
  • WEBベーシックコース
  • WEBデザインコース
  • WEBデベロップコース
  • Ruby on Railsコース
  • AIコース
  • 英語留学コース
  • 無料留学プログラム
  • 海外ITインターン留学(LIG)
  • 海外ITインターン留学(Sprobe)
  • 海外ITインターン留学(Alliance)
  • 親子留学 Kredo Kids
その他
  • Kredo Blog
  • Kredoスタッフ
  • 留学体験談
  • よくある質問
  • お問い合わせ
  • 法人のお客様
  • 会社概要
  • KREDO JAPAN株式会社
  • 特定商取引法に基づく表示
  • 採用情報
  • プライバシーポリシー
セブ島IT×英語留学の「Kredo」

14th Floor Central Bloc Corporate
Center Tower 1, Block 10, Geonzon St.,
Cebu IT Park, Apas Cebu City

セブ島医療専門の英語学校・看護留学の「HLCA」(姉妹校)

14th Floor Central Bloc Corporate
Center Tower 1, Block 10, Geonzon St.,
Cebu IT Park, Apas Cebu City

スクールやコースをもっと知りたい人へ 資料請求・お問い合わせ

  • fb
  • tw
  • ig

Copyright© 2019 KREDO IT ABROAD INC. All rights reserved.