MIO

Webライティングの仕事をしつつ、2024/05/01よりデイトラ（Web制作コース）…

MIO

Webライティングの仕事をしつつ、2024/05/01よりデイトラ（Web制作コース）受講を始めました。 デイトラでの学びをアウトプットすることと、記録をするためのブログです。 デイトラ検討中の方やWeb制作の勉強を始めた方の参考や助けになればいいなと思います。

デイトラ Web制作コース 中級編 DAY 20-21 LP制作 5（ボタン・見出し作成）

ご覧いただき、ありがとうございます！ DAY20では、ホバーのアニメーションを追加。DAY21では、様々な種類のボタンと見出しを作成しました。 今回は「ボタンと見出し」に焦点を当てて書いていこうと思います。 いろんな見出し見出しは上記の15パターンを作成しました。 実は作るだけ作って答え合わせをしておらず、今慌てて行いました。 お手本のコードを確認すると、違うところが非常に多くありました。 どっちのコードがいいか今判断できないので、基本的にはお手本のコードでいくつかご

MIO

    • デイトラ Web制作コース 中級編 DAY 14-19 LP制作 4（共通パーツの作成）

      ご覧いただき、ありがとうございます！ DAY14-19で、残りのセクションをコーディングしていきました。 今回は、私が苦手な表の作成とお問い合わせフォームの内容を書いていこうと思います。 compareセクションcompareセクションでは、上記のような表を作成しました。 compareセクションのHTML 表を作成するときは、tableタグを使用します。 <table> <thead> <tr>. <!-- 行 --> <th></ th> <!

      MIO

      • デイトラ Web制作コース 中級編 DAY 13 LP制作 3（共通パーツの作成）

        ご覧いただき、ありがとうございます！ DAY5から21までLP制作を行なっています。 今回は、何度も出てくるパーツを、共通パーツとして使い回しできるように実装しました。 共通化するタイミングパーツを共通化するタイミングは、それぞれですが、デザインカンプを見た時に明らかに同じスタイルなら最初から共通化しておくと、より効率的にコーディングできるようになります。 私はコーディングしていく流れで、セクションごとに全体をざっと確認しています。 共通化できるところが見つかれば、その

        MIO

        • デイトラ Web制作コース 中級編 DAY 10-12 LP制作 2（HTMLのタグと属性）

          ご覧いただき、ありがとうございます！ DAY5から21までLP制作を行いました。 今回は、HTMLのタグや属性にフォーカスを当てて、説明していきます。 アクセシビリティとユーザービリティとはHTMLのタグと属性の説明をする前に、この2つの概念について簡単に説明します。 アクセシビリティとユーザービリティは、どちらもWebサイト制作において重要な概念で、異なる視点からユーザー体験を向上させるためのものです。 （Webサイトにフォーカスを絞っています） アクセシビリティと

          MIO

        デイトラ Web制作コース 中級編 DAY 20-21 LP制作 5（ボタン・見出し作成）

        MIO

        • デイトラ Web制作コース 中級編 DAY 14-19 LP制作 4（共通パーツの作成）

          MIO

        • デイトラ Web制作コース 中級編 DAY 13 LP制作 3（共通パーツの作成）

          MIO

        • デイトラ Web制作コース 中級編 DAY 10-12 LP制作 2（HTMLのタグと属性）

          MIO

          デイトラ Web制作コース 中級編 DAY 5-9 LP制作 1

          ご覧いただき、ありがとうございます！ DAY5から21までLP制作を行いました。新しいこともたくさん出てきたので、数回に分けて書いていこうと思います。 LP制作 OHA!今回制作したのは、"OHA!"という架空アプリケーションのLPでした。 モバイルファースト375pxで制作し、PC版は1440px。ブレイクポイントは768pxとしています。 完成品がこちらから。 架空サイトなんですが、「朝起きるために誰かを起こす人」と「朝起きれないから起こしてほしい人」のマッチン

          MIO

          デイトラ Web制作コース 中級編 DAY 5-9 LP制作 1

          MIO

          デイトラ Web制作コース 中級編 DAY 3-4 AIを活用したコーディングとFigma for VSCode

          ご覧いただき、ありがとうございます！ 今回は「AIを活用したコーディング手法」と「Figma for VSCode」というVSCodeの拡張機能について学びました。 AIを活用したコーディングの概要AIを活用したコーディングは、AIという人工知能技術を使ってプログラミングの効率化や品質向上を図ることです。 デイトラ初級編では、chatGPTの活用方法が出てきましたが、今回は「AI搭載のコードエディタ」を中心に学びました。 >> chatGPTを活用した前回の記事はこち

          MIO

          デイトラ Web制作コース 中級編 DAY 3-4 AIを活用したコーディングとFigma for VSCode

          MIO

          デイトラ Web制作コース 中級編 DAY 1-2 Figmaでデザインカンプ制作

          ご覧いただき、ありがとうございます！ デイトラ初級編が終わって、今日から中級編について書いていきます✨ 中級編の最初はデザインカンプを制作しました。 デザインカンプとは今回作成したデザインカンプとは、デザインを資格的に表現した詳しい設計図のことをいいます。 「画面のレイアウト」や「色使い」、「フォントの選定」など、デザインの細部まで詳しく描かれます。 クライアントやチームメンバーに、実際のデザインのイメージや方向性を伝えるために利用されます。 上記は私が作成したデザ

          MIO

          デイトラ Web制作コース 中級編 DAY 1-2 Figmaでデザインカンプ制作

          MIO

          デイトラ Web制作コース 初級編 まとめ

          ご覧いただき、ありがとうございます！ デイトラWeb制作コースの初級編が終了したので、学んだことの総集編にしようと思います。 デイトラ受講を検討中の方はぜひ読んでみてください✨ デイトラ初級編で学んだこと初級編はDAY0〜DAY32までのセクションで構成されており、私は約1ヶ月で完走しました。 基本的には全ての基礎を学びながら、簡単なWebサイトを制作します。 実際にサイトを作りながら学べるので、簡単なWebサイトは自分で制作できるようになりました。 総集編として、項

          MIO

          デイトラ Web制作コース 初級編 まとめ

          MIO

          デイトラ Web制作コース 初級編 DAY32 Webの仕組み

          ご覧いただき、ありがとうございます！ 今回は自分のポートフォリオサイトの公開にあたって、Webの仕組みについて学びました。 Webの仕組みコーダーは公開作業まで行うことが多いので、Webの仕組みも勉強しました。仕組みと制作の流れも少しお話しようと思います。 Webとは Webとは、Would Wide Webの略称で、インターネット上にある様々な情報をリンクで結びつけてアクセスできるシステムのことをいいます。 URL（https://〜）やリンクを指定することで、W

          MIO

          デイトラ Web制作コース 初級編 DAY32 Webの仕組み

          MIO

          デイトラ Web制作コース 初級編 DAY31 自分のポートフォリオサイトを作る

          ご覧いただき、ありがとうございます！ 今回は自分のポートフォリオサイトを制作しました。 制作したポートフォリオサイトテキストや画像を変えて、オリジナルのポートフォリオサイトを制作するというセクションでした。 実際に私が制作したポートフォリオサイトがこちら⇩ デイトラの受講を始めて、約一ヶ月半。 （デイトラ主催の実案件チャレンジという講座ではない企画に参加していたので、受講期間は約一ヶ月） 一つのWebサイトを作り上げて、公開することまでできるようになりました。 サ

          MIO

          デイトラ Web制作コース 初級編 DAY31 自分のポートフォリオサイトを作る

          MIO

          デイトラ Web制作コース 初級編 DAY26-30 ポートフォリオサイト制作

          ご覧いただき、ありがとうございます！ 今回はポートフォリオサイトの制作を行いました。 ポートフォリオサイトを作ってみるポートフォリオサイトとは ポートフォリオサイトは「自分がどんな人」で、「どんなことができるのか」などを伝えるためのWebサイトです。 私は以前WordPressで制作したことがありましたが、構成も何も考えずにただ作ったので、レスポンシブ対応も甘く、なかなかひどいものでした… 制作したのは、架空ポートフォリオサイトで、Xに載せています。 今回はJava

          MIO

          デイトラ Web制作コース 初級編 DAY26-30 ポートフォリオサイト制作

          MIO

          デイトラ Web制作コース 初級編 DAY25 HTML/CSSクラス名の付け方

          ご覧いただき、ありがとうございます！ 今回は「クラス名を何とするか」をCSS設計の基本概念からイメージするという回でした。 CSS設計の基本概念HTMLでつけるクラス名が私の中では本当に難しくて、CSS実装の際に、クラスを足したり、変更したり…といったことが多くありました。 共通クラスもうまく使いこなせず、CSSのコードが無駄に長くなっていると感じたこともあります。 「CSS設計※の基本概念からイメージする」と教わりました。 その観点から、クラス名をつける際の重要な

          MIO

          デイトラ Web制作コース 初級編 DAY25 HTML/CSSクラス名の付け方

          MIO

          デイトラ Web制作コース 初級編 DAY23-24 CSSの上位互換「Sass」

          ご覧いただき、ありがとうございます！ 今回はCSSをより簡単にするために生まれたSassについて学びました。 ※ボリュームが普段の2倍くらいあります。 SassとはSassはCSSの拡張言語で、CSSを簡単かつ早く書けるようにしてくれる言語です。 「Syntactically Awesome Style Sheets」略して「Sass」なんですが、デイトラが「構造的にイカしたスタイルシート」と訳してて笑いました。 Sassには2種類あるらしく、「Sass」と「Scss

          MIO

          デイトラ Web制作コース 初級編 DAY23-24 CSSの上位互換「Sass」

          MIO

          デイトラ Web制作コース 初級編 DAY20-22 jQueryを学ぶ 2 / ChatGPT

          ご覧いただき、ありがとうございます！ 今回は前回同様jQueryの実施と、ChatGPTのプログラミングでの活用方法について学びました。 実は前回の記事で、今回のjQueryも書いていました… そこで今回はChatGPTを活用したプログラミングの勉強方法メインで書いていきます。 jQueryを書く時のルールjQueryをindex.htmlで呼び込む方法や、できることを前回書きましたが、そもそもルールを書いていませんでした。 jQuery("#js-title").

          MIO

          デイトラ Web制作コース 初級編 DAY20-22 jQueryを学ぶ 2 / ChatGPT

          MIO

          デイトラ Web制作コース 初級編 DAY17-19 jQueryを学ぶ 1

          ご覧いただき、ありがとうございます！ 今回はJavaScriptのお友達的存在、jQueryについて学びました。 jQueryとはjQureryとは簡単にいうと、JavaScriptのコードをよりシンプルに書けるようにしたものです。 もっというと、JavaScriptライブラリの内の一つです。 JavaScriptライブラリとは これは本当に画期的で、再利用可能なコードを無料で提供しているツールのことをいいます。 実は私はJavaScriptを勉強するまで、Jav

          MIO

          デイトラ Web制作コース 初級編 DAY17-19 jQueryを学ぶ 1

          MIO

          デイトラ Web制作コース 初級編 DAY13-16 JavaScriptの基礎について

          ご覧いただき、ありがとうございます！ 今回は、JavaScriptの基礎について学びました。 JavaScriptとはWebサイト制作におけるJavaScriptとは、簡単にいうと、Webページに動きをつけるための言語です。 HTML/CSSより難しいと感じましたが、これができるようになると一気にWebサイトが動的でインタラクティブ※になります。 JavaScriptによってHTMLの中身を書き換えたり、要素を追加して、動的な操作を可能にします。 環境設定フォルダと

          MIO

          デイトラ Web制作コース 初級編 DAY13-16 JavaScriptの基礎について

          MIO