【※この記事は2025年4月3日に更新されました】
Medi-UPでは、薬剤師のためのプログラミングスクール『メディスキル』のカリキュラムを紹介しています。
今回の記事では、カリキュラムの第8回『模写②』についてご紹介します。
少しでも興味がある方はご覧ください。
第8回『模写②』の概要
前回に引き続き、今回ご紹介する「模写②」カリキュラムも選択制となっています。
必須ではありませんが、プログラミングスキルを本気で伸ばしたい方にとっては、ぜひ取り組んでほしい内容が詰まっています。
特に、これから副業で少しでも稼げるスキルを身につけたい方にとって、実践的な模写学習は非常に効果的です。
模写②では、前回の模写①で学んだ内容をさらに深掘りし、より実践的なコーディング力の習得を目指していきます。
今回の「模写②」は、前回の模写①の続きにあたる内容です。
より複雑なレイアウトやスマホ対応、CSSの応用などを通じて、一段階上のコーディング力を身につけることができます。
模写②カリキュラムでは、以下の2つを中心に解説していきます:
コーディング力をさらに高めるための実践ポイント
アウトプット力を鍛える模写課題についての解説
模写を通じて得た知識やスキルを、しっかりと「自分の力」として定着させるための内容となっています。
コーディング力をさらに高めるための実践ポイント|模写②で学べるステップアップ学習
模写①では、Webサイトの模写に関する基本的な知識や手順を学びました。
そして模写②では、より実践的なスキルを身につけるために、ワンランク上のコーディング知識を学んでいきます。
ここでは、HTML/CSSの理解を深め、現場でも通用する力を養うための重要な学習ポイントをご紹介します。
プログラミングの知識を深めるためのおすすめ学習サイト
模写②では、まずプログラミング初心者がつまづきやすいCSSの概念を理解してもらうため、信頼性の高い学習サイトをご紹介します。
特に注目すべきトピックは以下のとおりです:
Flexboxの使い方(レスポンシブ対応やレイアウト調整に必須)
中央寄せの方法(初心者が混乱しやすいポイント)
疑似要素の活用(:before や :after など)
marginとpaddingの違い(余白調整の基本)
これらの知識をしっかり理解することで、模写の精度が飛躍的にアップします。
リセットCSSについて
Webサイトを一からコーディングする際に欠かせないのが、リセットCSSです。
これは、ブラウザごとに異なる初期スタイル(デフォルトCSS)を統一するためのスタイルシートで、正確な表示とデザイン再現性を保つために非常に重要です。
模写をする際には、最初にリセットCSSを導入する習慣をつけましょう。
CSSの優先順位と詳細度について
CSSでは、同じ要素に対して複数のスタイルが書かれている場合、どのスタイルが適用されるかが「優先順位」によって決まります。
また、詳細度(specificity)という概念も、CSSの適用順を理解するうえで重要です。
なぜあるCSSが反映されないのか?
なぜ!importantが必要になるのか?
といった疑問を持ったときに、この知識が大きく役立ちます。
初心者には少し難しく感じるかもしれませんが、今後の学習の土台として、ぜひ覚えておきたいポイントです。
コーディングを効率化する便利機能、Emmetについて
模写作業の効率を大幅に高めてくれるのが、Emmet(エメット)というツールです。
HTMLやCSSを短い記述で瞬時に展開できるショートカット機能で、プロの現場でも多用されています。
最初は使いこなすのが難しく感じるかもしれませんが、効率よくコーディングするために知っておきたい便利機能です。
模写の課題について
これまでの解説が終わったら、いよいよ模写②の実践課題に取り組んでいただきます。
模写①と同様、今回も1つのWebサイトを選び、実際に模写を行う課題形式となっています。
ただし今回は、CSSの優先順位や詳細度、リセットCSS、Emmetなど、先ほど学んだ知識を活用して模写を進めていきましょう。
「なぜこのCSSが反映されないのか?」「どうやって中央寄せするのか?」といった疑問に、自分で答えられるようになることが目標です。
今回取り組む基本課題の他に、よりスキルアップを目指す方のために、中級編・上級編の模写課題もご用意しています。
いずれも難易度は高めですが、コーディングスキルを一気にレベルアップさせたい方には最適な課題です。
時間のあるときに少しずつでも取り組んでみることで、実力が大幅にアップするので、ぜひ受講生には取り組んでいただきたいと考えております。
以上、メディスキルのカリキュラム第8回『模写②』についてご紹介しました。
この記事を読んで、『自分もプログラミングを学習したい』と思ったらぜひご連絡ください。
まとめ
いかがでしたでしょうか。
弊社ではさまざまな想いを持った方がフリーランス薬剤師を選択しております。
・自身のやりたいことを叶えるため
・将来独立したいため
・今の環境を変えたい
・今の職場に+αの要素を取り入れたい
そういった考えの方の選択肢の手助けとなれるように「きょうりょく薬剤師」は運営を行っております。
気になる方は以下より詳細をご確認ください。
他のフリーランス薬剤師の働き方を知りたい方へ
弊社ではさまざまなフリーランス薬剤師の仕事体験談を記載しております。
他の方がどのように働いているか気になる方は以下より詳細をご確認ください。