デイトラ PR

【体験談】デイトラ卒業制作課題【初心者がプログラミング】

 
記事内に商品プロモーションを含みます。

当記事はデイトラでWEB制作コースを受講して29週間、どんな状況でどんな勉強をしているのかまとめています

未経験、プログラミングの事は全く分からない私が、デイトラで学んだらプログラミングができるようになるのか？という趣旨で発信しています。

  • 未経験でもできるの？
  • 他の人がどんな風に勉強しているのか知りたい。
  • デイトラを受講したいと思っているけどどんなカリキュラムなの？
  • どれくらい時間がかかるもの？

そんな方の判断材料になれば幸いです！

なるべくコードや専門用語を使わないように書いているので気楽に見てくださいね。

ばく

デイトラ上級編卒業制作課題に挑戦して11日、45時間作業しました！

この記事では以下の３点について書いています。

  • 45Hかかってできたこと
  • 時短のために試したこと
  • 個人的ないいと思った小ネタ

学習時間はトータル845時間になりました。たくさんやってるようでまだまだだな〜と思うところも多いです。

＼デイトラを受けるならここから／

目次

45時間かかってできたこと

ばく

卒業課題を行うのに今までは1ページのLPを長々と書いていましたが、10ページほどの中規模なページを作成しています。

5/10ページの静的なコーディングが終了

HTMLにて静的なコーディングを行い、PHPでのwordpressに対応したコードを書くのですがまだHTMLの5ページ目です。

同時期に始めた人はもうHTMLが終わっているのに…とちょっと落ち込むこともありますがWEB制作の学習の鉄則に「人と比べない」というのがあります。

とはいえ、卒業制作にこれくらい時間がかかるんだな〜とちょっとした目安にしてもらえたら嬉しいです。

全体的にコーディングが遅いな〜とは思っていますが、ちょいちょい沼にハマっています。

ハマったところ４選

個人的に時間がかかったこととしては

  • 背景画像をウィンドウサイズを変えても不自然じゃないように変化させる
    　(pxを使っていたものをvwに変更)
  • ブログ記事投稿の表示の崩れを調整する
  • ドロワーメニューにてロゴを出すための調整
  • クリックイベントのイベントを勘違いして別の仕様を一生懸命作ろうとしていた

過去にやったことあるものから初めて挑戦することまで、色々ありますが3〜6時間程度時間を取られています(´・ω・｀)

ばく

完成まで200時間は掛かりそうです…。

時短のために試したこと6選

以前、実案件チャレンジをして以来コーディングの遅さに悩まされています。

そのため色々時短術を試しています、コレは効果があったんじゃないかなと思えるものを抜粋しました。

  • チャットGPTでcopilotを使う
  • 疑似要素のpositionでの調整をしない
  • svgをmask-imageで調整する
  • gridジェネレーターを使って配置を決める
  • 画像をつかってチャットGPTにコードを書いてもらう
  • ウィンドウを3画面にする

以下に詳細を書いていきます。

チャットGPTでcopilotを使う

ばく

チャットGPTのGPTにて、code copilotを使ってみました

画像のとおりに選択して、

/start HTML,SCSS

と入れると英語で説明が出るので

日本語で出力して

で日本語対応します

code copilotの対応しているコマンドは以下の通りになっています。

コマンド一覧:

/start(language?: string): 使用するプログラミング言語を設定します（例：HTML、SCSS）。

/help(any_question?: string): このGPTの使い方についての詳細なガイドを表示します。

/fix(any: string): Rubber Duck Debuggingのアプローチでコードをステップバイステップで修正します。

/quick_fix(any: string): 説明なしでコードのクイックフィックスを提供します。

/explain(any: string): コードのステップバイステップの説明を提供します。

/review(any: string): コードの機能とバグを確認し、レビューします。

/search(any: string): リアルタイムのデータを検索します。

/read(urls: string[]): ウェブページの内容を読み取ります。

疑似要素のpositionでの位置調整をしない

ポジションを使って疑似要素の位置調整をするのは比較的簡単にできます。

けれど、レスポンシブに合わせようと思うとひと工夫必要になってきてめんどくさいな〜と思っていました。

疑似要素の画像をレスポンシブに合わせるために、ポジションでの位置調整をやめ他の要素と同じように並べることしました。

具体的には疑似要素にdisplay:blockを当てて元要素にdisplay:flexで横並びにします。

以下のようなコードとなっています。


.contact-button {
  a {
    display: flex; // Flexboxを使用して子要素をレイアウト
    justify-content: center; // 子要素を水平中央揃え
    align-items: center; // 子要素を垂直中央揃え
    gap: 14px; // 子要素間の間隔を14pxに設定
    color:  #1391e6; // テキストカラーを設定
    font-size: 14px; // フォントサイズを14pxに設定
    border-radius: 30px; // 角を丸くする半径を30pxに設定
    border: 1px solid #1391e6; // ボーダーの色と幅を設定
    background: #fff; // 背景色を設定
    width: 150px; // 幅を150pxに設定
    height: 38px; // 高さを38pxに設定
  }

  &::before {
    display: block; // 擬似要素をブロック要素として表示
    content: ""; // 擬似要素の内容を空に設定
    background: url(../img/contact-icon.svg) center / cover no-repeat; // 背景画像を設定し、中央に配置してカバー
    width: 17px; // 幅を17pxに設定
    height: 17px; // 高さを17pxに設定
  }
}
ばく

