おすすめのWebデザイン＆プログラミングスクールを一部紹介！主要なスクール23校は『Webデザインスクールの一覧』でチェックしましょう。
ポートフォリオHTMLテンプレート（ベーシック）
シンプルでベーシックなポートフォリオサイト用のHTMLテンプレートです。挙動やソースはデモをご確認ください。
デモ
ダウンロード
テンプレートをご利用の際は、自分なりにカスタマイズをしてみてください。そのまま利用してしまうと採用担当の方は「あ、この人、手抜きしてるなぁ…」と思ってしまいます。
配色やレイアウト、フォントなどを変えて「自分のポートフォリオ」を作り込みましょう！カスタマイズ例は、僕のポートフォリオサイトを参考にしてください。
ねこポンのポートフォリオサイト
他の方の素敵なカスタマイズ例です。
acherie(アシェリ)
sakura noricoさん
紙のポートフォリオ制作については下記の記事で詳しく解説しています。
最強ポートフォリオの簡単な作り方
その他のポートフォリオHTMLテンプレート
ポートフォリオHTMLテンプレート（ガーリー）
テンプレートについて
- スマホ（レスポンシブ）対応済み
- Flexbox使用
- ヘッダー・コンテンツ・フッターの１カラム構造
- ナビゲーションはスクロール途中でヘッダー固定
- コンテンツは「WORKS」「FEATURE（最新の実績 or 1サイトを解説）」「ABOUT」「SKILL」「CONTACT」
- 「WORKS」では、スライド（Photoswipe）を使用
- 「WORKS」では、Lazyloadプラグイン（Lazysizes）を使用しています。作品画像がページのスクロールに応じて表示されます。サムネイルと作品画像は同じ画像（1600 x 1200pxと少々重い）を使うため、少しでも軽くするために、Lazyloadを導入しています。imgタグの「data-src=」に作品画像のパスを記載し、「src=」にplaceholder画像（data-srcの画像が表示される前に表示する仮の軽いダミー画像）のパスを指定します。placeholder画像はデフォルトでplaceholder4x3.pngを設定しているため、特に新たに画像を作成したり設定する必要はありません。もちろん、src用の画像にdata-srcで表示する作品画像の解像度を落とした荒く軽い画像を設定してもOKです。
無料で商用・非商用問わずお使いください。改変自由です。無許可の再配布・再販売は禁止します。本テンプレート使用によるいかなる損害についても、本サイトは責任を負わないものとします。
リンクとクレジットの表記は不要ですが、ご自身のツイッターやブログなど、このテンプレートをご紹介していただけると、とても嬉しいです＾＾
全体デザイン
コラム①：正社員のWebデザイナーを強くオススメする理由
このサイトでは、
本当にWebデザインのスキルを磨きたいなら、未経験の方はまずはWeb制作会社に正社員で入社すること
を強くオススメしています。
Webの最先端に触れられるWeb制作会社に入社し、スキルをガッツリ高めてほしいです。そして、社内では、やはり派遣でもなく、アルバイトでもなく、長く在籍する可能性のある正社員にこそ成長できるお仕事を振ってくれるのです。派遣やアルバイトは、リンク張り替えやテキスト修正など成長しづらい作業をやらされがちです……。
未経験OKで正社員のWebデザイナー・フロントエンドエンジニア案件を多く保有しているのが、IT系に強いワークポートです。Webに強いエージェントは他にもあるし、僕もいくつも登録していますが、ワークポートほど大量に求人案件を紹介してくれるエージェントを他に知りません笑。※現在はコロナの影響でワークポートですら未経験OKの求人が少ない状況です。ただ、少しでも選択肢を増やすために、また今後状況が改善されてきた時のために登録しておきましょう。
↑ワークポートさんに会ってきました！ねほりはほりと質問をぶつけています。ぜひ読んでみてください。
転職エージェントは複数登録しますが、ワークポートはそのうちのメインエージェントして必ず登録しましょう。
コラム②：Webデザイナーを強くオススメする理由
エンジニアになるのは本当に難しいです。
だからこそ、このサイトでは、Webデザイナーになることを強くオススメしています。
でも、もし、エンジニアになれれば、月収100万円以上も可能です。実際に僕の友人も軽く年収1000万円は超えています。
ほとんどの人がエンジニアにはなれないので、30〜40万円以上はする高額なプログラミングの学校に行くのはお金をドブに捨てる可能性があります。
どうしてもエンジニアになりたい方は、無料でプログラミングを学べるProEnginner開講の学校『プログラマカレッジ』に行きましょう。プログラマカレッジは、学校＆就職支援の一体型サービスです。ここは本当にありがたい存在です。ソーシャルゲーム大手企業で有給インターンまで可能です。
無料のプログラミング学校はもう一つ、『GEEK
JOB』があります。就職率97.8%と驚異的な数字を出しています！よりエンジニア色の強いカリキュラムを受けたい場合はこちらを受講します。
２校ともオススメです。無料見学をしてみて自分に合いそうな雰囲気の学校を選びましょう。
この２つの学校のどちらかに通って、自分にエンジニアとしての素質があるのかチェックしてください。もし、あなたに才能があったら、最高にラッキーな人生です。20代のみ対象です。もし20代ならこのチャンスをぜひつかんでください。
30歳以上の方は、『テックキャンプ エンジニア転職』
がオススメです。転職できなければ授業料全額返金してくれます。教室は9時〜22時まで開放し、教室あるいはオンラインでマンツーマンで無制限に質問ができます！超集中なら10週間、ゆったりなら6ヶ月と期間も生活に合わせて選べます。スクールは無数にありますが、有料系ではここが一番爆速に成長できそうです。
参考記事 : なぜ「エンジニア」ではなく「Webデザイナー」をすすめるのか
“ポートフォリオHTMLテンプレート（ベーシック）” への58件のフィードバック
Webデザインのご質問やサイトの感想など、お気軽にどうぞ！
管理人（ねこポン）について
週３日だけ会社で働く30代前半ウェブデザイナーです！
インテリ風＆仕事できる風を醸し出す腕前では右に出る者はいませんが、電話すら怖くて取れないし、無断欠勤してしまい自宅に警察が来たほどのコミュ症ポンコツ人間です。
現在Web業界5年目。事業会社とWeb制作会社のウェブデザイナーを経て、フリーランスになりました。
最近ちょこっと『月曜から夜ふかし』に出演しました↓
なんでもWebの質問受け付け中 (^o^) /♪
おすすめのWebデザインスクール一覧
| スクール名 | 料金 | 授業形式 | ジャンル | 就職支援 |
|---|---|---|---|---|
 求職者支援訓練 ハロートレーニング |
