CSS

CSSの軽量フレームワーク10選を現役エンジニアが解説【初心者向け】

初心者向けにCSSの軽量フレームワーク10選について解説しています。フレームワークを使用すると、スタイルシートを効率的に実装することができます。主なフレームワークの例と導入方法を覚えましょう。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　調査手法：インターネット調査

CSSの軽量フレームワーク10選について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

そもそもCSSについてよく分からないという方は、CSSの書き方について解説した記事を読むとさらに理解が深まるでしょう。

なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のCSSカリキュラムをもとに執筆しています。

今回は、CSSに関する内容だね！

どういう内容でしょうか？

CSSの軽量フレームワーク10選について詳しく説明していくね！

お願いします！

フレームワークとは

フレームワーク（framework）とは、会社の大規模の組織（リソース）での協業を前提として、多少なりの規模が異なっていても規則性のあるソースコードを実現するためのソフトウェアです。

[PR] Webデザインで副業する学習方法を動画で公開中

フレームワークを使うメリットとデメリット

フレームワークを導入するだけではなく、フレームワークを使用することによる恩恵と損失の可能性を下記に述べます。

メリット

ある程度の品質が保たれた規則性もある成果物の生産について、組織の複数人での協業を円滑に活動させて、工数の圧縮や作業の効率化を望めます。

品質については、生産量を堅調に安定化できると労力を軽減できるでしょう。

デメリット

会社の成果物に対する品質は期待可能であるものの、それに伴う構成員に対する負荷の分散にはなりません。

なお、会社の組織での協業を前提としているため、会社の大規模の組織が必要不可欠になりやすいです。

執筆してくれたメンター

井内洋平

TechAcademyの現役メンター。

元Web Developerで、趣味は貯金、節税対策、投資信託、株式投資、FXなど多岐にわたる。

CSSの軽量フレームワーク10選がよく分かりやすくて良かったです！

ゆかりちゃん、これからも分からないことがあったら質問してね！

分かりました。ありがとうございます！

TechAcademyでは、初心者でもオリジナルWebサイトを公開できるオンラインブートキャンプWebデザイン講座を開催しています。

挫折しない学習方法を知れる説明動画や現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。

プログラミングを独学していて、このように感じた経験はないでしょうか？

・調べてもほしい情報が見つからない
・独学のスキルが実際の業務で通用するのか不安
・目標への学習プランがわからず、迷子になりそう

テックアカデミーでは、このような学習に不安を抱えている方へ、現役エンジニア講師とマンツーマンで相談できる機会を無料で提供しています。
30分間、オンラインでどんなことでも質問し放題です。

「受けてよかった」と感じていただけるよう厳しい試験を通過した講師があなたの相談に真摯に向き合います。

「ただ気になることを相談したい」
「漠然としているがプロの話を聞いてみたい」
こんな気持ちでも大丈夫です。

無理な勧誘は一切ありませんので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）

今なら参加者限定の割引特典付き！無料相談を予約する

CSSでonclick-event（クリックイベント）を実装する方法を現役エンジニアが解説【初心者向け】

CSSでonclick-event（クリックイベント）を実装する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向...

CSS

selectとoptionをCSSでカスタマイズする方法を現役エンジニアが解説【初心者向け】

select optionをCSSでカスタマイズする方法についてテックアカデミーのメンター（現役Webデザイナー）が初心者向けに解説します。目次 ...

CSS

簡単にECサイトが完成する！ネットショップ作成でおすすめのテンプレート10選

ECサイト(ネットショップ)を作成する際におすすめのテンプレートをまとめています。最近では無料でもおしゃれなテンプレートが増えてきているので、サイト作成...

Webデザイン

【誰でも簡単に！】ドラッグ&ドロップでWebサイトが作れる「Weld」が便利すぎる！

Webサイト・スマホアプリ制作をする上で便利すぎるツール「Weld」が登場しました。これまでも【プログラミング要らず！】スマホアプリが開発できるおすすめ...

Webデザイン

CSSでタブ切り替えを実装する方法を現役エンジニアが解説【初心者向け】

CSSでタブ切り替えを実装する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。そもそもC...

CSS

マイクロインタラクションで気をつけたい5つのポイント

本稿は、Free Code Campのブログ記事を了解を得て日本語翻訳し掲載した記事になります。本記事は、UX in Motionの設立者で、ワークショ...

Webデザイン

あわせてよく読まれている記事