簡単に横に並んでくれるため楽に配置を決めることができます！

svgをmask-imageで調整する

svgを使ったアイコン画像や背景画像がたくさん配置されており、ちょっと色を変えたいときなんかもあります。

ただ、svgはコードが長くややこしい…。見づらい…嫌い…(´・ω・｀)

普通にcss当てるだけじゃ色変わらないし変更どうやるの…(´・ω・｀)

cssでmask-imageというプロパティを使えば、簡単に色変更をすることができるため悩むことがなくなりました！リボンの色を変えています！

画像
画像
.ribbon-blue {
  mask-image: url("../img/ribbon.svg"); // SVGをマスクとして使用し、形状を定義
  mask-size: cover; // マスク画像を要素全体に拡大
  mask-repeat: no-repeat; // マスク画像を繰り返さない
  background-color: ##1391e6; // マスク領域の背景色を設定

  &.ribbon-red {
    background-color: #ee5a6d; // ribbon-redクラスが付与された場合の背景色を設定
  }
}
ばく

background-color:を変更したら好きな色に変更できます。楽ちん。

gridジェネレーターを使って配置を決める

grid.layoutit.com
Layoutit Grid — CSS Grids layouts made easy!
https://grid.layoutit.com
Quickly design web layouts, and get HTML and CSS code. Learn CSS Grid visually and build web layouts with our interactive CSS Grid Generator.

gridレイアウトを使いたい！と思いチートシートをみたり色々コードを入れて試していましたがどうにもこうにもうまくいかず。

素直にジェネレーターを使って配置を決めることにしました。

レスポンシブにも強いgridレイアウトをもっと使いこなしたいですね。

こんな配置も…

こんなふうに！

ばく

思い通りに配置をパッと決めることができるようになり、時短になりました！

画像をつかってチャットGPTにコードを書いてもらう

データを並べて表示するためにテーブルタグを使うことがあります。

ただ、テーブルタグはややこしくめんどくさい！できることなら書きたくない！（←

4oになったチャットGPTは画像を読み込んでくれるのでスクリーンショットを取ってコードを書いてというとそれっぽいのを出力してくれます。

微調整したら使えますので、ジェネレーターで何行で〜何列で〜とやるより非常に時短になります！

ばく

対象のスクリーンショットはCommand+Shift+4で取れます。
ウィンドウズはwin+Shift+sで範囲指定できます。

画面を3画面にしてみる

物理的に

コードを書く画面、制作物の画面、デザインカンプの画面が見れればぱぱっと作業ができるのではないか？と考えてやってみました。

個人的な満足度は高いですが場所を取る、ちょっとパソコンが重くなる、5万くらいかかるとデメリットもあります！

ただ作業効率はかなり上がっています！

個人的ないいと思った小ネタ

ばく

ツイッター(現X)でよくダラダラ見ています情報収集をしています。

中でも印象に残ったポストがあったので忘備録として記録します。

filter: blur(); プロパティを使って少しおしゃれにフェードイン

VScodeのラップ変換で要素をあとから囲う

:nth-child(2 of .item)で2番目のアイテムを選択

中でもラップ変換はメチャクチャ便利です！

【体験談】デイトラ卒業制作課題【初心者がプログラミング】｜まとめ

デイトラ卒業課題を6/12にはじめてから11日、45時間ほどの作業をしています

全体の進捗は3割程度、200時間はかかるのかなと言う具合です。

時短のために行っていること、試したことは以下の6つ

  • チャットGPTでcopilotを使う
  • 疑似要素のpositionでの調整をしない
  • svgをmask-imageで調整する
  • gridジェネレーターを使って配置を決める
  • 画像をつかってチャットGPTにコードを書いてもらう
  • ウィンドウを3画面にする

個人的にいいなと思ったXのポスト

  • filter: blur(); プロパティを使って少しおしゃれにフェードイン
  • VScodeのラップ変換機能
  • :nth-child(2 of .item)というnth-childの使い方

時短術を取り入れてみたり、試してみたり。なんか面白そ〜とおもったプロパティをどんどん使っています。

ばく

同じサイトで試しているのでコードはこんがらがってしまっています…直さないと…スパゲティコードっていうらしいです。なんとかしないと。

現在学習時間は845時間ほど。課題は楽しいのですが早く実践をしたいところです。

これからも続けたらどうなるか？を更新していくので見て頂ければ幸いです。

リスキリング(大人の学びなおし)やIT人材不足はまだまだ続いていきます。勉強を始めるのに遅いことはありません。

自分も何かのスキルを得たい、変わりたいと思っている方、

一緒に頑張りませんか？

WEB制作のスクールは安い買い物ではありませんが、

頑張るだけの価値はあると感じます。

＼デイトラを受けるならここから／

ABOUT ME
ばく
30代×朝活×学びなおしをテーマに、実践していることを発信しています。 オンラインスクール「デイトラ」WEB制作コースの体験談を主に書いています。
BLOG：https://bac-asablog.com
RELATED POST