自分でコードをかいてポートフォリオサイトを制作したいです。デザイン要素に優れており尚且つレスポンシブデザイン対応のポートフォリオサイトを自分でコードを書いて制作したいです。その際の、手順・やり方・必要なもの・有力ツールなど教えて欲しいです!(Gemini活用して基本的なことはAIに質問するつもりです。)

1件の回答

回答を書く

1167048

2026-03-29 18:35

+ フォロー

\u0026gt;Gemini活用して基本的なことはAIに質問するつもりです。



自分の理解のためにAIを使うのは良いのですが、AIに頼り過ぎると、何の勉強にもならないので注意して下さい。

(ググッても良いので)全くAIを使わずに書いてみて、書けない所は理解できて無いと言う事なので、必ず(ググッても良いので)全くAIを使わずに書いてみて、自分が理解できて無い部分をチェックして下さい。



\u0026gt;その際の、手順・やり方



とにかく地味にコツコツ勉強するしか無いので、地味にコツコツ勉強できないタイプの人は無理です。



Progate(有償)や参考書で勉強すれば良いでしょう。



HTMLが学べる学習本・書籍おすすめ14選

https://www.sejuku.net/blog/258353

※たまに勘違いしている人もいますが、「HTML、CSS」はプログラミング言語では有りません。



\u0026gt;必要なもの・有力ツールなど



【入門】:Visual Studio Code/フロントエンド開発環境の構築

https://rara.jp/sphinx1335/page24

※「プラグインの導入、設定」をしない場合は、「エディタ+α」程度なのでたいして使いやすく無いです。



\u0026gt;デザイン要素に優れており



Webデザイン参考書

https://rara.jp/sphinx1335/page5

※どうせなら2~3冊ぐらい買っても良いでしょう。

それは あくまでも基本なので、自分なりのにアレンジが必要(アレンジしすぎて使いにくくなってもダメ)



\u0026gt;レスポンシブデザイン対応のポートフォリオサイトを自分でコードを書いて制作したいです。



下記は、2016年発売のAndroid端末のdp解像度です。

つまり、px単位で指定したら、レスポンシブ・デザインは無理だと言う事を意味しています(ただし、@mediaはpx単位で指定)。

分かり易く言うと、モバイル(タブレット、スマホ)用ページでpx単位を使ったら、ベンダーに殴られます。



2016年発売Android端末のdp解像度まとめ

//nein37.hatenablog.com/entry/2017/01/03/200142

※↑スマホ縦画面表示の場合では、横サイズの解像度の範囲は「320px~540px」となる。

タブレット縦画面表示の場合では、横サイズの解像度の範囲は「400px~768px」となる。

タブレット横画面表示の場合では、横サイズの解像度の範囲は「768px~1280px」となる。

ただし、それは2016年発売のAndroid端末だけの話しなので、実際には、それよりも多くのバリエーションが存在すると言う事です。

なお、モバイル(タブレット、スマホ)の(dp)解像度の範囲は一般的には「約300px~約800px」と考えて良いです。

タブレットでは800px以上の(dp)解像度も有りますが、それは もうPC画面の領域と考えて良いです(プロの場合は例外も有るかもしれないですが)。

なお、PCでも8k解像度モニターが販売されており、一般的にはPCの場合は「約1000px~約3000px」解像度ぐらいには対応しないとSEO的にマイナスになります。

ただし、ベンダーはコスト削減のために、PC用ページに限りアマチュアを許容する場合も有りますが、それは解像度固定(通常、約1000px)のPC用ページを許容すると言う事を意味しています(当然、ベンダーは、それが高解像度に対応できない欠陥Webページだと分かっているし、SEO的にマイナスだと分かっている)。



レスポンシブ・デザイン。

現在は「PC画面、タブレット画面、スマホ画面」などの画面・解像度ごとにレイアウト構成を変えることが推奨されています(レスポンシブ・デザインと言う手法が推奨されている)。



レスポンシブ・デザインの注意点としては、HTMLタグを冗長化してはならないと言う事。

分かり安く言うと、基本的に、PC用のタグ、タブレット用のタグ、スマホ用のタグのように分けてはダメ(当然、部分的にでも分けてはダメ)。

趣味なら そこまで厳密に考え無くても良いですけど。



又、レスポンシブ・デザインは消費税レベルの計算できる\u0026quot;算数力\u0026quot;が必要です(趣味なら\u0026quot;算数力\u0026quot;が無くても良いですが)。

それは\u0026quot;数学力\u0026quot;とかでは無いので、中1レベルで余裕なのにも関わらず、なぜか非常に多くの人が挫折します。

2次方程式も、三角関数も、全く必要ないのにも関わらず、なぜか消費税レベルの計算ができない。



レスポンシブ・デザイン



//images.app.goo.gl/wszcfN6nhrZ8mVSy9

※3パターンの場合



//images.app.goo.gl/Wu8gBmoLJiyRK8Qn6

※3パターンの場合



コーダーとWebデザイナー

https://rara.jp/sphinx1335/page46



ただし、現在は多くの「ガチのWeb系ベンダー」でも、コスト削減のためにアマチュアでも許容する場合もあるようです(それは欠陥Webページでも許容される場合もあると言う事)。

なお、Web系ベンダーが(レスポンシブ・デザインなどで)ガチのフロントエンドの話しをする可能性も有り得るので、無知だと当然 Web系ベンダーの話しが意味不明になるので、知識としてぐらいはガチのフロントエンドを理解して置く事を推奨します。

クライアントに欠陥Webページがバレて、訴えられたら どうすんねん(当然、コーダーが全責任を取らされる契約になっているのだろうけど)。

うったえる有益だ(0シェアするブックマークする

関連質問

Copyright © 2026 AQ188.com All Rights Reserved.

博識 著作権所有