「スキマ時間で稼げる副業はないかな…？」「どうせなら在宅でできる副業はないかな…？」「スキルを身につけながら稼ぐことはできないかな…？」この記事では、在宅でできるおすすめの副業20選を紹介し、選び方、副業をする上での注意点まで解説しています。今の会社の収入だけでは満足できていない人会社に出勤するのが無駄だと思っている人そんな人に向けて書きました。この記事を最後まで読めば、あなたにぴったりの副業が見つかるでしょう。目次フレームワークとはフレームワークを使うメリットとデメリットおすすめフレームワーク10選人気のあるフレームワークを試してみよう執筆してくれたメンター副業で特におすすめなのはIT系の副業です。習得に時間と労力はかかるが、しっかり力をつければ安定して稼ぐことができます。プログラミングは今後必要とされるスキルですので、副業を機会に始めてみるとよいでしょう。難しい印象がありますが、意外と楽しく感じる人も多いので、まずはIT系の副業について勉強してみるのがおすすめです。プログラマー Webサイト制作 Webデザインプログラミングで副業したい人向けに、未経験から副業プログラミングで稼ぐ方法を解説した記事もあります。ぜひご覧ください。 1 在宅でできる副業20選在宅でできる副業にはどのようなものがあるのでしょうか。現在人気の副業を中心に、それぞれの特徴をまとめました。また、スキマ時間で毎月一定収入を稼ぎたいと考えている方向けに、「現実的に副業の範囲で5万円稼げるのか」という点についても説明しています。 1.1 Webライティング Webライティングは、クライアントが指定した内容やテーマに沿って、記事を執筆する仕事です。 Webメディアをはじめとする、様々な媒体でニーズがあり、ブログや商品紹介ページの作成、最近ではYouTubeの台本などの仕事もあります。 Webでの検索は今後も増加していく一方ですので、圧倒的に将来性がある副業だと言えるでしょう。また、時間の確保さえできれば、毎月5万円を安定的に稼ぐことが可能です。長期間継続し、文字単価を上げることができればより少ない時間で収入を得られるようになります。向いている人継続的にスキルアップし、専門性を高めていける人記事を書くために多くのWebサイトや資料を読み込むため、情報収集が苦にならない人様々な分野に興味を持つことができる人タイピングに自信がある人報酬体系文字単価に、納品した記事の文字数を掛け合わせて計算する 1文字0.5円〜3円、1件あたり2000文字〜10000文字が相場成果報酬型のため、案件を多く受けることができればその分収入アップにつながるクラウドソーシングなどのサイトを利用すれば、案件を受注し納品することで即収入が発生メリット日本語の読み書きができれば、特別なスキルがいらない本業にも通じる文章作成能力が身につくデメリットライバルが多く、案件が取りづらい可能性がある案件が取れたとしても最初のうちは低単価で受注することも多くなる 1.2 ブログ自分自身で開設したブログから収益を得る仕事です。ただし、記事を更新するだけでは収益が発生しません。主に記事に外部企業の商品広告を貼り、そこから商品を購入したユーザーがいる場合に手数料が受け取れる「アフィエイト」と、Googleのバナー広告を掲載し記事がクリックされると報酬が発生する「Google アドセンス」という2つの方法があります。 Web広告の市場規模は年々拡大しているため、今後もニーズが増え続けていくでしょう。しかし、ブログアフィリエイターの30％以上が、ブログからの収入を得られていません。月5万円を稼ぐとなると、上位20％に入る必要があるため、安定的に稼ぐためのハードルはかなり高いと言えるでしょう。参考：特定非営利活動法人　アフィリエイトマーケティング協会　「アフィリエイトに関する市場調査　2020年向いている人収益化するまで記事更新を継続できる人「これだけは他の人に負けない」といった特定の分野に精通している人報酬体系アフリエイトの場合、広告を通して商品を1つ購入した場合に、商品価格の数％または一定額が支払われる報酬額は商品ごとに異なり、1件あたり100円〜数千円アドセンスの場合、1クリック30〜40円、PV数次第で収益が変わる記事作成後、検索に反映されるまで3ヶ月ほどかかることがほとんどのため、収益化までは少し時間がかかるメリット P V数を増やす過程で、記事のライティングスキルや集客スキルが身につく一度稼げるブログを作ってしまえば、何もしなくても広告収入が発生するため不労所得を得ることができるデメリット競争が激しく収益化するまでに時間がかかる 1.3 プログラマープログラミング言語を用いて、様々なシステムやアプリケーションを作成したり、動かしたりする仕事です。基幹システムのサーバー構築や、既存システムの開発やテストといった業務内容があります。2018年の時点で、プログラマーのようなIT人材は約20万人以上不足となっており、2025年ではIT人材は36万人の不足と試算されています。金融や家電、自動車など様々な分野においてI Tの活用が推進されていることも追い風になっており、かなり将来性がある職業だといえるでしょう。参考：経済産業省　2019年　I T人材需給に関する調査 1案件あたりの単価が高く、スキルが身につけば短い時間で納品まで完了できますので毎月5万を安定して稼ぐことは可能でしょう。場合によっては1案件で数十万円稼ぐこともできるのがプログラマーの特徴です。ただし、高額な案件を獲得するには、それなりの経験が求められます。企業で3年以上の実務経験と向上心が必要になりますが、満たしていれば時給4,000円以上も視野に入るでしょう。向いている人プログラミングに必要な知識は日々アップデートされているため、常に新しいことを学んで行ける人向上心があり、前向きに取り組める人本業でプログラミングに携わっている人報酬体系プロジェクトごとに異なり、1案件あたりの単価は5〜10万円以上になることが多い高い技術が必要とされるアプリケーション作成の場合には30万円以上となることもある知識を得るために一定時間が必要とされるため、最低3ヶ月は収益が発生しない可能性が高いメリットプログラミング言語は一度覚えてしまえば様々な分野に応用可能なため、手に職をつけることができるニーズが高く、案件に困ることがない一般的にスキル習得難易度が高いと思われているが地道に継続すれば未経験からも習得できるデメリット知識を取得するまでには一定時間を確保する必要がある案件を獲得するには企業で数年の就業経験が必要関連記事：【副業】プログラミング未経験から稼ぐ方法を徹底解説 1.4 Webサイト制作ホームページやLP（ランディングページ）などのWebサイト制作をする仕事です。主にプログラミング言語を用いてコーディングをすることがメインの業務となります。現在、企業活動を行うにあたってホームページの設置は必須といえます。ホームページからの集客を重視している企業も多くなってきていますので、今後も必要とされ続ける職種です。スキルアップのための地道な努力さえできれば、初心者であっても毎月5万を継続して稼ぐことは可能です。後述するWebデザインとのスキルのかけ算で単価を上げることも可能です。案件獲得の競争が激しいという一面はありますが、ポートフォリオ作る、低単価でも実績を積み重ねる、などの工夫をすれば月5万の収益を達成できるでしょう。向いている人必要な知識が日々アップデートされていくため、常に新しいことを学ぶことができる人報酬体系クラウドソーシングから受注する場合は、1ページあたり5000円〜が相場 Word Pressのテーマ制作やコーポレートサイト全体の設計などをする場合は10万円以上になる場合も多い知識を得るために一定時間が必要とされるため、最低3ヶ月は収益が発生しない可能性が高いメリットアプリケーション制作やシステム構築を行う場合と比べてWeb制作に必要なプログラミング知識は少なくなっているため、学習を始めて収益化するまでのハードルはやや低い YouTubeの無料教材を利用したり、プログラミングスクールを利用したりすることで効率よく学べる環境があるデメリットクラウドソーシングなどのサイトでは案件数に対して応募者が多く、競争が激しくなる可能性が高い関連記事：【副業】プログラミング未経験から稼ぐ方法を徹底解説 1.5 Webデザイン Web上に表示されるページの見た目に関する制作を行う仕事です。 Webサービスや広告用LP（ランディングページ）の作成など業務は幅広く、クライアントの依頼を受けて、使い勝手の良い魅力あるページ構成やデザインを考えることがメインの業務となります。自社の魅力を世間によりよく発信するために、Webサイトにデザイン性を重視する企業が増えているため需要は高まってきているといえるでしょう。スキルアップのための地道な努力さえできれば、初心者であっても毎月5万を継続して稼ぐことは可能です。ポートフォリオを作る、低単価でも実績を積み重ねるなどの工夫をすれば月5万の収益を達成できます。先述したWebサイト制作とのスキルのかけ算で単価を上げることも可能です。向いている人新しい技術を吸収することに喜びを見出せる人デザイン以外の幅広い業務をすることに抵抗がない人報酬体系クライアントにより異なり、1案件数千円〜数万円と幅広い企業向けの場合単価が高く10万円以上の案件も多くなる知識を得るために一定時間が必要とされるため、最低3ヶ月は収益が発生しない可能性が高いメリット Web制作に必要なスキル全般が身につくデザインに関して顧客との折衝・調整を行うことも多く、コミュニケーション能力が身につくプログラミングやUI・UXデザインに関するスキルも身につくため、副業から本業へのシフトチェンジも視野に入れつつ、仕事に取り組むことができるデメリット仕事の依頼を受けることができるレベルに達するまで、一定の学習時間を必要とする関連記事：【副業】プログラミング未経験から稼ぐ方法を徹底解説 1.6 イラスト制作ロゴ、名刺、アイコン、キャラクターなどのデザインをする仕事です。クライアントからコンセプトや完成イメージの指示を受け、デザインをしていきます。LINEスタンプやキャラクターデザイン、図解やTwitterのアイコンなど、様々な分野でイラストが必要とされており、今後もニーズは拡大していくでしょう。初心者でスキルやセンスがない場合、案件が獲得できず1ヶ月の売り上げが数千円で終わってしまうことも多いでしょう。スキルがあっても案件が単発で終わってしまうことも多いため、常に営業・集客をしていかなければ継続して収益を上げることは難しいのではないでしょうか。向いている人自分のデザインスキルやセンスに自信がある人趣味として絵を描いたりデザインすることが好きな人報酬体系 1案件数百円〜数千円とクライアントにより稼げる金額は幅広い企業向け案件の場合単価が高くなるスキルさえあればすぐに稼ぐことができるが、1から始める場合やセンスがあまりないと感じる場合、収益発生までは数ヶ月〜1年以上かかるメリット案件が多数あるため、自分にあった案件を見つけやすいデメリット案件が獲得できるかどうかが各個人のスキルやセンスに左右されやすい良い品質で納品するために、専用のソフトウェアや機器を用意する等、初期投資にある程度の費用がかかる 1.7 ネットショップネット上に店舗を開き、商品を販売する仕事です。ネットショッピングの市場規模は年々拡大しており、将来性は高いといえます。参考：経済産業省　　電子商取引に関する市場調査の結果継続して売り上げをあげるためには、商品ラインナップや価格など、他の店舗と比べた優位性をアピールすることが必要になってきますが、大手と比べた場合、仕入れの面で不利になることも多いため、差別化をし選んでもらうショップにするためにはかなりの努力が必要です。全くの未経験から始めた場合、月5万というのはかなり高いハードルとなるでしょう。向いている人普段からネットショッピングをよく利用している人好きな商品ジャンルがある人 SNSのフォロワーがすでに多い人報酬体系商品の売り上げから仕入れにかかった費用を差し引いた分が利益となる安く仕入れることができる先を確保できていれば、利益を出しやすい商品がすぐに売れるとは限らないため、最低3ヶ月は売り上げが入ってこない可能性があるメリット実店舗と異なり、人件費を極力抑えて物品の販売をすることができるプログラミングの知識がなくても店舗ページを開くことができるプラットフォームも充実しているハンドメイド作品を販売し固定のファンを獲得することができれば継続した売り上げを見込めるデメリット数ある他のショップと差別化をすることが難しく、SNSなども使って集客を行わなければ売り上げが見込めない 1.8 カスタマーサポート企業へのお客様からの問い合わせに対して、メールやチャット、電話で対応をする仕事です。稼働時間の確保さえできれば、安定した金額を毎月稼ぐことができるといえるでしょう。向いている人丁寧な顧客対応が求められるため、飲食店などの接客業やコールセンターでの勤務経験がある人報酬体系時給制となることが多く、1時間あたり1,000円〜1,500円が相場働いた分だけ稼げるので、比較的早く収入を得ることができるメリットマニュアルに沿って対応をする形になるため、特別なスキルがなくても始めることができるデメリット契約上毎週一定時間働くことが求められるクレーム対応をする場合、ストレスが溜まりやすい 1.9 データ入力・文字起こしエクセルやワードにデータを入力したり、動画や音声の内容を聞き会話内容を文字にして書き起こす仕事です。企業内で使用する顧客リスト作成やプレゼン資料の作成、YouTubeの字幕作成といった作業があります。 1件あたりの単価が低いため月5万を稼ごうとすると、相当な時間を費やす必要が出てきます。初心者でも手が出しやすい分、スキルアップが案件の獲得や単価アップに繋がりにくいため、副業として取り組む場合一定金額で頭打ちとなる可能性が高いです。月5万稼ぐのはなかなか難しいといえるでしょう。向いている人淡々と作業をするのが好きな人タイピングのスピードに自信のある人事務職での勤務経験がある人報酬体系 1件あたり数百円〜数千円クラウドソーシングサイトでよく用いられる「タスク形式」の場合、1件入力するごとに数十円入力件数や文字数が多くなればなるほど、稼げる金額は増える作業をした分だけ収益に反映するため、比較的早く収入を得ることができるメリット特別なスキルが不要で、仕事を始めるハードルが低いデメリット 1件あたりの単価が低く、時給換算した収入が少なくなりやすい 1.10 コンサルティング自分が詳しい専門の分野で顧客の相談や指導をする仕事です。主な業務としてはクライアントの悩みを解決することになります。人の数だけ悩みがあると言われますので、需要は無くならない仕事だといえます。コンサルタントとしての実力があればリピーターを獲得できるため、月5万円を稼ぐことは容易です。しかし、スキルに自信がない場合や中途半端なスキルしか持っていない場合、顧客獲得に苦労する可能性が高いため、安定して稼ぐことは難しいでしょう。向いている人既に本業を通じて専門的な知見を持っている人結果にコミットするプロ意識の高い人報酬体系相談時間やコンサルティング後の業績など結果に対して、自身で設定した報酬を受け取るメリット初期費用が不要で、今までの経験や知識を生かすことができる単価が高い可能性があるデメリット本業を通じた人脈形成やSNS・ブログなどを用いた集客、ブランディングができなければ案件が獲得できない 1.11 Webマーケティング Webサービスを用いて企業の業務支援や売り上げアップのコンサルティングをする仕事です。SNSの運用代行や広告・メルマガ配信代行、SEO対策などがメインの業務となります。実力次第で稼げる金額が変わるため、人によって月5万円を稼ぐ難易度は異なりますが、これからWebマーケティングの勉強を始める人にとってはかなりハードルが高いといえるでしょう。向いている人自身でブログを運営し集客に成功している人本業でWeb広告営業に携わっている人本業でWebマーケティングに携わっている人報酬体系クライアントとの契約条件により異なる一般的には成果報酬・月額支払い・一括支払いのいずれかで契約するメリット Webサービスを使って稼ぐスキルを磨くことができるデメリット基本的に結果にコミットできる実力が必要となるため、案件を獲得するまでのハードルが高い 1.12 動画編集あらかじめ撮影された動画を見やすくするために、カット作業やテロップ挿入をする仕事です。企業のプロモーション動画やYouTube、ウェディングムービーなど様々な分野で動画編集のニーズは高まっています。高いスキルは必要とされないため、月5万円程度であれば比較的短期間で稼げる可能性は高いです。ただし、その分ライバルも多く今後案件が獲得しづらくなる可能性は高いでしょう。向いている人細かい作業をするのが苦にならない人報酬体系 1件あたり5,000円〜数万円で、企業向け案件の場合単価が高くなるクラウドソーシングサイトでの募集が多いため、即収入につながりやすいメリット自分自身でYouTubeやプレゼン動画を作る際に身につけたスキルが応用できる一定レベルのスキル取得までにプログラミングなどと比べて時間がかからないデメリット動画制作をするためのパソコンやソフトウェアに初期投資が必要 1.13 広告動画制作映像・写真・イラストといった素材を加工・効果付けをして動画を作る仕事です。動画クリエイターと言われることもあります。企業向けの動画広告作成については市場が拡大しており、将来性がある分野となっています。参考：サイバーエージェント　2020年国内動画広告の市場調査動画制作の経験があれば、広告運用等も合わせて依頼されることもあるため、1件あたりの単価も高くなりやすく、月5万円は達成可能といえます。ただし、スキルがない状態では案件獲得が難しく収益化しづらいでしょう。向いている人動画制作に携わったことがある人動画編集で一定の売り上げを上げている人報酬体系 1件あたり数万円〜数十万円企業向けの案件については単価が高い傾向にあるメリット汎用性の高い、本格的な動画制作のスキルを身につけることができるデメリット動画制作をするためのパソコンやソフトウェアに初期投資が必要スキルを身につけるまでに時間がかかる 1.14 写真撮影写真販売は、自分で撮影した写真を、ネットショップやストックフォトサービスで売って収入を得る仕事です。プロのカメラマンであれば別ですが、素人が副業として行う場合、売れ行きの良い写真を狙って撮るのはかなり難しく、安定的な収入を得ることは期待できないでしょう。向いている人カメラが趣味の人日頃からよく写真を撮る人報酬体系 1枚数百円〜数千円で販売するのが一般的ストックフォトサービスを使うと、販売価格から40～60％ほどの手数料が差し引かれるメリット趣味を仕事にできる始めるためのコストがほとんどかからないデメリット売れる写真を撮るためには専門的な学習とセンスが必要とされる 1.15 ナレーション企業の広告やアプリゲームに使用されるナレーションを提供する仕事です。 1件あたりの単価が低いだけではなく、募集されている案件の数も多いとはいえないため、月5万円を稼ぐことはなかなか難しいでしょう。向いている人声に自信がある人声優系の学校に通っていた、声優の仕事経験がある人報酬体系 1件あたり数百円〜数千円主にクラウドソーシングサイトやスキル販売サイトで募集しているメリット趣味を仕事にできるデメリット 1件あたりの単価が低い編集や録音をするための機材などの初期投資が必要 1.16 オンラインの家庭教師英語やダイエット、ビジネスなど自分の得意なことをオンラインで教える仕事です。副業として行う場合使える時間が限られてきますので、時間単価を上げることが必須になります。スキルがあれば時間あたりの単価を高く設定することも可能です。しかし、人気や実力がなければ顧客数に影響してしまうため、単価を上げることが容易ではなく、月5万まで稼ぐのは難しいといえます。また、参入障壁が低いのでライバルも多いでしょう。向いている人人に教えることが好きな人報酬体系スキル販売サイトで、1時間当たりの料金を設定し募集することが多い 1時間500円〜数千円程度メリット販売できるプラットフォームが多いデメリット時間を切り売りするのでスケジュール調整が難しい参入障壁が低くライバルが多い 1.17 Twitterの懸賞 Twitter懸賞とは、Twitterのアカウントを利用して応募できる懸賞・キャンペーンのことです。後日当選が発表される形式の懸賞の場合、フォロワー数やツイート・プロフィール内容に注意を払うことで当選確率を上げることができます。しかし通常の懸賞と同様、運の要素が強いため月5万を安定的に稼ぐことは期待できないでしょう。向いている人毎日Twitterを使っている人報酬体系 1回の抽選ごとに商品または現金が当たるメリット主催者が発信したツイートをリツイートするだけなので、ごく短時間で参加できるデメリット転用可能なスキルが全く身につかない見返りの有無が確率に左右される 1.18 フリマアプリフリマアプリで不用品を販売して収入を得る方法です。メルカリをはじめとするフリマアプリは多数リリースされており、ユーザー数も多いため、売るものがあれば即収入につながります。特にブランド品などは高く売れやすいため月5万円を稼ぐことは可能です。しかし、売るものがなくなった時点で出品ができませんので継続的に収入を得ることができないでしょう。向いている人自宅に物がたくさんある人報酬体系アプリを使用する場合、商品売上金額から、1商品販売するごとにかかる10％程度の手数料を差し引いた金額が収益となる即金性が高いメリット既に自宅にあるものを売るためコストがかからず収益を上げやすいデメリット一時的にしか稼ぐことができない転用可能なスキルが全く身につかない 1.19 せどり・転売ネットショップやリサイクルショップから安く商品を仕入れて、仕入れ額よりも高く販売することで差額を利益として得る仕事です。せどりには様々な方法があり、楽天ポイントを利用したり海外から輸入したりする方法などがあります。仕入れ商品のリサーチから梱包、販売まで全て一人で行うため仕組み化することができれば短時間で月5万円を稼ぐことはできます。ただし、価格差が取れる商品を見つけ出すまで時間がかかることも多く、競争相手も多いため、軌道に乗せるまでは時間がかかるでしょう。向いている人特定分野の商品に詳しい人流行に敏感な人報酬体系仕入額と販売価格の差が利益となる出品手数料や送料を考慮して価格設定をする必要があるメリット仕組みがシンプルな商売なので、安く仕入れることができれば特別なスキルがなくても始めることができるデメリットプラットフォームごとの転売規制によって売れる商品が変わる可能性があるブランド品の偽物販売に関わってしまうリスクがある 1.20 ポイントサイトサイト内の特定の広告をクリックして商品購入や会員登録をすることで、報酬を得ることができます。副収入がある男性会社員の22.3%の収入源は、「ポイント・アンケートサイト」で58.1%と最多となっており人気の仕事です。参考：新生銀行　2019年サラリーマンのお小遣い調査月5万円を稼ぐことは十分可能ですが、一度きりの案件も多いため継続して稼ぐことはできないでしょう。向いている人コツコツと単純作業に取り組める人様々な企業に個人情報を提供することに抵抗がない人報酬体系広告ごとに決められた達成条件を満たすと収益発生ポイントが貯まったら電子マネーや現金に交換可能なため即金性が高いメリットクレジットカード作成や口座開設などの高額案件に取り組めば、短期間で一定の金額を稼ぐことができる特別なスキルがなくても始めることができるデメリット誰でもできる仕事のためスキルが全く身につかない 2 在宅でできる副業のメリット・デメリット在宅でできる副業にはメリットだけではなくデメリットもあります。事前に理解しておくことで、自分に合った副業を見つけることができるでしょう。 2.1 メリット在宅でできる副業のメリットは3つあります。それぞれ詳しく説明します。 2.1.1 メリット1　仕事内容や付き合う人を選べる副業で稼ぐためには、自分自身の得意分野を生かして仕事をすることが重要です。苦手なことには時間をかけず、得意なことに集中することで限られた短い時間の中で成果を上げられます。会社で働く場合と異なり、取り組む仕事については自ら取捨選択する姿勢が大切です。また付き合う人を選ぶことができますので、人間関係で余計なストレスを抱えることも少なくて済みます。 2.1.2 メリット2　本業以外のスキルが身につく副業に取り組む過程で、本業以外の実用的なスキルを身につけることができます。副業にもよりますが、成果報酬として1件あたりの対価が設定されていることがほとんどのため、必然的にスキルを身につけることになります。対価をもらいながら学ぶことができますので、学習のアウトプットの場としても最適です。会社に頼らず自力で稼ぐ力を身につけたい、独立しても通用するスキルが欲しい、という人にとって副業は有効な手段となるでしょう。 2.1.3 メリット3　時間と場所に縛られず仕事ができるスマホやPCが1台あれば、基本的に時間や場所に関係なく作業ができます。通勤時間がないのは、精神的にも体力的にも楽だと感じる人は多いのではないでしょうか。また、通勤時間がなくなることで空いた時間やスキマ時間で作業を進めることもできるためより効率的に稼ぐことが可能です。 2.2 デメリット在宅でできる副業のデメリットは3つあります。 2.2.1 デメリット1　自己管理力が必要体調や納期管理、営業や案件の管理など基本的には全ての作業を一人で行う必要があります。無理をして体調を崩してしまったり、急なトラブルが発生して納期に間に合わないという事態が発生した場合、各方面に迷惑をかけることになります。基本的に余裕を持ってスケジュールを組み、仕事に取り組むことが重要です。 2.2.2 デメリット2　孤独感を感じることが多い仕事の性質上、一人で作業する時間が多いため、孤独感を感じることが多くなるでしょう。一人で作業をするのが苦手で、和気あいあいと仕事をしたい人にとっては厳しいかもしれません。 2.2.3 デメリット3　トラブルに巻き込まれる可能性がある仕事の選び方次第では、トラブルに巻き込まれてしまう可能性があります。副業はあくまで自己責任で行うため、万が一トラブルが発生した場合も自分自身で全て対処する必要があります。特に、「簡単・高収入」を謳った副業詐欺には注意しましょう。稼ぐどころか、高額な教材を買わされてしまったり、気付かない間に犯罪に加担してしまう可能性もあります。仕事を受ける場合には依頼先の情報や業務内容を慎重に確認し、問題ないか見極める力が必要です。 [PR] Webデザインで副業する学習方法を動画で公開中3 在宅でできる副業の選び方数ある副業の中でどの副業を選ぶのが良いのか、選び方についてまとめました。 3.1 目的に合わせて選ぶなぜ副業をするのか、副業に対して何を求めているのかを明確にして取り組むことで効率よく稼ぐことができます。以下のように目的に合わせて選ぶことが有効です。「短期間で一定金額を稼ぎたい」：即金性の高いもの「無理なく空いた時間を有効活用したい」：作業負担が少なく手軽にできるもの「本業で足りない生活費の確保」：1ヶ月に稼げる金額が明確なもの「将来の独立・起業のためスキルアップしたい」：汎用性の高いスキルが身につくもの 3.2 最初はリスクの小さい副業を選ぶ副業を始める際、元手がかからないものを選ぶことは重要です。特に本業と異なる分野の仕事に取り組む場合、自分にあった仕事かどうかはスタートしてみるまでわからないことが多いです。もし自分に合わないと判断した時に、コストをかけず始めていればすぐにやめて違う仕事をするという選択ができます。初期投資の額が大きいと、投資額を回収できなくなる可能性も高いです。稼ぐために始めた副業で収益を上げられなかったり、負債を抱えてしまったりすると、精神的な負担が大きくなり本業にも悪影響が出てしまいます。プログラマーやWeb制作、WebデザイナーといったIT系の副業であれば、いずれも初期費用を抑えて低コストで始めることができます。 3.3 自分スキルになるものはおすすめどの副業が良いか迷った時には、自分自身にスキルが身につく副業を選ぶのがおすすめです。時給で働く場合やスキルが身につかない副業を続けると、時間の切り売りをするばかりで、一時的には稼げるかもしれませんが、将来的な収入アップは望めません。副業でスキルアップができると、より高単価の案件を受注することで収入を上げていくことができます。また、副業に取り組む中で自分の可能性に気づき、本業での成果につながったり、転職をするきっかけとなったりすることもあります。スキルを身につけることができる副業としては、プログラマーやWeb制作、WebデザイナーといったIT系の副業がおすすめです。今後も需要が高い分野ですので、一度スキルを身につければ再現性高く稼ぐことができるでしょう。コラム実は私も！？独学で損する人の特徴「スクールは高いから独学で成功する」という気持ちの方は多いと思います。

