にゃんこ@マークアップの人

在宅フリーランスのマークアップエンジニア(2歳児育児中の元高校教師)。 翔泳社より『H…

にゃんこ@マークアップの人

在宅フリーランスのマークアップエンジニア(2歳児育児中の元高校教師)。 翔泳社より『HTML5&CSS3標準デザイン講座』好評発売中。コーディング案件ご依頼Welcome!! HTML, CSS, jQuery, Sass,Git,Gulp, ライトノベルカバーデザイン,講師

マガジン

  • アラフィフの引きこもりフリーランスが10kg以上減量した話

    約半年で10kg近く太ってしまったアラフィフの引きこもりフリーランスが一念発起して10kg以上の減量に成功した話を詳しく解説します。 運動嫌いでも50オーバーでも痩せられた実話です。「もう年だし無理…」と思っている人にこそ読んでもらいたいです!

  • Progateが教えてくれないフロントエンドの基礎知識

    未経験からフロントエンドを目指す人が、Progateの次に学ぶべきフロントエンドの基礎知識を分かりやすくまとめていきます。

  • 白黒ねこ's

    黒猫の小町と白猫の小夏のかわいらしい日常をお届けします( ´∀`)

最近の記事

アラフィフの引きこもりフリーランスが10kg以上減量した話【②作戦立案編】

みなさんこんにちは。通りすがりの引きこもりフリーランスです。 前回こちらの記事でダイエットを決意した経緯とザックリ実行した内容の紹介・9ヶ月後の成果をご紹介しましたが、今回からはより詳しく、どういう理由で具体的に何をしたのか個別に解説していきたいと思います。 太ってしまった原因分析ダイエットを開始するにあたって、まずはなぜこうなってしまったのか、原因を洗い出すことにしました。太る原因は人それぞれ。自分なりの原因を探ってみましたところ、色々と思い当たる節が出てきました。 ①

    • アラフィフの引きこもりフリーランスが10kg以上減量した話【①概要編】

      どうも、通りすがりの引きこもりフリーランスです。 突然ですが昨年(2022年)6月から一念発起してダイエットを始め、10kg以上痩せることに成功したので、どうやって達成したのかここに記録しておきたいと思います。40代、50代になってくると「何をどうやっても痩せない!」ということで諦めてしまう人も多いと思いますが、そんなことは無いということを身をもって知ったので、このnoteが同じ悩みを持つ方の何かの参考になれば幸いです…。 ダイエット前のスペックまず最初に私のスペックを記し

      • 幼稚園から保育園に転園することにしました。

        約2ヶ月前、こんな記事を書いて幼稚園に入れたことに対する後悔の念を吐露しておりましたが、結局7月1日から市内の私立認可保育園に転園することにしました。 これを書いている時点では内定通知が来ただけでまだ最終決定ではないし、幼稚園にも(今日通知が届いたばかりなので)まだ連絡いれていませんが、本人も転園先の保育園(※前の保育園のお友達がいる)に行くことを楽しみにしているようなので、まず間違いなく転園となるでしょう。 同じように幼稚園→保育園に転園を検討している保護者の方にとって

        • フルタイムだけど3歳から幼稚園か保育園か迷っている保護者の方に伝えたいこと

          結論から言うと、両親ともにフルタイムで働く家庭なのであれば、多少融通がきく仕事であっても保育園の方を第一選択肢としておいた方が親子ともに幸せである可能性が高いと現時点では考えています。 フルタイムで働く保護者に幼稚園はまだまだ優しくない今でこそ共働き家庭で預かり保育を利用して幼稚園に通わせるご家庭も増えてきましたが、それはまだまだ少数派であり、園内の様々なシステムや職員・保護者の考え方は旧態依然としているところの方が多いです。預かり保育の時間だけは長時間化していますが、

        アラフィフの引きこもりフリーランスが10kg以上減量した話【②作戦立案編】

        マガジン

        • アラフィフの引きこもりフリーランスが10kg以上減量した話
          2本
        • Progateが教えてくれないフロントエンドの基礎知識
          6本
        • 白黒ねこ's
          0本

        記事

          共著で執筆した書籍が発売されます!

          2020年8月28日、MdN様から発売の、 『初心者からちゃんとしたプロになるHTML+CSS実践講座』に 共著で執筆をさせていただきました。 この本は、Progateやドットインストール、他の初心者向け入門書などで HTMLとCSSの基礎を学んだはいいけど、実際にゼロから自分でコーディングしようと思うとどうしたらいいのか分からなくて途方にくれるという方にピッタリの内容になっています。 現場レベルで最低限必要なスキル・知識をまとめて紹介 近年初学者向けの学習教材が充実し、

          共著で執筆した書籍が発売されます!

          Progateが教えてくれない、デザインカンプからのコーディング手順

          Progateの道場コース、苦戦してる人多いみたいですね。課金中には道場までやらなかったのでちゃんと中身は精査できてないのですが、無料でできる範囲の初級編headerを作るところだけやってみても、「あ、こりゃ大変だわ」と思いました。 なにしろそれまであれだけ手取り足取り丁寧にお膳立てされた環境で学ばせていたくせに、道場になると手のひら返したように突然ノーヒントで「自由にやってね♪」となるわけですから、戸惑わないわけがないわけです。むしろ道場コースを何の問題もなくスラスラとク

          Progateが教えてくれない、デザインカンプからのコーディング手順

          世界一「雑」に説明するセマンティック・マークアップの手順(3)

          年末から怒涛のコーディング案件ラッシュでnote書いてる余裕が全くなったので、かなり間があいてしまいました。待っててくれた方(いるの?)ごめんなさい。というわけで、今更ですがProgateが教えてくれないシリーズ第5弾を投下します。 見出し、箇条書き、段落、セクション関連要素などで文書全体の情報構造をマークアップした後は、画像の挿入、リンクの設定、その他テキストレベルでの細かい意味づけなどを必要に応じて行います。 今回はこれらの細かいマークアップに関する注意点をまとめ

          世界一「雑」に説明するセマンティック・マークアップの手順(3)

          世界一「雑」に説明するセマンティック・マークアップの手順(2)

          前回の記事では、単純な文書を最低限セマンティックにマークアップする手順を解説しましたが、今回はそこから更に情報構造を肉付けしていってみたいと思います。 ただし、このnoteではあくまで出来るだけ楽に、でも不適切なマークアップにならないようにするための手順を示すことに主眼を置いているので、各要素の詳細な仕様や使い方の事例などは各自で調べるようにしてください。 コンテンツ情報をグルーピングする見出し、段落、箇条書きといった文書内の個別の要素の意味づけが終わったら、次にそれらのコ

          世界一「雑」に説明するセマンティック・マークアップの手順(2)

          世界一「雑」に説明するセマンティック・マークアップの手順(1)

          Progate卒業生のみなさん、こんにちは。「Progateが教えてくれないフロントエンドの基礎知識」シリーズの第一弾、第二弾が比較的好評だったようなので、調子に乗って第三弾を投下します。 今回は、見出しだけではなく一般的なWebページ全体を最低限セマンティックにマークアップするための、世界一(?)雑な説明をお届けします(笑) 見出し(h1〜h6)前回の記事に書いたとおり、一番基本的なHTMLのセマンティックを担保するための要素は「見出し」です。 1に見出し、2に見出し、3

          世界一「雑」に説明するセマンティック・マークアップの手順(1)

          Progateが教えてくれない、マークアップの考え方

          おまたせしました。「Progateが教えてくれないフロントエンドの基礎知識」シリーズ第二弾を投下します。今日はズバリ、「マークアップ」についてです。ProgateでHTMLの書き方を勉強した駆け出しの方に向けて、Web制作の現場で求められるマークアップの考え方を解説します。 HTMLを書く≠マークアップProgateを終了した方であればHTMLを書く事自体は特に難しいものではない、ということは理解していることと思います。 <h1>見出し</h1><p>段落</p><ul>

          Progateが教えてくれない、マークアップの考え方

          Progate修了!…で、どうすればいいの?

          Progate修了おめでとうございます。 これであなたもフロントエンドの第一歩を踏み出しましたね。ところで未経験からProgateでHTML/CSSを初めて勉強してみて実際どうですか? 簡単?難しい?感想は人それぞれだと思います。 Progateをやり終えた駆け出しの人からよく聞く声は、 「次に何をしたらいいのか分からない」 「いざ自分で何か作ろうと思っても何からやったらいいのか分からない」 というものです。 このnoteでは、未経験からProgateで初めてHTML/C

          Progate修了!…で、どうすればいいの?