2021-06-30

【88日目】週休5日のルーティン

【雑談】ココナラルーティン

おはようございます。

日記を読み返していたら、もう昨年の4月から週休5日体制（勤務は週に2日）になっていて、「家でできることは家で！」という日常がつづています。

コロナ以前から続けているwebライティングの比重が高まるとともに、この春からはweb制作（コーディング）の学習が始まり、このところ毎日のだいだいのルーティンが固まっています。

毎日のルーティン

03時30分　起床
コーヒーを淹れる（最近はアイス）
昨日の日記を書く
今日の一日の流れを確認
ツイッターを確認～朝の挨拶
ポジティ部～朝の挨拶
体重・血圧・体温測定
04時00分　コーディング学習
05時00分　朝食を作る
05時10分　奥さん起きてくる
05時40分　朝食
07時00分　奥さん出社
　　　　　ブログ、ココナラ確認と修正
08時00分　ライティング業務１
11時30分　昼食
12時30分　ライティング業務２
15時00分　エニタイム
16時30分　jQuery学習
18時00分　夕食作る
21時00分　就寝

人間の時間は24時間と決まっていますので、できることは限られていますね。
そのなかで、コツコツと続けていくだけですね。

春からのhtml/cssの学習経験から、簡単なコーディング作業を出品することにしました。

簡単なHTML/CSSコーディングを格安で行います HTML/CSSに特化したコーディングを低価格で提供！

2021-06-29

【87日目】営業について考える

【ドットインストール】ココナラ

目標としてきた90日が目の前に迫った来ました。
「web制作ができるようになる」として始めてきたhtml/cssですが、いつまでも学習ばかりしていても仕方ありません。そろそろ営業について考えてみました。

じつは、自分の「皆さんの役に立ちそうなスキル」をココナラに並べています。

あなたの会社のベネフィットを伝える架空対談作りますお任せください！どんなシチュエーションでも対談を作成します

終活ガイドが終活を広める記事を最大10記事書きます終活に関する記事を、終活ガイドの私が丁寧に執筆いたします

ペライチでランディングページを3日で作成します維持費や手間を掛けずに、ランディングページを持ちたい！

ココナラでhtml/cssに特化した作業を提供してみようと思います。

簡単なHTML/CSSコーディングを格安で行います HTML/CSSに特化したコーディングを低価格で提供！

営業についても、手探りですが、がんばっていってみよっ

2021-06-28

【86日目】お久しぶりです！続いてますよ！

codestep jQuery標準デザイン講座クラウドワークスココナラドットインストール先月振り返り＆今月目標

お久しぶりです。
6月12日の70日目から更新がなかったこのブログでしたが、ぼちぼち再開します。
「あいつ、消えたな」いつのまにかフェードアウトする人もいるweb制作あるあるに埋もれないよう、がんばります。

推奨「今日のミルフィーユ」

まずはここまでのコーディングのお勉強をまとめておきましょう。
ツイッターなどではよく「積み上げ」と言っていますが、この言葉使いたくないんです。
なんだか煉瓦のような重たいものを、汗かきながら、上に載せていくイメージないですか？
今にもバテそうな気がして。

そこで私は「積み上げ」のかわりに「ミルフィーユ」言っています。
毎日少しづつでもいいので、一枚一枚載せていくことで、いつか美味しく食べられますよ。

https://twitter.com/pocochallenge/status/1406029294875283457

今日までの学習振り返り

そろそろ90日になるので、ここまでの学習振り返ってみましょう。

04月01日からコーディング学習スタート
3ヶ月後の6月30日にhtml/css + αのスキルを身につけることを目標
4月：ドットインストールのhtml/cssを終了
5月：codestepの練習問題の精読開始
5月：javascriptの学習を開始
5月：jQueryの学習を開始
6月：書籍『jQuery標準デザイン講座』購入、精読開始
6月：書籍『セールスライティングハンドブック』購入、精読開始
6月：codestepの入門編、初級編の精読終了
6月：ココナラにコーディングスキル販売開始　←ダメ元
6月：クラウドワークスでコーディング案件 ←ダメ元

[itemlink post_id="4392"]

[itemlink post_id="4390"]

精読とは

5月から、codestepというコーディング学習サイトの課題を「精読」しています。

外国語の学習で「多読と精読」ということがあります。
「多読」は、たくさんの文章を理解することで、その外国語の感覚を身につけようという学習方法です。
いっぽうで「精読」は、一行一行の文章の文法や言い回しを、畑を耕すようにきちんと理解して読んでいこう、という学習法です。

コーディングの学習にも同じようなことが言えて、ツイッターでも「コードの理解は6割でいいからどんどんこなせ」という話をよく聞きます。
それもスキルアップには欠かせないでしょう。

しかし、私が最終的に目指すのは「お金になる案件獲得」です。
お金を払ってもらってコーディングをする際に「6割の理解で作成しました」とはとても言えない。
そんなお金のもらい方はしたくないのです。

そのために「その一行はなんで書かれているのか」を理解しながら学習する、それが精読です。
コーディング学習に多くの時間を割ける人は多読でも良いですが、「本業＋副業＋コーディング学習」の私のようにあまり時間がない人は、精読がよいのではないかなぁと思っています。
時間がないからこそ、時間のかかる勉強方法が「急がば回れ」な気がします。