副業・フリーランス

トレンドを知っておこう！Javaのフレームワークまとめ【初心者向け】現役エンジニアが紹介

Javaのフレームワークについて、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。目次フレームワークとはフレームワークを使うメリットとデメリットおすすめフレームワーク10選人気のあるフレームワークを試してみよう執筆してくれたメンターそもそもJavaについてよく分からないという方は、Javaとは何なのか解説した記事を読むとさらに理解が深まります。田島悠介ここではJavaの便利なフレームワークをいくつか紹介しよう。大石ゆかり田島メンター！フレームワークというのは何ですか～？田島悠介アプリケーションなどの開発に必要な枠組みのことを言うんだ。紹介の前に、まずはフレームワークそのものの性質について説明しよう。大石ゆかりお願いします！フレームワークとはフレームワークとは、システム開発を行う上で開発効率を高めてくれる便利な仕組みです。プログラミングを行う上で直面するのは、システム開発の効率をいかに高めるかです。開発の効率が悪くなる大きな原因として、システム開発する人や開発する案件ごとに、システムの設計や実装方法が大きく変わります。場合によっては、必要以上の不具合や開発速度の遅れを生み出します。必要以上の不具合や開発速度の遅れという問題を解決する手法としてフレームワークを使用するという方法があります。フレームワークのメリットフレームワークを使用する事で次のような効果があります。チーム内で共通認識として理解しやすい基本設計を使用する事が可能データベースとプログラムとのやり取りを簡素化する事が可能よく使用する機能をあらかじめフレームワークで用意しておき、関数を呼び出すだけで実装が可能フレームワークがエラー箇所をわかりやすく教えてくれる事で不具合の解決が可能結果的に、エラーの解決や美しい設計が可能となり、開発効率が高まるというメリットを享受できます。 [PR] Webデザインで副業する学習方法を動画で公開中フレームワークのデメリットフレームワークを使用する事でデメリットも存在します。チーム内でフレームワークを使用することは、フレームワークの使用方法について、チーム内全員が事前に学習しておく必要がでてきます。効率化を手に入れる代償として、学習が必要ですが、システム開発後に不具合が発生することを考えると、フレームワークを学習しても良いかもしれません。田島悠介フレームワークについての概要になるよ。大石ゆかり使うフレームワークについてしっかり理解しておけば、開発において心強い味方になるということですね。田島悠介それではJavaのフレームワークを見ていこうか。今回解説するのは「Java EE」と「Play Framework」と「Spring Framework」だね。コラム実は私も！？独学で損する人の特徴「スクールは高いから独学で成功する」という気持ちの方は多いと思います。もちろんその方が金額は低く抑えられるでしょう。ただ独学には向き不向きがあり、実はスクールが向いている人も大勢います。そんな方のために参考として、テックアカデミー卒業生がスクールを選んだ理由をご紹介します。