無料 （教材費のみ） |
通学 （約６ヶ月/週４〜５日） |
Webデザイン | ハローワークによるサポート |
 プロによる総評 |
||||
|
一番おすすめのスクールは国の運営する求職者支援訓練（ハロートレーニング）です。授業料が無料！しかも約６ヶ月という期間がWebデザインの基礎スキルを習得するのに十分な長さです。僕自身も求職者支援訓練を経てWebデザイナーになりました。 失業保険が受給できる方は職業訓練がおすすめです。期間が約３ヶ月と短くやや理解が浅くなる点は不安ですが、復習や独学で補えれば問題ありません。最近は数は２校ほどで少ないですが６ヶ月コースも登場しました！ 参考記事：【無料】職業訓練でWebデザインを学ぶ |
||||
| スクール名 | 料金 | 授業形式 | ジャンル | 就職支援 |
|---|---|---|---|---|
 LIG |
有料 （¥450,000 〜） |
通学 （６ヶ月） |
Webデザイン | 転職セミナーあり/LIGへの採用実績もあり |
| プロによる総評 |
||||
|
金銭的に余裕があればLIGを検討しましょう。超有名Web制作会社LIGによるWebデザインスクールです。現役のプロデザイナーが講師で、Mac＆デュアルディスプレイという最新設備で学べます！LIG運営のコワーキングスペースも無料で使い放題。生徒のレベルによってはLIGへの就職も可能です。 |
||||
| スクール名 | 料金 | 授業形式 | ジャンル | 就職支援 |
|---|---|---|---|---|
 CodeCamp デザインマスターコース |
有料 （¥148,000 〜） |
オンライン （２ヶ月〜） |
Webデザイン | キャリア支援あり （就職エージェントの紹介） |
| プロによる総評 |
||||
|
CodeCampはオンラインのWebデザインスクールです。低価格ながら講師から直接指導とフィードバックを受けられるのが最大の特長です！おすすめのコースは「デザインマスターコース」。コスパ重視で講師と対話しながら学びたい人に最適なスクールです。 |
||||
| スクール名 | 料金 | 授業形式 | ジャンル | 就職支援 |
|---|---|---|---|---|
 プログラマカレッジ |
無料 | 通学 | プログラミング | あり |
| プロによる総評 |
||||
|
『プログラマカレッジ』は20代限定の通学式で完全無料のプログラミングスクールです。無料なのでエンジニアになりたい方はぜひ挑戦してみてください。スクール側は就業先の企業からお金をもらうことで無料で運営をしています。とはいえ授業の質は高いと評判です。『プログラマカレッジ』の卒業生による体験談記事はこちらです。 |
||||
| スクール名 | 料金 | 授業形式 | ジャンル | 就職支援 |
|---|---|---|---|---|
 GEEK JOB |
