よね

未経験からWebデザイナーになるために勉強中。

よね

未経験からWebデザイナーになるために勉強中。

  • 未経験からのデザイナーへの道

    未経験の私が日々成長し、Webデザイナーになるまでの様子を投稿しています。これからWebデザイナーを目指す方におすすめ。

  • 固定された記事

はじめに【自己紹介】

はじめまして。 来たるは2022年 7月13日 私は全くの未経験で、知り合いのウェブデザイナーのもとデザインの勉強をスタートしました。このブログはそんな私が日々成長し、ウェブデザイナーになるまでの様を投稿していきます。 私について社会人4年目の22歳、工業高校を卒業後大手食品メーカーの工場で製造部門を担当しています。趣味は「ファション」と「映画鑑賞」で、休日は古着屋さんやセレクトショップに行って買い物をしたり映画館に行って映画を観たりしています。 さて、ここらで私の経歴

よね

    • バナーデザインの練習②

      こんにちは。 今回はバナーデザインの制作練習として、いくつかのお題の中から好きなものを3つ選んで制作していったのでそこで学んだことについてまとめていこうと思います。 お題はこちらのサイトから選定させていただきました。↓ １. 英会話塾：短期講習の告知１つ目は英会話塾の短期講習バナーのお題にしました。 バナーのイメージが楽しい感じということで、ポップな感じのデザインは自分の中では得意な方の意識があったためこちらのお題を選びました。 参考デザインも多く比較的制作しやすかった

      よね

      • 毎日作業するために、変えたところ

        こんにちは。 2024年に入り気がつけばもう3月になりました。時の流れが早いなと年々感じております笑 はじめにさて、今回は私がwebデザインを勉強していく上で、毎日作業を継続するために気をつけていることや以前から変えたことについて少しお話しようと思います。 というのも私は普段、工場勤務で不規則な勤務時間の合間をぬって勉強しています。その中で思うように勉強時間を確保できずに作業進捗が遅いという課題がありました。 そこで実際に課題解決に有効だった方法を紹介します。 ・作業に取

        よね

        • バナーデザインの練習

          明けましておめでとうございます。 年末年始はどのようにお過ごししたでしょうか。 私は元旦に友達と初日の出を見て1年が始まる というのが毎年の恒例なのですが、今年も見に行くことができました。 昨年は、いろいろな面で初めての経験もたくさんしてすごく充実した一年だったなと思っています。 気づけばあっという間に2023年も終わり、これが新年最初の記事となりました。今年もたくさんnoteを更新できるように頑張ります！！！ 今回は初めてバナーデザインの制作をしたのでそこで学んだことに

          よね
        • 固定された記事

        はじめに【自己紹介】

        よね

        マガジン

        • 未経験からのデザイナーへの道
          20本

        記事

          サイト制作の練習②

          こんにちは。 お久しぶりです。 今回も前回に続いて一つのサイトを自分でデザインしてコーディングしたので、そこで学んだことをまとめていこうと思います。 今回のサイトは「美容鍼灸サロン」を題材として制作しました。 制作したサイトXDを使ってpcとsp画面サイズをそれぞれ作成しました。 デザイン完成後はこのサイトをコーディングにて制作しました。 学んだこと・ポイント（デザイン）1.ロゴの作成 サイトを作成するにあたってロゴを用意しなければいけません。 ロゴは、名前とともにブ

          よね

          サイト制作の練習②

          よね

          サイト制作の練習①

          こんにちは。 お久しぶりです。 今回は1つのサイトを自分でデザインしてコーディングするまでを練習として行ったのでそこで学んだことについてまとめていこうと思います。今回のサイトは「若者が働きたくなる建設会社」を題材として制作しました。 制作したサイトXDを使ってpcとsp画面サイズをそれぞれ作成しました。 デザイン完成後はこのサイトをコーディングにて制作しました。 学んだこと・ポイント（デザイン）デザインは題材に合うようひと目見て、ここの会社がどのような会社なのかが分かる

          よね

          サイト制作の練習①

          よね

          HTML&CSSの練習

          こんにちは。 お久しぶりです。 以前の投稿から随分期間が空いてしまいました。 投稿が空いていた期間僕が何をしていたかというと、ひらすらコーディング練習をしておりました。 今回はそのコーディング練習で作ったサイトや学んだことについてまとめていこうと思います。 作成したサイト①まずは、とある旅行サイトを作成しました。 このサイトは似たような項目がいくつかあるので一つ基盤をしっかり作って使い回すことで効率よく作成することができるサイトでした。 作成したサイト②2つ目にこちらの

          よね

          HTML&CSSの練習

          よね

          HTML&CSSの勉強②

          こんにちは。 今回も本を使ってHTML&CSSの勉強をしていきます。 今回使った本はこちらです。↓ この本も一冊目同様、ステップごとに作業内容が載っていて、それにそってコードを書くことで一つのサイトが出来上がります。この本では一冊目より応用的なコードが使われているのでより実践に近いコードを組むことができます。 実際に最後に完成したものがこちらです。↓ 今回もこの本の中で躓いたところや難しいかった箇所を、自分の振り返りとしてまとめていきます。 学んだこと1. 半透明な

          よね

          HTML&CSSの勉強②

          よね

          HTML5&CSS3の勉強①

          今回から、本を使って実際にHTML＆CSSを勉強していきます。一冊目としてこちらの本を使用しました。↓ この本はステップごとに作業内容が載ってあるので、それにそって実際にコーディングしていくことで初心者でも勉強しながら1つのサイトを作ることができます。実際に最後に完成したものがこちらです↓ 今回は、この本の中で躓いたところや難しいかった箇所を自分の振り返りとしてまとめていきます。 学んだこと1.clearfix（クリアフィックス） クリアフィックスは、フローティングボ

          よね

          HTML5&CSS3の勉強①

          よね

          CSS【 Flexbox編 】

          こんにちは。 今回も、CSSについて学んだことを共有していきます。 1.要素を横並びにしよう display: flexは指定した要素の子要素を横並びにします。 横並びにしたい要素の親要素にdisplay: flexを指定します。 2.横並びにした要素を画面幅いっぱいに広げよう flex: autoは指定した要素の幅を親要素に合わせて伸縮させることができます。 親要素の幅に合わせて伸ばしたい要素にflex: autoを指定します。 3.要素を2列に折り返そう f

          よね

          CSS【 Flexbox編 】

          よね

          CSS【 上級編 】

          こんにちは。 今回も、CSSについて学んだことを共有していきます。 メディアクエリを設定するメディアクエリとは、ブラウザの画面サイズに応じてCSSのスタイルを設定できる手法です。 メディアクエリは、@media (条件) { .... }という様に書きます。 指定された条件が当てはまるときにのみ{ }内のCSSが適用されます。 メディアクエリの条件には、max-width(最大幅)、またはmin-width(最小幅)を指定できます。 max-width: ◯◯pxと指

          よね

          CSS【 上級編 】

          よね

          HTML【 上級編 】

          こんにちは。 今回も、HTMLについて学んだことを共有していきます。 レスポンシブデザインの型を準備しよう1.viewportの設定 レスポンシブデザインを適用する準備として、<head>タグ内にviewportを設定しましょう。 viewportを設定しないと、スマートフォンやタブレットでの閲覧時にメディアクエリが正しく機能しません。 2.width: 100% 画面幅によって全体のwidthが変わるように、width: 100%;に変更しましょう。 まとめ今回

          よね

          HTML【 上級編 】

          よね

          CSS【 中級編02 】

          こんにちは。 今回も、CSSについて学んだことを共有していきます。 インラインブロックブロック要素とインライン要素の特徴を併せ持つインラインブロック要素というものがあります。 インラインブロック要素はインライン要素と同様に横に並びますが、ブロック要素のように幅や高さをもちます。 <a>タグなどは初期状態でインライン要素になっていますが、displayプロパティを使うと、インラインブロック要素に変更することができます。 displayプロパティはblock（ブロック要素）

          よね

          CSS【 中級編02 】

          よね

          CSS【 中級編01 】

          こんにちは。 今回も、CSSについて学んだことを共有していきます。 1.背景画像を指定する CSSで背景画像を指定するにはbackground-imageプロパティを用います。 background-image: url(画像のURL);のように使います。 background-imageで指定された背景画像は表示範囲を埋め尽くすまで、繰り返し表示される性質があります。 background-size: cover;を指定すると、1枚の画像で表示範囲を埋め尽くすように

          よね

          CSS【 中級編01 】

          よね

          HTML【 中級編 】

          こんにちは。 今回も、HTMLについて学んだことを共有していきます。 1.ボタン部分の作成 ボタンは<a>タグで指定します。 しかし<a>タグはインライン要素であり、インライン要素にはwidthやheightが指定できないなど不便な点があります。 2.アイコンを使おう アイコンを表示するにはFont Awesomeというものを使うと便利です。 Font Awesomeは、以下の手順で使用することができます。 ①Font AwesomeのCSSファイルを読み込む ②

          よね

          HTML【 中級編 】

          よね

          CSS【 初級編02 】

          こんにちは。 今回も、CSSについて学んだことを共有していきます。 1.リストのマークを なくす <li>要素にlist-styleプロパティを用いてnoneを指定すると、リストの先頭のマークを消すことができます。他にもnoneは要素を非表示にする時に使います。 2.要素を左右に配置する floatプロパティを用いることで、指定した要素を横並びにすることができます。 上の図のように、float: left;を指定すると要素が左から順に横に並びます。float: ri

          よね

          CSS【 初級編02 】

          よね