Java

【2019年最新】徹底比較！PHPの人気フレームワークまとめ

PHPは、Webシステムのためのプログラミング言語として登場し、現在も多くのサービスを生み出しています。そして、Webサービスを使う上で多用されているのがフレームワークです。今回はそんなPHPでの開発を支えている、人気のフレームワークを紹介しています。フレームワークごとに特徴が違うので、比較する上での情報として参考にしてみてください。個人的には、世の中にある全てのPHPフレームワークを紹介したいのですが、今回は実務で利用されているかどうかも含め、案件で利用される実績の高さも踏まえて、厳選してご紹介します。なお本記事は、TechAcademyのPHPオンライン講座の内容をもとにしています。フレームワークとは言葉の通り「骨組み」を表します。画面の表示やデータベースへの登録といった、どのシステム開発でも必要な機能を、ある一定のルールに沿って開発が可能となるように、標準化したものをフレームワークと呼びます。フレームワークを利用することで開発者は効率的に開発を行うことができます。また、プログラムの品質を均一化という面からもフレームワークの役割は大きく、システム開発を行う上でフレームワークの知識と経験は必須となっています。 Laravel（ララベル）とはメリット 2015年にバージョン5がリリース！今最も『旬な』フレームワーク Laravel自体は2011年から開発が開始されていますが、日本で本格的に注目を集めるようになったのは、欧米で「2014年における最も有望なPHPフレームワークの1つ」として紹介された2013年12月ごろです。実際にPHPの開発案件としてLaravelが出てくるようになったのは2015年ごろからで、翌年には案件の問い合わせのうち何割かはLaravelの名まえが出てくるようになりました。まさに、今が『旬な』フレームワークと言えます。私も現在PHPでの開発を行う場合、Laravelを利用する案件が多いです。デメリット若干敷居が高いが、今後のフレームワークの主流になる可能性を秘めている他のフレームワークに比べると新規での開発が多く、運用されているサービスの改修案件は少なめです。しかし、最近はQiitaなどの技術的な記事も多くあげられるなどLaravelの学習環境が整ってきているため、これから本気でWebシステムの業界を目指す人にはまさにお勧めのフレームワークと言えます。 Laravelの公式サイト [PR] Webデザインで副業する学習方法を動画で公開中CakePHP（ケイクピーエイチピー）とはメリット 2015年にメジャーバージョンアップを遂げ3系が登場。実績と将来性のあるフレームワーク CakePHPは2005年から存在するPHPフレームワークの大御所です。2011年にバージョンが2系になり、以降、マイナーバージョンは上がっていますが現在も2系が主流です。しかし、2015年には3系がリリースされ、特にデータベース周りの機能が大幅に強化されています。2.4からプラグインとして追加できたmigrations機能が標準装備され、DB構造をソース管理できるようになりました。DB構造を簡単に管理、更新できるようになったことで、チーム開発の選択肢としてCakePHP3は有力です。デメリット一部クライアントによっては敬遠される CakePHPは歴史がある分、いい印象を持っていないクライアントもいます。原因のほとんどはCakePHP自身ではなく実装者個人の問題ですが、CakePHPで作られたシステムは品質が悪い（信頼できない）ということでNGが出る場合もあります。「よく知らなくてもある程度のものができてしまう」というフレームワークの負の遺産をCakePHPは背負っているとも言えます。 CakePHPの公式サイト FuelPHP（フューエルピーエイチピー）とはメリット処理速度を重視した、小規模案件向けフレームワーク FuelPHPは、「シンプルでフレキシブル」をテーマに、小規模案件向けのフレームワークです。高速な処理をテーマに掲げ、オートローダー機能により必要なクラスだけを読み込む仕組みとなっています。開発自体の速度も重視しているのか、設定を重視しているため規約が少なく、開発者がフレームワーク独自の書き方に戸惑わないように配慮されています。デメリット中規模案件に使用するにはプラグインやパッケージの別途インストールが必要例えば、FuelPHP自体はユニットテストを想定して作られていますが、実施するために必要なPHPUnitはインストールが別途必要となります。 FuelPHP自体が高速処理ということで余分な機能を初期機能から除いているため、案件の規模が大きくなってくると他のフレームワークに比べプラグインやパッケージのインストールが必要となります。利用者が少なめ他のフレームワークに比べ、FuelPHPは国内のシェアは多くありません。 FuelPHPを用いた開発を専門に扱うのでなければ、他のフレームワークを先に習得したほうがいいでしょう。 FuelPHPの公式サイトコラム実は私も！？独学で損する人の特徴「スクールは高いから独学で成功する」という気持ちの方は多いと思います。もちろんその方が金額は低く抑えられるでしょう。ただ独学には向き不向きがあり、実はスクールが向いている人も大勢います。そんな方のために参考として、テックアカデミー卒業生がスクールを選んだ理由をご紹介します。

