4つ目の模写サイトが完成しましたっ！
皆さん、こんにちは。 すなです。 今回はシリーズ「大学卒業までに20万/月を稼ぐ人の話」の第四弾になります。 今回もサイトを模写するにあたって、ポイントや技術的なお話をできたらなと思います。 前回に記事をまだ見てない方は、こちらをご覧ください。 世界一周団体「TABIPPO」のモノづくりブランド 今回、模写させていただいたWebサイトは、世界一周団体TABIPPOのモノづくりブランド、PAS-PO […]
css
3つ目の模写サイトができました！
どうも、すなです。 前回に引き続き、また新しい模写のポートフォリオができました。 今回も制作するに当たってのポイントを話したいと思います。 架空の病院のサイト 今回もシリーズ「大学卒業までに20万/月を稼ぐ人の話」になります。 まだ見ていない方は、前回の記事はこちらになります。 完成した模写サイト 3つ目に制作した模写サイトは架空の町の医院のサイトになります。 早速ですが、完成品がこちらになります […]
2つ目の模写サイトができたので紹介します！
皆さん、こんにちは。 すなです。 今回も「大学卒業までに20万円/月を稼ぐ人の話」のシリーズ第二弾になります。 前回に記事をまだ見ていない方は、こちらをご覧ください。 2つ目のサイト模写が完成！ さて、今回も前回に引き続きサイト模写してポートフォリオを充実させようという話をしたいと思います。 前回制作した模写サイトは、HTMLとCSSのみを用いた簡単なものでした。 今回は第二弾ということで、技術的 […]
html,cssでいい感じの「表」的なものを作る
こんにちは、すなです。 今回、サイト制作で学習した簡易的な表的なものの作り方を皆さんにも共有したと思います。 少しでもレパートリーに入れていただけたら嬉しいです。 こんな表を作りたい 今回、皆さんに共有したい「表的なもの」とは以下の様なものを指します。 上の画像は大阪でフリーランスエンジニアとして活動されている徳田優一さんのポートフォリオから拝借から拝借しました。 表と言えば表という様な、ゆるいし […]
初めてサイト模写した結果
こんにちは、すなです。 今回は「大学卒業までに20万円/月を稼ぐ人の話」のシリーズの第一弾になります。 この記事では、大学生である僕が20万円を稼ぐまでどういう過程をイメージしているかを書いているので、こちらの記事も是非チェックしてみてください。 さて今回は、その過程でお話した「ポートフォリオ」を作るという話をします。 具体的には、僕がサイト模写で作成したサイトを紹介して、その模写にかかった時間や […]
inline-blockを中央寄せする方法
どうも、すなです。 今回はWeb制作で用いるテクニックの一つになります。 内容はタイトルの通りで、「inline-block要素を中央寄せする方法」になります。 できそうでずっと躓いていたので、まとめました。 親要素にtext-align: center ;を用いる 先に結論を書いてしまいました。上記の見出しの通りです。 では詳しく解説。 inline-block要素自体は中央寄せできない inl […]
左上にロゴ、右上に横並びliの方法
どうも、すなです。 今回の記事は忘備録に近いです。 久々にWeb制作をして、最初にぶち当たった壁だったので二回も同じことを調べる時間をなくすために書きました。 内容はタイトルの通りです。Webサイトにありがちな、 headerの左上にロゴ(やタイトル) headerの右上には横並びになっているli これを実装する方法を紹介します。やりたいことに対して、実装に意外と時間がかかってしまったので、これか […]
大学卒業までに20万円/月を稼ぐ人の話
どうも、すなです。 人生で何回目か分かりませんが、親のおかげでまた春休みを頂くことになりました。お父さん、お母さん、いつもありがとうございます。 さて今回はそんな長期休暇を利用して、時間があり余っている大学生がプログラミングでお金を稼ごう、という話をします。 社会人になる前にスキルつけとこ！ やみくもに「稼ぐぞ〜！」と言っても、勝手にお金が銀行に振り込まれる訳ではないので、そのやり方を説明したいと […]
::beforeとは
Webサイト制作の勉強をしている時に、参考にしているWebサイトに「::before」という要素があった。見たことはあったけど、ちゃんとその機能について調べたことなかったから、気になって調べることにした。 before要素とは 表面的に言うと「cssの擬似要素」らしい。全然意味分からんから、もう少し深掘りしてみよう。 擬似要素とは まず擬似要素ってなんやねん、って話。「MDN web docs」に […]