無料 | 通学 | プログラミング | あり |
| プロによる総評 |
||||
|
上で紹介した『プログラマカレッジ』と同様の20代限定の通学式で完全無料のプログラミングスクールです。プログラマカレッジは決まった時間に通学しますが、GEEK JOBは個別指導なので自分のペースで通学できます。エンジニアになりたい方は、自分の生活スタイルに合わせてどちらのスクールに行くか検討してみましょう。就職率97.8%は驚異的です！ |
||||
Web制作会社を歩き回れるゲームを作ってみました！ぜひ探検してみてください。(注意：音が出ます！)
こちらの「ポートフォリオHTMLテンプレート（ベーシック）」使用させていただきました！
まだ、作成した成果物がなく、公開までは至ってないのですが、後々公開させていただくと思います。
こちらのテンプレートを変更しポートフォリオサイト作成した事をツイッターで呟かせていただきます。
だいじゅさん、ポートフォリオのテンプレートを使っていただきありがとうございます＾＾
はい、ぜひぜひツイートしてやってください。
作品たまっていくと良いですね〜
ねこポンさん！はじめまして！
ポートフォリオHTMLテンプレート（ベーシック）使用させていただきました！
11月からデザインの勉強を始めて、ポートフォリオサイトを公開まですることができました。
このポートフォリオを持って、転職活動に挑みたいと思います！
ありがとうございます！
ナヲフミさん、はじめまして！
こちらこそポートフォリオのテンプレートを素敵に使っていただき嬉しいです。ありがとうございます！
拝見しましたが、バナーのクオリティが高くて素晴らしいですね。これなら自信を持って転職活動ができますね^^
以前も日本デザインスクールの方の作品を見たことがありますが、いつもレベルが高いなぁと思っておりました。
可能であれば、ぜひポートフォリオをこのサイトで紹介させてください。
ナヲフミさんが良い会社に巡り会えるよう陰ながら応援しております。
ご返信ありがとうございます！
ご覧いただきありがとうございます！！
ねこポンさんのおかげで素敵なポートフォリオサイトを作ることができました。
紹介していただけるなんて光栄です、、！！ぜひ、自分のサイトでよければお願いします！
ねこポンさんに褒めていただき、自身がつきました！
頑張ります！ありがとうございます！
掲載の許可をありがとうございます！
Worksの各作品はそれぞれ個別ページに飛ぶように改良されていたりして、しっかりテンプレを活用してくださって嬉しいです。
自信を持って転職活動を楽しみながら頑張ってください^^
ねこポンさんお久しぶりです！
以前、ポートフォリオHTMLテンプレートの利用でコメントさせていただいたナヲフミと申します。
私事ですが、、
無事、web制作会社から内定をいただくことができました！！
とても良い会社に巡り会えました。
ねこポンさんの有益な記事やテンプレートを利用させていただいたおかげです！
改めて、ありがとうございます！
簡単にはなりますが、感謝の意を込めてご報告させてもらいます。
ナヲフミさん、内定おめでとうございます！！！
すごいですね！Web制作会社で、しかも良さそうな職場なんですね〜。本当によかったです＾＾テンプレとこのサイトが少しでもナヲフミさんの転職活動をアシストできて、すごく嬉しいです。
これからWebデザイナーとしての人生がスタートしますね。僕も平凡なスキルながらWebデザイナーですので、お仕事をする中で疑問や大変なこと等あれば、ぜひいつでもまた相談してくださいね。
ご報告ありがとうございました。デザインとコーディング、これからも楽しんでいきましょう！
こんにちは、初歩的な質問で申し訳ありません。
こちらのページのポートフォリオサイトを参考に自分のものを作ってみました。
そのあと、ドメインを取得してアップロードしたいのですがどのようにアップするのかがわかりません。参照サイトなどがございましたらお教えいただきたく存じます。
aiさん、こんにちは！
ポートフォリオテンプレートを使っていただき、ありがとうございます。
比較的かんたんな、ムームードメイン（ドメイン取得サイト）とロリポップ（レンタルサーバー）の組み合わせで解説している記事を探してみました。
★【ロリポップ×ムームードメイン】一番安く出来るブログ（サイト）の作り方
https://hitodeblog.com/wordpress-start2
僕のサイトではありませんが、、こちらの記事で契約方法と設定が詳しく解説されています。
ロリポップとムームードメインは同じ会社が運営しているので、連携がとってもラクです。
アップロードについては、Windowsであれば「FFFTP」などのFTPソフトを使ってアップロードします。細かい説明は下記の記事が参考になります。
★ロリポップをFFFTPで使った話
http://hyouban.click/web/ffftp-portable/
またアップロードについては、ロリポップのサイト上からアップロードする方法も一応あります。
★レンタルサーバー ロリポップ！FTPの使い方
https://webst8.com/blog/lolipop-ftp-howto/
ただ、この方法は大量のファイルをアップロードするには面倒なので、あまりプロの世界では一般的ではありません。
一旦、上記の記事を参考にしていただいて、またわからない箇所があれば随時こちらで質問をください。ポートフォリオサイトの設置、がんばってください＾＾
ねこポン様、ポートフォリオのベーシックテンプレートを使わせていただきました。テンプレートのみならず、こちらのサイトに掲載してくださっている多くのアドバイスがとても参考になりました。誰にも相談できなかったので本当に助かりました。（私の年齢をみてWebスクールの事務局は親身に対応しないようでしたし・・）
ねこポン様のおかげで、Web業界は未経験でありながら、ECコンサルティングの会社でWebディレクション担当として採用内定いただきました。私は現在41歳です。同年代の女性の方で、同じような境遇の方がおられましたら諦めずに活動してみて欲しいです。
本当にありがとうございました。感謝申し上げます。
れこぴんさん、はじめまして！
テンプレートを使っていただいてありがとうございます！
そして内定も本当に本当におめでとうございます＾＾！！
Webスクールがそんな対応の中で、折れることなく転職活動を成功させられて、、すごいことです。
ポートフォリオサイトを拝見しました。精力的に多くのサイトデザインを制作されたんですね。素敵なデザインでした。
おっしゃるとおり、同じ境遇の方にとって、このことはとても刺激になると思いますので、れこぴんさんのポートフォリオをこの記事内で紹介してもよろしいでしょうか…？？
ECコンサルの会社でディレクション、興味深いですね！これからお仕事楽しみですね〜
ねこポン様 ご返信くださりありがとうございます！
そしてポートフォリオをご覧くださりありがとうございます。
スクールを卒業後に集中してポートフォリオにするWEBサイトを3つ制作しました。デザインだけの方は、ねこポンさんのアドバイスを参考に急遽追加で制作しました次第です。
＞れこぴんさんのポートフォリオをこの記事内で紹介しても
はい、同じような境遇の方の励みになるのでしたらどうぞ！
ただ、名前（トップページとABOUT）と顔写真と連絡先の部分は恥ずかしいのでボカしていただけますでしょうか？
＞ECコンサルの会社でディレクション、興味深いですね！
ありがとうございます。仕事に慣れてきましたら、SEOやディレクションを担当していく中で、クライアントの売上にどれくらい貢献できるか手応えを感じてみたいところです。
ちなみに、雇用形態は私自身が望んでのアルバイト・パートです。（長時間オフィスに拘束されるライフスタイルが苦手になったため・・。 1日6時間正社員とか、週3or4正社員とかが流行する時代がこないかな・・）
テンプレートを参考にポートフォリオを公開しました！！少しづつ改良を重ねてオリジナリティのあるものにしていきたいと思います！
WORKS欄で「参考サイト」としてリンクを貼りました！
https://nakamura0736.github.io/portfolio/
中村さん、ポートフォリオのテンプレを使っていただき嬉しいです！いろんなアプリを作ってるんですね。はい、ぜひカスタマイズしてやってください〜。リンクもありがとうございます！
テンプレートを参考にポートフォリオ作成できました！
ありがとうございます！！
ぶくぶくちゃがまぐちさん、テンプレを活用していただいてありがとうございます！ご協力できてよかったです。
ポートフォリオのベーシックテンプレートを使わせていただきます。
完成したら公開させていただくと思います！
まろたさん、テンプレのご利用をありがとうございます！
いろいろ楽しみながらカスタマイズしてみてください＾＾
初めまして、質問させていただきます。こちらのテンプレートを使って自分のポートフォリオを作らせていただこうと思うのですが、cssをこちらのHTMLと一緒に打ちたいと思っておりまして、どうすればいいのでしょうか？cssはどこに書いてありますか？
ねこぽんさんのポートフォリオを拝見したところ、webとwebのファーストビュー があったのですが、ファーストビュー はどうして途切れているのでしょうか？？photoショップのwebページのサイズで作ったんですか？？
カモミールさん、はじまして。
>cssはどこに書いてありますか？
CSSは「css」フォルダの中のstyle.cssに書いてありますよ。そして、index.htmlのhead内で、style.cssを呼び出しています。このようにCSSを外部から呼び出す方法が一般的です。なので、cssはstyle.cssに記述します。
>ファーストビューはどうして途切れているのでしょうか？？
このサイトでは、ポートフォリオの作品数を少しでも増やすためにファーストビューのみのデザインを作ることを推奨しています。なので、僕のポートフォリオにもファーストビューのみのデザインを掲載しています。
ファーストビューのみの作品作りについてはこちらの記事を参考にしてください。
★ポートフォリオ作品がない方へ。作品を増やす方法を紹介！
https://webdesigner-go.com/portfolio/powerup/
ポートフォリオ作り、がんばってください＾＾
ありがとうございます。
ポートフォリオのテンプレート（ベーシック）を使用させていただきました。
ありがとうございます。
初めまして。私は現在プログラミングスクール通っている最中です。基礎学習の内（HTML、CSSあたり）は良かったのですが、サーバーサイドに入ったあたりで、カリキュラムについていけなくなり、現在は個人アプリケーション開発期間（期限1週間、相談禁止）なのですが、何がわからないかもわからない状態に陥っていました。
心折れかけていた時に偶然こちらのサイトを拝見し、気づけたことは、「エンジニアになるのは無理」ということです笑
元々求人広告の営業マンということもあってか、自分はすぐに形が見れて成果が実感出来るものじゃないと、モチベーションが保てないことに気づきました。
進むべき道が見えた気がします。まずは、WEBデザイナーあるいはマークアップエンジニアを目指したいと思います。
個人アプリケーション開発で、ポートフォリオテンプレート使用させて頂きました。（ポートフォリオとしてではなく、課題提出用としてリメイクさせて頂きました。）
イチからコードを作るより、既にあるものを真似る方が自分の学習スタイルにも合っているかも知れません。
色々参考になりました。ありがとうございました。
また訪問します。
SUKEさん、はじめまして。
ポートフォリオのテンプレを使っていただきありがとうございます！
>何がわからないかもわからない状態に陥っていました
これは本当によくわかります。。僕もプログラミングを勉強している時は、激しい混乱状態になるわ、ストレスもひどいし、すごくしんどかったです。しかも「相談禁止」ってそれかなりつらいですね。。
最初からエンジニアを目指すのはきついですよね。一度Webデザイナーやマークアップエンジニアを経由して、それでもどうしてもエンジニアになりたければ、その時に目指すのが良いと思っています。
たしかにコーディングはすぐに形にできて成果が見えやすいですよね。おっしゃるとおり、モチベーションは維持しやすいと思います。今回、Webデザイナーという選択肢が見つかって本当によかったです！
コーディングやデザインの勉強、楽しくがんばってください＾＾
ねこポンさん、はじめまして。
ポートフォリオのテンプレート（ベーシック）を使用させていただいております。
ご質問なのですが、作ったサイトの全体のスクリーンショットを撮る際にtopページ（？）部分が伸びてしまいうまく撮ることができないです。
ちなみにgoogle chromeのディベロッパーツールを使用しております。
サイト解説の画像に使用したいと思っているのですが、他に方法があればぜひ教えて頂きたいです。
よろしくお願い致します。
imosukeさん、はじめまして。
テンプレートを使っていただきありがとうございます！
僕も今Chromeのキャプチャ機能を使ってみたのですが、たしかにページ上部の箇所が間延びしてしまいますね。謎ですｗ
このChromeのExtensionを使ってください。うまくページの上から下までキャプチャできるはずです。僕はふだんはこちらを使ってキャプチャを取っています。
https://chrome.google.com/webstore/detail/gofullpage-full-page-scre/fdpohaocaechififmbbbbbknoalclacl?hl=ja
ねこポンさん、初めまして。
ポートフォリオのテンプレート（ベーシック）を使用させていただいております。
質問なのですが、work部分の画像を作品ごとにサイズ変えたい場合、どこを変更すればいいのでしょうか？
教えていただけると幸いです。
yuzukiさん、はじめまして。
Works部分の各作品の画像サイズを変えるには、下記の方法で変えてください。
1. imgタグのsrc属性に設定している画像を変える
2. aタグのリンク先であるhref属性で設定している画像を変える
3. aタグのdata-size属性の画像サイズ指定を変える（現在は960×720の記載がある箇所を、変更したい画像サイズに変える）
以上です。またわからない箇所があればコメントをください＾＾
ねこポンさん、こんにちは。
私もポートフォリオのテンプレート（ベーシック）を使用させていただいておりまして、
それを一からねこぽんさんがどのように作ったのか辿りながら作っています。
1点質問があります。
featureセクションでCSSを以下のように記述すると、上手く「.feature-body」が画像の横に配置されません。
.feature-item{
display: flex;
flex-wrap: wrap;
}
.feature-img-wrapper{
flex-basis: 45%;
}
.feature-body{
flex-grow: 1;
}
以下のサイトのようになってしまいます。
https://crieit.net/posts/feature
Float: left;を使うと上手く行ったのですが、ねこぽんさんがやっているように「flex」で設定するにはどうしたらいいでしょうか？
教えていただけると幸いです。
kakuさん、はじめまして。
ポートフォリオのテンプレートを使っていただきありがとうございます！
featureセクションの箇所ですが、僕のコードの書き方は下記のようになっています。この書き方では何かまずい点がありましたか？
.feature-item {
display: flex;
flex-wrap: wrap; ←これ不要でした…
}
.feature-image-wrapper {
flex: 0 0 45%;
margin-right: 40px;
}
.feature-body {
flex: 1;
}
画像が左、テキストが右にあるようなパーツの場合は、左にflex:0 0 x%（flex:0 1 x%でもOKかな）で、右にflex:1を指定するようにしています。
flexboxのflex-growやflex-shrinkはかなりややこしくて、、正直、僕も完全には理解しきれていません。今回で言うと、flex:1とflex-grow:1は同じように動く認識ですが、どうやら挙動は異なるようですね。。flex-basisについても今もIEでバグがあるかもしれません。
答えきれていない点があればご指摘ください。
ねこポンさん
お忙しい中、ご回答ありがとうございます。
.feature-body {
flex: 1;
}
の部分が「flex-grow: 1;」となっていて、レイアウトが崩れていました。
ありがとうございました！
ねこポンさん、初めまして。
Kenichiと申します。
ポートフォリオのテンプレート（ベーシック）を使用させていただきました。
作成に時間がかかってしまったのですが、ようやくページを公開するまでに至りました。
ねこポンさんのページは、どのコンテンツにおいても非常にわかりやすく参考にさせていただきました。
まだまだ私自身の作品数が少ないので、ねこポンさんの「作品を増やす方法」を参考させていただきつつ、営業活動していきます。
これからも、ねこポンさんのページを見て勉強させていただきます。
ありがとうございました。
Kenichiさん、はじめまして。
テンプレートを活用していただいてありがとうございました！
>ねこポンさんのページは、どのコンテンツにおいても非常にわかりやすく参考にさせていただきました。
嬉しいです！最近はあまり更新できていませんが、今後も役立つ情報やコンテンツを作っていきますね＾＾
ねこポンさん初めまして。
ねこポンさんのポートフォリオを見ながら自分でコーディンしております。いきなり質問なんですが、ヘッダーのWORKSとかを押すと、WORKS等のところに移動します。それはnavタグを使って移動させているのでしょうか。調べてもnavの使い方が理解できず困っています。
まことさん、はじめまして。
ご自身でコーディングされているんですね！それは良い勉強になると思います。
navタグの箇所をクリックするとスクロールするのは、jQueryによって実装しています。
下記のscript.jsファイルをソースから見つけてください。
https://webdesigner-go.com/portfolio-template-basic/js/script.js
このscript.jsの中に次の記載があります。
//ページ内スクロール
var $nav = $(“.gnav”);
var navHeight = $nav.outerHeight();
$(‘a[href^=”#”]’).on(“click”, function () {
var href = $(this).attr(“href”);
var target = $(href == “#” || href == “” ? “html” : href);
var position = target.offset().top – navHeight;
$(“html, body”).animate(
{
scrollTop: position,
},
300,
“swing”
);
return false;
});
上から3行目の記述で、aタグをクリックした際にhrefの値を取得し、対応するid属性を持つタグにスクロールするよう書いています。具体的には、
FEATURE
をクリックすると、#feature-sectionを取得して
に移動するようになっています。
navなどのHTMLのタグにはこのようなアニメーションの機能はなく、何かしら動きをつけたい場合はこのようにjQueryを使います。
また不明点があればいつでもコメントをください。
ねこポンさん、初めまして。
ポートフォリオのテンプレート（ベーシック）を使用させていただきました。
教えていただきたいことがあるのですが、WORKSの部分に縦長の画像（作品）を入れると、縦にはみ出してしまい横型の画像と並んだ時に不揃いになってしまうのですが、画像の高さを横型の画像と揃えて固定することはできないでしょうか？
ぱんにさん、はじめまして。
縦型の画像を配置すると高さがはみ出てしまうので、heightを指定します。
縦型の画像を配置したいimgタグに
height: 312.64px;
を直接指定してください。
この312.64pxという値は横型の画像の高さです。これを縦型の画像の高さにも適用しているだけです。
そして、imgタグを囲むaタグに対して
width: 208px;
margin: 0 auto;
を指定してください。
このwidthの値は縦型の画像の縦横比によって変わるので適宜変えてください。
何をしているかと言うと、画像の幅を208pxで固定にしてあげて、margin:0 autoで中央に寄せています。
これで縦型の画像もその他の画像と高さが揃うはずです。
スマホ表示の場合も同様に横型の画像の高さを当てて中央寄せしてあげてください。
わからない箇所があればまたコメントをください＾＾
ねこポンさん
お忙しい中、ご回答ありがとうございます。
無事に高さを揃えることができました！
助かりました！！
すみませんが、もう一点だけ質問させて下さい。
横型の画像の高さ312.64pxや縦型の画像の幅を208pxといった数値は
どのように算出すればいいのでしょうか？
初歩的な質問ばかりですみません。
ぱんにさん
>横型の画像の高さ312.64pxや縦型の画像の幅を208pxといった数値はどのように算出すればいいのでしょうか？
312.64pxは横型の画像の高さです。Googleのインスペクタ（開発者ツール）で横型画像の高さを調べてください。でもそもそも312.64pxではなく、315.06pxでした。。すみません。インスペクタの使い方がわからない場合はこちらの記事を参考にしてください。
★Webデザイナーの必需品！Google Chromeブラウザの開発者ツールの使い方
https://webdesigner-go.com/proskill/googlechrome/
208pxという値は、仮に600x800pxの縦型画像を配置し高さを312.64pxで指定した際に算出される横幅です。こちらも開発者ツールで調べました。
でも高さを315.06pxと固定値にしてしまうと、ブラウザ幅を縮小した時にずっと高さが固定のままで見栄えがいまいちですね。。なので、すみません、上で提案した方法はやっぱりやめましょう！
地味ですが次の方法で行きましょう。
今は横幅の画像の想定は1600x1200pxです。Photoshopで縦型のデザインもこの1600x1200pxにはめて画像を新たに作ってください。うまく伝わりますかね、、縦型のデザインを800x1200pxとして、それを1600x1200pxで作った背景が白の画像（透過でpngでもOK）の左右中央に寄せて配置してください。そういう画像を作ります。一見縦型の画像なのですが、実態は単純に横型の画像の中央に縦型画像を配置しただけです。背景を白にした場合はaタグのbox-shadowが邪魔なので消します。あるいは画像は重くなりますが、背景透過でpngで作っちゃっていいと思います。
伝わってなかったら不明点を詳しく教えてください。たぶんこの方法がベストだと思います。
ねこポンさん
お忙しい中、ご回答ありがとうございます。
Googleのインスペクタで画像サイズを調べるんですね。
勉強になりました。
さらに別の縦型画像の配置方法まで提案していただいてありがとうございます。
早速試して見たのですが、確かにこちらの方がブラウザ幅を縮小した時の見栄えがいいですね。
この方法で進めたいと思います。一人ではなかなか解決できなかったので本当に助かりました。ありがとうございます！
こんばんは 就職活動用のポートフォリオ作成のため、本日こちらのテンプレを利用させていただきました。
こちらのサイトを改良(ページ数を増やす・クラス名の変更など)して完成したらこちらにあげさせていただきます。
よろしくお願いします。
mu-sanさん、はじめまして！
テンプレートを使っていただきありがとうございます！改良がんばってください＾＾
テーマをインストール出来ません。
↓のようなメッセージがでます。
インストールする方法を教えてください。
アップロードしたファイルからテーマをインストールしています: portfolio-template-basic.zip
パッケージを展開しています…
テーマをインストールしています…
パッケージをインストールできませんでした。 テーマに style.css スタイルシートがありません。
テーマのインストールに失敗しました。
ゆらぽんさん、はじめまして。
このテンプレートファイルはWordPressのテーマではありません。HTMLとCSSのファイルを圧縮しただけのものです。解凍して使用してください。
はじめまして、さくらと申します。webデザイナーではなく絵描きなのですが、シンプルで見やすいレスポンシブなポートフォリオサイトのテンプレートを探して行きつきました。basicとgirlyちょこちょこ合わせて使わせいただきました。色々テンプレート試してきたのですが、ねこポンさんの素晴らしいです～～。無料で使ってしまっていいのでしょうか、、というクオリティです。。シングルページで作るのがだいぶラクになりました。ありがとうございましたm(__)m
さくらさん、はじめまして！
ポートフォリオサイトを拝見しました！やはりプロの方はすごいなぁ…と感動しました。どれも本当に素敵なイラストですし、イラストだけじゃなくマンガや服まで扱っていて多才ですよね。
Skillの項目をリンク集に変えたのはナイスアイデアだと思いました＾＾
テンプレートが少しでもさくらさんのお仕事の助けになれたのなら嬉しいです。
もしよかったら、この記事の中でポートフォリオサイトを紹介してもよろしいでしょうか？
ねこポンさんご返信ありがとうございます。ご紹介、光栄です＾＾
サイトの記事も面白く読ませていただいてます。フリーランスのスタートは大変ですよねーあの社会不適合者感・・・私もいっぱい泣きました、、どの辺からプロになったのかわかりません(笑)
いやしかし、マツコさんのよふかしが面白すぎていろんな人に送ってしまいました♡もーファンです～ｗ ご活躍応援してます～～
夜ふかしの動画も観ていただいてありがとうございます！しかもシェアまで笑。
いやほんとフリーランスは自由な分だけ大変なんですよね〜。。泣くほど大変だったんですね。。なんとかずっと続けていきたいものですよね。
ポートフォリオの掲載許可ありがとうございます！さっそく本記事に掲載しておきました＾＾
ねこポンさん、こんばんは。
以前、ポートフォリオを見て頂きたいと言いながら未だに提出していない、ふゆきと申します。
実は、web制作会社から正社員の内定を頂きましたので、報告に参りました！
派遣とかではなく、自社でデザインやコーディングの仕事をさせて貰えるようです。
29歳未経験でこんなにアッサリと決まるとは思いもよらず、戸惑っております。
これはひとえに、webデザイナーを目指す背中を押して頂いた、ねこポンさんのおかげです！
このサイトは本当に励みになりました。
これからはwebデザイナーとして頑張りたいと思います。
本当にありがとうございました！
ふゆきさん、内定おめでとうございます！このご時世でしかもWeb制作会社＆正社員はすごいですね〜。本当によかったです＾＾
報告していただいて嬉しいです。職業訓練に通う前からコメントをくれてましたよね。このサイトが少しでも助けになれてよかったです。
ポートフォリオは僕がレビューする必要がないくらい素敵だったんだと思います笑
これから新たなスタートですね！また仕事でお悩みなどあればいつでもコメントをください＾＾
ねこポンさん、はじめまして。
こちらのテンプレートを使用させていただきました♪
自分のテイストのデザインにカスタマイズしてみました！
フリーランスのWebデザイナーとして活動します(*^^*)
この度は素敵なテンプレートをありがとうございましたm(*_ _)m
アシェリさん、はじめまして！
感動しました…！すごく素敵なポートフォリオサイトですね〜。テンプレートを本当に綺麗にカスタマイズしてご自身の世界観を作り上げていますよね。たくさんお客さんがやって来そうですね＾＾
また個人的に発見だったのが、こんな可愛いGoogleFontがあるんだ！ということでした。’Bad Script’と’Dawning of a New Day’、すごくサイトのテイストにしっくりきてますよね。
もし可能でしたら、この記事でアシェリさんのポートフォリオサイトを紹介させていただいてもよろしいでしょうか？
わー！そう言っていただけて嬉しいです(⸝⸝⸝´꒳`⸝⸝⸝)
Webデザインに少しブランクがあるので良いウォーミングアップになりました…！
案件取れるように頑張っていきます♪
紹介についてもぜひ！とても嬉しいです\( *°ω°* )/
屋号→acherie(アシェリ)
url→https://acherie.work
どうぞよろしくお願いいたしますm(*_ _)m
Twitterもフォローさせていただきました♪
ありがとうございます！他の方のカスタマイズ例としてさっそく紹介しました。またそのうちもっと詳しく紹介させていただくかもしれません＾＾
Twitterは僕の方からもフォローさせていただきました！インスタはまだこれからのようですが、アシェリさんのデザインはすごく綺麗に映えて人気でそうですね！今後ともよろしくお願いします〜。
さっそくご紹介ありがとうございます(*^^*)
はい！私ので良ければぜひ♪
Twitterのフォロバもありがとうございます♪
インスタはこれからで何を投稿していこうか模索中です…！
こちらこそ私もねこポンさんの記事など見て勉強させて頂きます( ˆoˆ )
今後ともよろしくお願いいたします＊
ねこポン先生こんにちは。
質問です。TwitterにWebサイトのリンクを貼っているのですが、Twitterアプリからサイトを開くとナビやヘッダーが壊れて？しまうようなのですが、何か問題があるのでしょうか？
私の携帯での問題なのか分からず、、素人の質問ですみません。。
お手隙の時にご回答いただけると嬉しいです。
さくらさん、こんにちは。
僕のスマホ（iPhoneX）でチェックしてみましたが再現しませんね…。謎ですね。
もしまだ直っていなくて原因を究明したい場合はどこかにキャプチャをアップして見せていただけますか。ただ、こちらで再現できない以上、直すのはちょっと難しいかもですが😅