PHP

デザインを実装する上で知っておきたい！9つの原理とは

本稿は、Smashing magazineのブログ記事を了解を得て日本語翻訳し掲載した記事になります。本記事は、UXディレクターでありデザイン本の執筆もしているTom Greever氏によって投稿されました。先日、クライアントに向けたHTMLとCSSを使用してデザインを実装するための方法についての講習会で指導を行っていました。そこでは、スタイルガイド駆動開発やOOCSS・SMACSSのような取り組み方、及びモジュール設計などの工程についての議論も行われました。最終日近く、ある人に「でも、どうやってそれが正しく行われていると判断したらいいんでしょうか？」という質問を受けました。最初、私は混乱していました。それまで私は「正しく行う」ことだけを説明していましたが、その質問が何が主格の選択肢であるかを評価するためのより深いニーズに根ざしているのに気付きました。例えば「他と共同して動作するクラスの数は最小限にする」というような特定のアドバイスは、モジュール性に関する幅広い認識がなければ役に立たないのです。私たちの仕事がきちんとできているかを本当に知るために、デザイン実装の目安として使えるより高いレベルの原則が必要であると気付きました。この溝を埋めるため、デザイン実装に関する9つの原則をまとめています。 CSSやコードを吟味するときの他にチームに志願している人への面接を行うときでも、これらの原理は特定の技術やデザインを実装する一般的な手段を超越した骨組みとして利用することができます。 1.構造化文書はスタイルシート適用の有無に関わらず、意味があり論理的に書かれている。 2.効率的デザイン実装に使われているマークアップとアセットは最小限である。 3.標準化共通の規定があり、自由に使うことができる。 4.抽象化ベースとなる要素は特定のコンテキストから切り離され、中心となるフレームワークを形成している。 5.モジュール化共通して使える要素は、再利用ができるように分割されている。 6.設定が可能ベースとなる要素を、任意のパラメータでカスタマイズできる。 7.拡張が可能コードは簡単に拡張することができ、今後も追加されることが見込まれている。 8.文書化されているすべての要素は、それを使用して拡張できるように他の人に説明されている。 9.正確である最終的なアウトプットは、予定された通りのデザインとして適切な表現がされている。プロジェクトに各原則がどのように適用するかを確認するため、この記事の基準として私のプロジェクトのひとつのモックアップを使用します。これは既存のECサイト中の、デイリーディールを宣伝する特別なランディングページです。スタイルの一部は既存のサイトから継承されますが、ほとんどの要素は新しいものであるということに注意してください。上記の原則を使って、この静止画像からHTMLとCSSを生成してみましょう。この製品の「カード」レイアウトは、新しい要素です。 1.構造化文書はスタイルシート適用の有無に関わらず、意味があり論理的に書かれている。ここでの原則は、ドキュメント(HTML)の内容がスタイル(CSS)がなくても意味を持つということです。正しい見出しレベル(heading)や順序なしリスト(ul)などを設定し、<header>や<article>といった意味のあるタグを利用するということでもあります。 aria-labelやalt属性、その他のアクセシビリティに必要な可能性があるものをきちんと使用しましょう。見た目的に変わらないアンカータグとボタンのどちらを使うかということは、大したことには思えないかもしれません。ですが視覚的に同じであっても、これらは違う意味を伝え違う動作を行います。セマンティックマークアップはその意味を検索エンジンや補助技術に伝え、他デバイスにおいての再利用もやりやすくします。それはプロジェクトの将来性に繋がります。よく構造化された文書を作成するということは、セマンティックHTMLを書くことを学び、W3Cによる標準や他の専門家のベストプラクティスを習慣づけ、自分のコードが分かりやすくなるように時間をかけることです。スタイルシートなしでブラウザで確認するのが、一番シンプルなHTMLのテスト方法になります。そのHTMLはCSSがなくても使うことができるか階層構造が一目で分かるかどうか HTML自体で意味を伝えることができるかしっかりした構造をもつ文書を作成するにはHTMLから始めるのがよいでしょう。ビジュアル的なスタイルを考える前に、構造とそれぞれの意味のためにプレーンなHTMLを書きます。divは避け、妥当なタグを考えます。この基本的なステップが、適切な構造を作るために役立つでしょう。 <section> <header> <h2>Daily Deals</h2> <strong>Sort</strong> <span class="caret"></span> <ul> <li><a href="#">by ending time</a></li> <li><a href="#">by price</a></li> <li><a href="#">by popularity</a></li> </ul> <hr />

