当記事はデイトラでWEB制作コースを受講して43週間、どんな状況でどんな勉強をしているのかまとめています
未経験、異業種、プログラミングの事は全く分からない私が、デイトラで学んだらプログラミングができるようになるのか？という趣旨で発信しています。
- 未経験でもできるの？
- 他の人がどんな風に勉強しているのか知りたい。
- どれくらい時間がかかるもの？
そんな方の判断材料になれば幸いです！
3週間ほどポートフォリオ作成を続けています
この記事では以下のことが書かれています。
- ポートフォリオ作成で参考にしたサイト
- 実装してみたこと
現在学習時間1225Hほど、だんだん焦りもなくなってきます🤔
＼デイトラを受けるならここから／
参考にしたサイト
ポートフォリオを作成するのにいくつものサイトを参考にしています。
企業のものはもちろん、著名な方から学習段階の人のものまで。
私と同じくらい学習している方や、少し先に進んでいる先輩のポートフォリオサイトの内容を参考にしました。
自身は何ができるかがよくわからなかったので同じ学習をしている方やしてきた方のスキルを見て、「こう書けばいいんだ。HTMLが書けるっていうことはこういうふうに訴求するんだ」と学びました。
また、参考になるポートフォリオをまとめたサイトがいくつか出てくるのを参考にしました。
webデザインスクール卒業者のポートフォリオ
デザインスクール生が制作されたポートフォリオは流石ですね…。見た目がとても整っていて参考になります。
デザインがいいとされるポートフォリオサイト20選
真似できるところを真似してみて、細々とトレースしていきました。
大まかなデザインを参考にしつつ、細かいところは実際にコードを書いてみて調整しました。
真似したいデザインとやってみたい仕様がどんどん増えて大変でした。
背景画像を探したサイト
殆どが商用可能も可能なフリー画像をダウンロードできるサイトです。
海外の画像が多く解像度も高いためおしゃれなサイトになります。
画像サイズが大きいため注意です。
ちょうどいいイラストを探すならこちら
SVGアイコンを探したサイト
コリスさんで紹介されていたサイトです。
HTMLのロゴやwordpressのロゴなどもあり見栄えが整います。無料プランだと画像の検索は３回まで。
自力で探せば無料です。シークレットモードで検索して、ジャンルを見たら探しやすいです。
人物を当てはめたいときはこちらを参照にします
実装してみたこと
学習中に目に入ったもの。Xのポストでおすすめされた方法。本を読んで知った知識。
自分のサイトなら何でもできるということで色々実装してみました。
gridレイアウトを積極的に取り入れる
チートシートはコードペンに実際にコードを書きながら進めるため非常にわかりやすかったです。
英語で全文書かれていて少しとっつきにくいかも知れませんが、日本語に変換したら読みやすい文章でした。
gridレイアウトの基本を学ぶためにゲームも教えてもらいました。
サブグリッドをも使用しています
カードレイアウトの中身を整えるためにサブグリッドを使用。
pxでの数字指定をなるべく少なくなるように意識
クランプ関数に変換するジェネレーターサイト
要素の間隔をや画像の調整するためにvw,vhを使用を意識しました。
背景画像を表示するために100vhを使用したり、少し工夫しています。
スマホ版とパソコン版では少々異なるので、メディアクエリやコンテナクエリで調整します。
属性セレクタを使用
属性セレクタとは？
属性セレクタは、HTML要素の特定の属性や属性値に基づいてスタイルを適用するためのCSSセレクタです。例えば、[attribute]の形式で書くことで、指定した属性を持つ要素全体にスタイルを適用できます。
属性セレクタには、以下のような種類があります
[attribute]：特定の属性を持つ要素を対象にする。- 例:
[type]はtype属性を持つすべての要素に適用。 [attribute="value"]：指定された属性が特定の値に一致する要素を対象にする。- 例:
[type="text"]はtype="text"の要素に適用。 [attribute^="value"]：属性値が特定の文字列で始まる要素を対象にする。[attribute$="value"]：属性値が特定の文字列で終わる要素を対象にする。[attribute*="value"]：属性値に特定の文字列を含む要素を対象にする。
これらを使うと、クラスやID以外の属性でも柔軟にスタイルを指定できます。
<div class="container">
<div class="box-1"> A </div>
<div class="box-2"> B </div>
<div class="box-3"> C </div>
</div>
[class^="box-"]{}
// クラス名が "box-" で始まる全てのクラスを対象とする
[class*="box"]{}
// クラス名に "box" を含む全てのクラスを対象とする
[class$="-box"]{}
// クラス名が "-box" で終わる全てのクラスを対象とする
// 複数の属性セレクタを組み合わせることも可能
[class^="box-"][data-type="main"] {
font-size: 16px;
}
// クラス名が "box-" で始まり、かつ data-type="main" の要素を対象とするbox-のクラスに共通した要素を持たせて使用します。
２つのスワイパーを連動させる
wordpress関数を使い、サムネイル画像を読み込み、２つのスワイパーと連動させて動かすと行ったことをしました。
参考サイト
BRISKさんは非常にレベルが高く、少し難しく感じました
スワイパーとサブループを２つ用意する必要があり、少しややこしいので別の記事にまとめました。
【WEB制作】ポートフォリオサイト制作【43週目】|まとめ
学習を始めて43週目です。学習時間は1200Hを超えました。
wordpressサイトを作るのは3つめです。少しずつ慣れてきた感じがします。
wordpressサイトを作れますというのをアピールしながら営業活動を進めていこうと思います(/･ω･)/
自分のサイトなのと、元のデザインがないのでやりたい放題でした。
その分自分でデザインを考えないといけないのが非常に苦労しました。ここはお金を出してデザインしてもらってもいいかも知れません。
気づけば後２ヶ月で学習開始から１年経ちます。１年以内に0→1は達成できるのかな？一つの区切りとして考えています。
学習が楽しくて学習沼にハマっている気がしなくもないですな！ガハハ！
これからも続けたらどうなるか？を更新していくので見て頂ければ幸いです。
リスキリング(大人の学びなおし)やIT人材不足はまだまだ続いていきます。勉強を始めるのに遅いことはありません。
自分も何かのスキルを得たい、変わりたいと思っている方、
一緒に頑張りませんか？
WEB制作のスクールは安い買い物ではありませんが、
頑張るだけの価値はあると感じます。
＼デイトラを受けるならここから／
