MIO

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

MIO

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

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

ご覧いただき、ありがとうございます！ 今回は「クラス名を何とするか」をCSS設計の基本概念からイメージするという回でした。 CSS設計の基本概念HTMLでつけるクラス名が私の中では本当に難しくて、CSS実装の際に、クラスを足したり、変更したり…といったことが多くありました。 共通クラスもうまく使いこなせず、CSSのコードが無駄に長くなっていると感じたこともあります。 「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制作コース 初級編 DAY20-22 jQueryを学ぶ 2 / ChatGPT

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

        MIO

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

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

          MIO

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

        MIO

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

          MIO

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

          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

          デイトラ Web制作コース 初級編 DAY11-12 Emmetとスニペット

          ご覧いただき、ありがとうございます！ 今回は、コーディングスピードを上げる「Emmet機能」と「コードスニペット」というものについて書きます。 Emmet機能Emmetとは Emmetとは、サポートされているエディタ内で使用できるツールです。 要はHTML/CSSを少し書くだけで、たくさんのコードが一気に出てくる魔法みたいなものです。 もちろんVSCodeも対応しています。 例えば、下記のコードを書きたいとします。 <div>< /div><h2 class="t

          MIO

          デイトラ Web制作コース 初級編 DAY11-12 Emmetとスニペット

          MIO

          デイトラ Web制作コース 初級編 DAY8-10 Webサイト制作 2

          ご覧いただき、ありがとうございます！ 今回は前回制作したWebサイトを、自分でもう一度作ってみるという回でした。 私がゼロから制作し出して、注意したポイントをお伝えしたいと思います！ Webサイト制作を書く前にすることHTMLをセクションごとに分ける HTML/CSSを使って実装する前にやるといいかなと思います。 Webサイトの中身をセクションごとにわけて、さらにセクションの中身をブロックごとに分けます。 何となくでHTMLを書き始めると、後々CSS実装の時にHTM

          MIO

          デイトラ Web制作コース 初級編 DAY8-10 Webサイト制作 2

          MIO

          デイトラ Web制作コース 初級編 DAY5-7 Webサイト制作 1

          ご覧いただき、ありがとうございます！ DAY5から3セクションを使って、ゼロからWebサイトの制作を行いました。 Webサイトとは？仕組みと構成Webサイトが表示される仕組み Webサイトを作る上で大切なのが、Webサイトとはどんな仕組みで、どんな風に作っていくのか知っておくことだと思います。 私はそもそもWebサイトの仕組みも理解していませんでした。 こちらで分かりやすく解説してくれています。 Webサイトの構成 今回は、スマートフォンファーストで仮想スイーツ

          MIO

          デイトラ Web制作コース 初級編 DAY5-7 Webサイト制作 1

          MIO

          デイトラ Web制作コース 初級編 DAY4 環境構築

          ご覧いただき、ありがとうございます！ DAY4ではVSCodeのプラグインやLiveServer機能、Google Chromeの検証機能について学びました。 VSCodeの環境構築VScodeのプラグインをインストール VSCodeのプラグインが本当に優秀。 プラグインとは別の機能を追加するソフトウェアのことを言います。 プラグインにも種類がたくさんあるのですが、コードのスペルミスを教えてくれる機能によく助けられています。 こちらのサイトでプラグインについて詳しく

          MIO

          デイトラ Web制作コース 初級編 DAY4 環境構築

          MIO

          デイトラ Web制作コース 初級編 DAY3 CSSの基礎について

          ご覧いただき、ありがとうございます！ CSSを学ぶことによって、Webサイトに装飾ができるようになります！ CSSとはCSSとは、Webページの見た目やレイアウトを指定するための言語です。 テキストの大きさや色を変えたり、背景色や背景画像を設定したり、位置やサイズを指定してレイアウトを変えたり… こちらもWebページを作る上で必須になります。 CSSを書くときは、HTMLと同じく括弧を使用しますが、使うのはこちらの波括弧{ }です。 p { color: red;

          MIO

          デイトラ Web制作コース 初級編 DAY3 CSSの基礎について

          MIO

          デイトラ Web制作コース 初級編 DAY2 HTMLの基礎について

          ご覧いただき、ありがとうございます！ DAY2では、HTMLの基礎について学びました。 本格的にコードを書いていきます！ HTMLとはHTMLとは、簡単にいうとWebページを制作するための言語です。 テキストや画像、リンクなどをWebページに表示させるために使います。 HTMLを書くときは、カギ括弧で囲まれたタグとコンテンツいうものを使用してコードを書いていきます。 <p>Hello Would</p> <p>の開始タグと、</p>の終了タグが必要で、間に挟まれてい

          MIO

          デイトラ Web制作コース 初級編 DAY2 HTMLの基礎について

          MIO

          デイトラ Web制作コース 初級編 DAY0-1 準備

          ご覧いただき、ありがとうございます！ 今日から受講内容を書いていきますが、1セクション10Tips前後あります。 全て書くととんでもない量になってしまうので、個人的にいいなと思ったところや忘れたくないところなどをピックアップして書いていこうと思います！ デイトラを検討中の方やWeb制作の勉強を始めた方の助けや参考になればいいなと思います✨ DAY0 はじめに最初にデイトラの使い方や、Discordの加入、学習の進め方などを確認します。 ちなみにDiscordは、無料で使

          MIO

          デイトラ Web制作コース 初級編 DAY0-1 準備

          MIO

          デイトラ Web制作コース 受講開始！

          2024年5月1日より、デイトラ（Web制作コース）の受講を開始しました。 自分のアウトプットも兼ねて、初めてのブログに学習記録を残していきます。 デイトラにログインすると、「初級」、「中級」、「上級」、「実務」の4つのレベルに分類されています。 初級編「副業で月5万を稼げるレベルになろう」DAY0〜31 HTMLの基礎やCSSの基礎、jQueryなども学び、初級編の最終的にはポートフォリオの公開まで行います。 中級編「企業と仕事できるコーディング力をつけよう」DAY

          MIO

          デイトラ Web制作コース 受講開始！

          MIO