Webデザイン

中学生でプログラミングを学ぶメリットとは〜おすすめの言語・教材・教室を紹介〜

ここでは、中学生のプログラミング必修化について解説します。プログラミング必修化のメリットなどについて触れたうえで、今後の社会の変化を把握しておきましょう。目次中学生でプログラミングが必修化中学生からプログラミングを学ぶメリット中学生が学ぶべきプログラミング言語 3選中学生がプログラミングを学ぶ方法 ①書籍で独学中学生がプログラミングを学ぶ方法 ②オンライン教材で独学中学生がプログラミングを学ぶ方法 ③プログラミングスクールで学ぶ中学生がプログラミングを学ぶ時のポイント／注意点まとめ中学校でプログラミングが必修化 2021年度から中学校でもプログラミング教育が必修化されます。中学校では、技術・家庭科（技術分野）においてプログラミング、情報セキュリティに関する内容を充実させ、次のような内容について学びます。計測・制御のプログラミングネットワークを利用した双方向性のあるコンテンツのプログラミング ※双方向性とは何かしらの働きかけ(入力)によって、応答(出力)する機能のこと中学校におけるプログラミング教育の目的中学校におけるプログラミング教育の目的は「社会におけるコンピュータの役割や影響を理解するとともに、簡単なプログラムを作成できるようにすること」です。さらには、来たる第四次産業革命や更なるグローバル化に対応する人材を育てるためでもあります。日本ではすでにエンジニアが不足していますが、さらに深刻化することが予想されており、経済産業省の発表では2016年時点で約17万人、2030年には最大約79万人ものエンジニアが不足するとされています。そのような背景もあり、IT人材を育成するためには小学生や中学生といった早い段階でのプログラミングスキルの向上が必要不可欠なんです。中学校プログラミング教育のポイント「全面実施」とは新学習指導要領によると、中学校でのプログラミング教育は2021年度から「全面実施」となっています。全面実施とは、2021年度に中2、中3の子ども達は中学校を卒業するまでに、新しい学習指導要領ですべてを学んでおかなければならないということです。つまり、本来なら3年かけて学ぶ内容を1、2年で学ぶことになりかねないので、事前の準備が重要となります。 [PR] Webデザインで副業する学習方法を動画で公開中中学生からプログラミングを学ぶメリット中学校でプログラミング教育が必修化する際に「中学生がプログラミングを学ぶ具体的なメリットって何？」という声が少なからず聞かれます。言うまでもなく、プログラミングを若いうちから学ぶことにはたくさんのメリットがあります。思考面においては、プログラミング学習で身に付くプログラミング的思考（論理的思考）によって、IT分野だけでなく日常生活でとても役に立ちます。さらに、中学生という早い段階でプログラミングを学ぶことで将来性がグッと広がり、人生の中で多くの選択肢を獲得するきっかけになるんです。それでは中学生がプログラミングを学ぶ6つのメリットを詳しくみていきましょう！ 1．論理的思考力が身に付く論理的思考力とは、自分が意図する活動を実現するためにはどうすべきか順序立てて考える力のことです。問題や課題を解決するときには論理的思考力がとても役に立ちます！そんな大人になる過程でも、社会人になっても必要となる論理的思考力は、プログラミングを学ぶことで身につけることができます。というのも、プログラミングはコンピューターに任意の動きをさせるために細かな指示をする必要があります。さらに、正しい指示でなければ思った動きをしてくれないため、プログラミングではよくエラーが起こります。そのためプログラミングを学習していると、問題解決のための論理的思考力も自然と身に付いてくるのです。 2．想像力が身に付くプログラミングは、自分が作りたいものを完成させるために頭の中で何度もイメージを繰り返す必要があります。そうやって脳内でイメージを繰り返していくうちに想像力が身に付きます。想像力が身に付くと、視野が広くなる思ったものを形にできる見えない部分を理解することができるといった更なるメリットを得ることができます。これらは子ども達が将来を生き抜く上で役立つ力になることでしょう。 3．身近なものの仕組みがわかるプログラミングを学習することで身近なものの仕組みが分かるようになってきます。現代の日本ではプログラミングによって作られたものやサービスが身近にあふれています。具体的には、ゲームソフトスマホアプリ WEBサイトなど。これらはすべてプログラミングによって作られています。身近なものの仕組みが分かることで、今までとはものの見方が変わり、異なる視点から物事を考えられるようになります。さらには、知的好奇心が刺激されこれまで以上にIT分野に興味を持つきっかけにもなるのです。 4．将来、仕事に困らない前章でもお伝えしたように、日本では今後IT企業が増加することに付随して更なるIT人材不足が予想されています。そのため、プログラミングができるだけで数多くの企業から就職先を選ぶことができるようになり、仕事に困ることはないと言えます。また20代前半のITエンジニアの平均年収は約340万円と、同年代の平均年収である約248万円を大きく上回っていることからも、プログラミングの将来性が高いことがうかがえます。 5．働く場所を自由に選べるプログラミングはパソコンと通信環境さえ揃えば作業をすることができるため、在宅で仕事をすることも容易です。つまり地方に住んで自然豊かな環境にいながら仕事をすることもできますし、さらにはプログラミングで使用する言語は全世界で共通なので、プログラミングスキルさえあれば海外を拠点に働くこともできます。また日本はIT先進国とは言えないため、若い内からプログラミングを学んでいるうちに「北欧などのIT先進国で最先端の開発をしてみたい」という選択肢もでてきます。これは余談ですが、IT留学などで最先端の現場を経験したことがある人は、海外で働くことを強く意識する傾向にあります。 6．働き方の幅が広がるプログラミングはパソコン1台と通信環境さえあればどこでもできるため、起業にも最適なジャンルといえます。また、ITは今後さらに生活に密着していくことになるため、ビジネスチャンスが多いことも起業におすすめの理由です。それだけでなく、自分で会社を立ち上げなくてもクラウドソーシング（企業や個人からの業務委託）などを活用することで、フリーランスとして働くこともできます。このように、会社員以外にもたくさんの選択肢が広がるのはプログラミングを学んでいる人の強みとなるでしょう。中学生が学ぶべきプログラミング言語 3選この章では、中学生が学ぶべきおすすめの言語をご紹介していきます。中学生が学ぶべき言語の特徴としては、「成果が見えやすく、学習が続けやすいもの」です。というのも若いうちは成功体験が少ないため、プログラミングで成果が視覚化できるとよりやる気が出て更なるレベルアップが期待できるため。そのため「フロントエンド」という、現在表示されているWEBページのデザインボタンにカーソルを合わせた時の色の変化などといったユーザーの目に映る部分の開発ができる言語がおすすめです。具体的なおすすめの言語は以下の通り。 1）HTML/CSS HTMLやCSSは、WEBページを構成するプログラミング言語。 HTMLはそもそもWEBページを作成するために開発された言語で、現在インターネット上で公開されているほとんどのページがこのHTMLで作られているんです。 CSSはWEBページのデザインやスタイルの部分を指定することができる言語で、HTMLと組み合わせることで、WEBページ色やサイズなどを自分の思い通りに作成することができます。以上のような特徴があるので、自分でホームページやWEBサイトを一から作りたい方にとくにおすすめですよ。 2）JavaScript JavaScriptは現代社会のありとあらゆる場所に使われているプログラミング言語。身近な例を挙げると、動くWEBページやアニメーションスマホアプリカウントダウンなどの非同期通信（ページを再読み込みせずにリアルタイム更新）といったことに使われているんです。このようにJavaScriptは幅広い使われ方をしているので、WEBサイトやWEBアプリ全般を学びたい方にぴったりの言語ですよ。 3）PHP PHPはWEBサイトの開設やアプリの開発などに使用されていプログラミング言語。アクセスした日時や人によって表示内容が変わる、いわゆる動的なWEBアプリを作ることが最適で、オンラインショップ広告の配信システム SNS（FacebookもPHPで作られている）といったさまざまな用途で使われています。また環境設定が比較的簡単で、基本的な文法さえ覚えてしまえばある程度使えるようになるため、初心者の方でも勉強しやすい言語ですよ。コラム実は私も！？独学で損する人の特徴「スクールは高いから独学で成功する」という気持ちの方は多いと思います。もちろんその方が金額は低く抑えられるでしょう。ただ独学には向き不向きがあり、実はスクールが向いている人も大勢います。そんな方のために参考として、テックアカデミー卒業生がスクールを選んだ理由