しかし初学者でいきなり複雑なサイトは作れませんので、その意味でもcodestepのようなサイトは、ほんとうに助かっています。

https://code-step.com/

今後の予定

目標としている3ヶ月が経ちますので、今後の目標を立ててみました。

今年中に

ワクチン接種の増加につれて、コロナ禍の状況も変化してきました。
私の本業「航空、旅行業界」もだんだんと利用者が戻ってくることでしょう。
コロナ禍のおかげで「副業はライティング＋コーディング」と考えることもできました。

コーディングスキルが上達してきて、ライティング同様副業として成り立つようになれば、本業との兼ね合いも考え直してもいいかなぁと思っています。

7月の目標

『jQuery標準デザイン講座』終了
ポートフォリオ作成
営業活動本格化
メンター探し検討

90日をめざして

いったんは、7月1日の90日目をめざして、がんばっていきます。
ミルフィーユのように薄く重ねていますが、コツコツとやっていきましょう。

2021-06-12

【70日目】ここまでの振り返り

【雑談】 codestep progate しまぶーのIT大学ドットインストール先月振り返り＆今月目標

4月の初めに

「ライティングスキル」と「コーディングスキル」を掛け合わせられるweb製作者になりたい

と思い始めたコーディング学習。ここまでを振り返っておきます。

5月10日にドットインストールのhtml/cssの講座終了→javascriptに進む
5月15日からcodestepの入門編模写を始める→現在初級編
6月04日にドットインストールのjavascript講座終了→イマイチよくわからない
6月05日Youtube「しまぶーのIT大学」でjavascriptのイメージがかわる
6月05日ドットインストールで実践的javascript講座の受講を始める
6月08日javasriptでおみくじをつくる
6月09日progateでjQueryの学習を始める
6月11日codestep初級編１を完成させる

これからの予定

codestep初級編：６月中に終わらせる
progate/jQuery：６月中に終わらせる

おかげさまで、みなさんに励まされ、おだてられながら、毎日欠かさず学習を続けられています。
ありがとうございます。

2021-06-12

#codestep 初級編1 portfolio「画像のmedia属性」

【codestep】 codestep入門編1:profilesite media属性画像

 <div id="mainvisual">
        <picture>
          <source media="(max-width: 600px)" srcset="img/mainvisual-sp.jpg">
          <img src="img/mainvisual-pc.jpg" alt="テキストテキストテキスト">
        </picture>
      </div>

mediaリソースの志向するメディアのメディアクエリ。この属性は <picture> 要素の内部でのみ使用します。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/source

CSSやJavaScriptを使用していないことに注目をしてください。ポイントは、media属性です。media属性の値には、CSSのメディアクエリーで使用する値と同様の値を記載することができます。img要素には、デフォルトの画像ファイルを、そして2つのsource要素は、各media属性の値にマッチした条件下で使用される画像のファイルが指定されています。
https://www.internetacademy.jp/blog/ja/2016/04/20160417-hiroki.html

2021-06-12

#codestep 初級編1portfolio　「フォームまとめ」

【codestep】 codestep初級編1portfolio form

初出でしたので、まとめておきました。

<section id="contact" class="wrapper">
        <h2 class="sec-title">Contact</h2>

        <form action="#" method="post">
postは本文で送信。初期値はget(urlで送信)

          <dl>
            <dt><label for="name">NAME</label></dt>
labelタグのfor属性の値と、フォーム部品のid属性の値を同じにすることで両者の関連付けができる　https://html-coding.co.jp/annex/dictionary/html/label/
            <dd><input type="text" id="name" name="your-name"></dd>
type属性で動作が大きく変わる。指定しなければtext。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/input
name属性は、データ化した時などにアクセスしやすくするためにつける。
https://www.osaka-kyoiku.ac.jp/~joho/html5_ref/name_attr.php

            <dt><label for="email">E-mail</label></dt>
            <dd><input type="email" id="email" name="your-email"></dd>

            <dt><label for="message">MESSAGE</label></dt>
            <dd><textarea id="message" name="your-message"></textarea></dd>
          </dl>

          <div class="button"><input type="submit" value="送信"></div>
        </form>

      </section>
    </main>

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
CSS
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

/*-------------------------------------------
Contact
-------------------------------------------*/
#contact dl {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
#contact dt {
  width: 15%;
}
#contact dd {
  width: 85%;
  margin-bottom: 10px;
}
//横に並べて、dtとdd合計で100％になるように幅を決めることで、表になる

#contact dd input,
#contact dd textarea {
  width: 100%;
  border: solid 1px #c8c8c8;
  padding: 10px;
}
// 幅いっぱいに枠を付けたい。paddingを設定して、枠線をつける

#contact dd textarea {
  height: 10rem;
}
// textareaの高さ指定

#contact .button {
  text-align: center;
}ｘ
//送信ボタンは左右中央

#contact .button input {
  width: 200px;
  background-color: #24292e;
  color: #fff;
  padding: 15px 0;
  border: solid 1px #24292e;
}
//ボタンの仕様を決める

#contact .button input:hover {
  background: #fff;
  color: #24292e;
}
//hoverした時の変化を決める