子ども向けプログラミング

スマホ対応！CSSでメディアクエリの書き方【初心者向け】現役エンジニアが解説

今回はBootstrapなどを使わずにレスポンシブページを実現する方法であるメディアクエリについて説明します。 Webサイトを作る上でスマホ対応は当たり前になってきています。メディアクエリとはメディアタイプやメディア特性によって表示を変えるレスポンシブデザインで利用する設定です。レスポンシブデザインではスマホやタブレットやPCによって変わるメディアタイプやメディア特性に応じた最適な表示にするデザインを言います。メディアクエリを理解することはレスポンシブデザインへの理解へとつながる基礎的な部分になります。メディアクエリを理解することで、Web制作において様々な端末で最適な表示を可能にできます。これからWebサイトを作る上では必ず必要になる知識なので、ぜひ今のうちに習得しましょう。目次動画で学ぶ！メディアクエリとはメディアクエリとは Web制作で推奨されているメディアタイプメディア特性メディアクエリの書き方複雑なメディアクエリの組み合わせを実現する方法実際に書いてみよう田島悠介今回はメディアクエリを利用する方法を解説しよう。大石ゆかり田島メンター！！メディアクエリというのは何ですか〜？田島悠介スクリーンや印刷などのメディアタイプに加えて、さらに縦横の長さなどによるスタイルの適用範囲を決めることができるものなんだ。大石ゆかりなるほど、いろいろな条件に対応して見え方を変えるという感じでしょうか？よろしくお願いします！動画で学ぶ！メディアクエリとは今回の記事の内容は動画でもご覧いただけます。テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。 [PR] Webデザインで副業する学習方法を動画で公開中メディアクエリとは今や、Webページを閲覧する際にレスポンシブデザインであることは当たり前になりつつあります。メディアクエリはCSSを用いて、レスポンシブなWebページを作ることができます。 CSS3になってから登場した新しい表現なのでぜひ習得していきましょう。メディアタイプの種類メディアタイプ対応デバイス all すべてのデバイス braille 点字用ディスプレイ embossed 点字用プリンター handheld モバイルデバイス print プリンター projection プロジェクター screen ディスプレイ speech 音声出力デバイス tty 固定幅フォントで出力するデバイス tv テレビなお、メディアクエリ4からは、screen, print, speech, all を除くすべてのメディアタイプを非推奨に指定されています。 Web制作で推奨されているメディアタイプ Web制作で推奨されているメディアタイプは以下の4つです。 all screen print speech について詳しく解説していきます。 all すべてのメディアタイプに適用されます。コード例 @media all { p { color: green; } } 表示結果解説次のように@media allで宣言して{}内で指定のcssを記載すると適用されます。 allで適用すると結果的にすべてのメディアタイプで同じ処理になります。今回はcolor: white;で色が緑色になります。 screen ディスプレイが存在するメディアタイプに適用されます。 PC、スマホ、タブレットはscreenです。 screenの動作 See the Pen medis by マインクラフトゲームアプリプログラミング学校 (@programjp) on CodePen. 解説 screenのcolor:redという指定で文字が赤色で表示されています。 print 印刷用に適用されます。印刷プレビュー画面で確認できます。 print表示結果解説 screenのコードを印刷プレビューすると、青色になります。 speech 音声読み上げ機能の際に適用されます。今回は、次のコードで「メディアタイプによる、色、処理の変化」音声出力した場合、「、」の部分で空白時間が発生し、自然な語り口になります。 @media speech { p { speak: literal-punctuation; } } コラム実は私も！？独学で損する人の特徴「スクールは高いから独学で成功する」という気持ちの方は多いと思います。もちろんその方が金額は低く抑えられるでしょう。

CSS

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

CSSの軽量フレームワーク10選を現役エンジニアが解説【初心者向け】

目次

フレームワークとは

フレームワークを使うメリットとデメリット