月: 2021年2月

3つ目の模写サイトができました！
どうも、すなです。

前回に引き続き、また新しい模写のポートフォリオができました。

今回も制作するに当たってのポイントを話したいと思います。

架空の病院のサイト

今回もシリーズ「大学卒業までに20万/月を稼ぐ人の話」になります。

まだ見ていない方は、前回の記事はこちらになります。

https://sunablog.tokyo/2021/02/23/post-670/

完成した模写サイト

3つ目に制作した模写サイトは架空の町の医院のサイトになります。

早速ですが、完成品がこちらになります。

はにわまんさんの元サイト

今回、僕ははにわまんさんのこちらのサンプルサイトを参考にしました。

技術的にはそこまで高くない

今回の模写で用いたスキルや詰まったポイントなどを話したいと思います。

HTML&CSSのみ

3回目の模写で使ったスキルは以下になります。
- HTML
- CSS
これだけでした。

JavaScriptやPHPなどの動作確認をしなくてよいので、元のサイトをひたすらに書き書きする作業がメインでした。

全ページは5枚

ページ数は5枚と今回は多めになりました。

ページ間の構造は以下になります。
- トップ
  - 病院の紹介
  - 施術の案内
  - スタッフの紹介
  - アクセス
作業時間は12時間

今回は枚数自体が多かったので、単純計算その枚数分作業時間が増えてしまいました。

しかし作業自体はあまり難航することなく、今回はスラスラと書くことができました。

昔の感覚がだいぶ戻ってきています。

作業量を減らすためにした工夫

今回は5枚分ページを書いたのですが、真っ当に全部書いているともっと時間がかかると思ったので、今回は書くのに少し工夫をしました。

サイトを見ていただいた方は分かると思うのですが、5枚それぞれのページでは共通している箇所(ヘッダーやフッター、メニューなど)があります。

それを今回は逆手(?)に取り、1箇所で作って他の箇所にも転用することで時間と作業量を削減しました。

cssファイルを2つ読み込む

基本的に1つのHTMLファイルに対しては1つのcssファイルを読み込むのが普通なのですが、今回は
- 共通用のcssファイル
- 個別用のcssファイル
を用意して、先に「共通用のcssファイル」を読み込んで、後から「個別用のcssファイル」を読み込むことにしました。

今回のサイト模写ではこれが特に有効で、共通用cssファイルを用意したことで個別用ファイルの分量をかなり少なくできました。

レスポンシブにも対応

今回も同様に、全てのページでレスポンシブ対応をさせました。

Font Awesomeとパンくずリスト

今回のサイトでは今までで目立って扱ってこなかったこれら2つの要素を扱いました。

模写についての記事なので、触りだけ紹介します。

Font Awesome

Font AwesomeはWebでできる、大量のアイコンを扱っているサイトです。

文字や記号などのアイコンはもちろん、ツイッターやフェイスブックなどのロゴも扱っています。

linkタグにFont Awesomeへのリンクを貼り、iタグとしてアイコンを簡単に導入できるので非常に使いやすく、オススメです。

今回はヘッダーロゴの病院のアイコンと、同じくヘッダーにある電話マークのアイコンにこのFont Awesomeのアイコンを使用しました。

パンくずリスト

パンくずリストとは、Webサイトに訪れたユーザーが今どこにいるのかを表したナビゲーションの一種です。

『ホーム>通販>事務用品>ハサミ』の様に階層的に現在地を案内します。

今回はページ数が多くなかったので、トップ以外のページで手作業でパンくずリストを作成しました。

7,8万が妥当(?)

ページ数こそ多いものの、今回の模写サイトはHTML&CSSのみの作業だけのサイトなので、案件を受注するとしてもそこまで単価は上げられないかなと思いました。

作業時間の割りには安いかもですが、でもそこら辺の普通のアルバイトと比較したら断然マシなので、めげずにWebサイト制作を頑張りたいと思います！
2021年2月27日
2つ目の模写サイトができたので紹介します！
皆さん、こんにちは。

すなです。

今回も「大学卒業までに20万円/月を稼ぐ人の話」のシリーズ第二弾になります。

前回に記事をまだ見ていない方は、こちらをご覧ください。

https://sunablog.tokyo/2021/02/22/post-553/

2つ目のサイト模写が完成！

さて、今回も前回に引き続きサイト模写してポートフォリオを充実させようという話をしたいと思います。

前回制作した模写サイトは、HTMLとCSSのみを用いた簡単なものでした。

今回は第二弾ということで、技術的に少しだけレベルアップしたサイトを作成しました。

写真家のポートフォリオサイト

今回は写真家のポートフォリオサイトを想定したサイトを模写しました。

参考にしたサイトはこちらです。

これも前回と同様に、模写用に練習サイトを集めているこちらのサイトから見つけました。

実際に制作したサイトがこちら

このサイトを参考に僕が模写したサイトがこちらです。

こちらも前回と同様に、本家のサイトと同程度のクオリティを保てたかなと思っています。

所要時間約3時間

今回も体感時間にはなるのですが、所要時間は3時間程度で済んだかなと思います。

時間が大幅に短縮できた要因は、前回の第一弾からすぐに2つ目を制作したので感覚がだいぶ戻ったのと、スキル的には大きくはレベルアップしてないので、それもあると思います。

またレスポンシブ対応も慣れてきて、前回よりも早く作業することができました。

今回も1ページだけ

今回のページ数も1枚のみになりました。

HTML,CSSに少しのjQuery

このサイトで用いているスキルは以下の様になります。
- HTML
- CSS
- jQuery (=JavaScript)
今回のサイトは90%が前回と同様にHTMLとCSSのみで制作できるスキル感になります。

また今回は前回使わなかったJavaScriptを用いました。

ページ上部のメニューボタンを押すと、ページ下部の該当要素に遷移するのですが、その時にJSのanimate関数を用いたスムーススクロールを使用しました。

これでサイトが少し動的になりました(厳密には動的ではありませんが)。

PHPも使いたかった

ページの1番下に連絡を送る用のフォームがあって、こちらは本来PHPを使わないと機能しません。

僕個人は過去にPHPを扱っていたので、この機能自体は作成できるのですが、
- ((居ないとは思いますが)悪意あるユーザーによって不必要に)メールが送信されてしまう
- 使用するスキルを限定したかった
ので、今回はHTMLでフォームだけを作成して、機能面のバックエンドは何もしませんでした。

5万~円程度で受注できたら嬉しい

気持ち程度ですがjQueryを使用しましたし、本来はPHPでメールを送信できる機能も付けれるので、この程度のレベル感なら5万円程度で受注したいところですかね。

作業時間を短くできた

今回の大きな収穫は、作業時間を大幅に短縮できたことです。

これを作るにはなにをどうすればいい、って言うのがすぐにイメージできる様になったのが良かったです。

また使う言語も少しづつ増えてきているので、もっと色んなことをできるようになりたいですね！
2021年2月23日
html,cssでいい感じの「表」的なものを作る
こんにちは、すなです。

今回、サイト制作で学習した簡易的な表的なものの作り方を皆さんにも共有したと思います。

少しでもレパートリーに入れていただけたら嬉しいです。

こんな表を作りたい

今回、皆さんに共有したい「表的なもの」とは以下の様なものを指します。

「表的なもの」

上の画像は大阪でフリーランスエンジニアとして活動されている徳田優一さんのポートフォリオから拝借から拝借しました。

表と言えば表という様な、ゆるいした感じの表になります。

tableタグを使う

基本的にHTMLを用いて表を作成したいときは「tableタグ」というそれ専用のタグを用います。

簡易的に説明すると、trタグとth、tdタグというタグをtableタグと一緒に使って表を作成できます。

しかし今回はtableタグを用いずに、「dlタグ」を使って上記に様な表を作成したいと思います。

dlタグとは

dlタグは「Definition List」の略で、「定義リスト」を表すタグらしいです。

dlタグを用意して、中に定義する用語(Definition Term)を書くdtタグと、用語の説明(Definition Description)を書くddタグを用いてリストを作成します。
```
<dl>
    <dt>用語</dt>
    <dd>用語に対する説明</dd>
</dl>
```
ざっとはこんな感じです。

dlタグを使ってゆるい表を作る

今回は左側の名前の要素にdtタグを用い、右側の中身の要素にはddタグを用います。

実はdtタグとddタグをそのまま使っても、画像の様なレイアウトにはならないのでcssを用いていい感じのレイアウトにしたいと思います。

floatを使う

dtタグとddタグをデフォルトのまま使うと、いい感じにddタグが改行されて実はレイアウトが2行になってしまいます。

それを防ぐために、dtタグに対してfloat: left;を用いて要素を浮かせます。浮いたdtタグに対して、ddタグが回り込んで1列になります。

これだけだと、dtタグの長さに合わせたddタグが回り込むので、画像の様にddタグが綺麗に1列に並びません。

そこでddタグにmargin-left: 〇〇px;を追加して、左幅を揃えることができます。

具体的にはこんな感じです。
```
(HTML)
<dl>
    <dt>用語</dt>
    <dd>用語に対する説明</dd>
</dl>

(CSS)
dt {
    float: left;
}
dd {
    margin-left: 50px;
}
```
こんな感じでcssを追加してあげると、いい感じの表が作れます。

flexを使う

次はまた別のアプローチを紹介します。

デフォルトだと要素が改行されて2列になってしまうので、今回はdisplay: flex;を追加して1列にしたいと思います。

簡単に説明すると、display: flex;は要素を伸長・収縮させることができます。

ざっくり言うと、要素がふにゃふにゃになって伸び縮みしますよって感じです。

要素がふにゃふにゃになるので、要素は改行されずに1列になります。

親要素にdisplay: flex;を指定すると、子要素にはwidthでそのふにゃふにゃの幅を指定できます。

例えばdtタグが親要素の20%、ddタグが80%にしたいときは以下の様になります。
```
(HTML)
<dl>
    <dt>用語</dt>
    <dd>用語に対する説明</dd>
</dl>

(CSS)
dl {
    display: flex;
    flex-wrap: wrap;
}
dt {
    width: 20%;
}
dd {
    width: 80%;
}
```
細かいこと言うと、dlやddタグはデフォルトでcssが付いているので、それは適宜リセットしてください。

おすすめはどっち？

個人的には2つ目のdisplay: flex;を追加する方がいいかなと実感しています。

レスポンシブを使えば、ケータイで見るときのレイアウトも調整できるので(まあそれを言えば全部でできることはできるんですが)、全体としてやりたいことに対してアプローチがシンプルかなと思いました。

皆さんもWebサイト制作、是非一緒に頑張りましょう！
2021年2月23日
初めてサイト模写した結果
こんにちは、すなです。

今回は「大学卒業までに20万円/月を稼ぐ人の話」のシリーズの第一弾になります。

この記事では、大学生である僕が20万円を稼ぐまでどういう過程をイメージしているかを書いているので、こちらの記事も是非チェックしてみてください。

https://sunablog.tokyo/2021/02/11/post-297/

さて今回は、その過程でお話した「ポートフォリオ」を作るという話をします。

具体的には、僕がサイト模写で作成したサイトを紹介して、その模写にかかった時間や労力、技術のレベル的な話もできたらなと思っています。

今回は「初級レベル」のサイト模写

さて、ポートフォリオを作成するに当たって、僕は久々にWeb制作をすることになりました。

普段からプログラミングには触れているのですが、ただのプログラミングとWeb制作では(個人的には)全くアプローチや扱うジャンルが違うと感じます。

自転車の趣味サイト

暫くぶりにサイト制作することになったので、ウォームアップがてら最初に模写するサイトは初級程度のサイトにすることにしました。

今回、参考にしたサイトはこの趣味の自転車サイトになります(ちなみに、このサイトはサイト模写のやり方を調べるときに見つけたこのサイトから見つけました)。

恐らく趣味が自転車の人がプライベートで公開しているサイト、という想定のサイトになります。

多分、この方もサイト模写の一貫で作成したサイトだと予想しています。

実際の制作物はこちら

僕がこのサイトを参考にして模写したサイトはこちらになります。

本家のサイトとは同程度のクオリティを保てたかなと思っています。

所要時間は5時間

正確に計測はしていないのですが、このサイトを制作しきるのに体感で5時間程度かかりました。

久々のサイト制作過ぎて、昔ならスムーズにできた箇所で躓いて、時間がかかってしまいました。

この量で5時間は多分かなり遅い方だと思います(というか遅いです)。

ちなみに、サイト模写の際に僕が詰まった技術的なポイントも並行して別の記事にしていますので、そちらも合わせてご覧ください。

ページ数は1枚だけ

ページ数は1枚で、右上のリンクらしきボタンも同一ページに遷移するだけなので、サイト量はとても少ないです。

画像はフリー素材

サイトで用いている5つの画像は全て「Pixels」という自由に画像が使える海外の画像サイトから拝借しています。

最大画質でダウンロードしたので僕が模写したサイトでは少し画像に読み込みに時間がかかってしまいます(汗)。

HTML/CSSだけでok

こちらのサイトを制作するに当たって、僕が用いた知識は
- HTML
- CSS
だけです。プログラミング初心者でも時間をかければ作成できるレベル感のサイトを選びました。

少しだけ技術的な話で深掘りすると、ケータイでもレイアウトが崩れない様にレスポンシブ対応しました。慣れていない初心者の方だと、そこに時間がかかってしまうかも知れません。

加えてJavaScrpitやPHPも一切用いていないので、サイトには何も動きを加えていません。

1万円でも利益

僕は大学生で、現在のアルバイトの給料が1100円なので、この程度のサイトを1万円(かなり安い気はしますが)で受注して5時間で納品すれば、同じ時間アルバイトするよりも圧倒的に効率はいいです。

また今回の模写サイトは1枚だったので、中身が異なる他のページも複数枚制作すれば、単純計算でページ数分単価を上げられます。

いいスタートになった

JavaScriptもPHPも使用してない静的なページではありますが、昔に勉強したことや、新しい知識にも出会えて、いいスタートになったかなと思います。

少しづつサイトのレベル感を上げていって、クライアントにサイト制作を任せてもらえる様なエンジニアになりたいですねっ！
2021年2月22日
inline-blockを中央寄せする方法
どうも、すなです。

今回はWeb制作で用いるテクニックの一つになります。

内容はタイトルの通りで、「inline-block要素を中央寄せする方法」になります。

できそうでずっと躓いていたので、まとめました。

親要素にtext-align: center ;を用いる

先に結論を書いてしまいました。上記の見出しの通りです。

では詳しく解説。

inline-block要素自体は中央寄せできない

inline-block要素自体はblock要素とinline要素の中間的な存在で、両者の下記の特徴を兼ね備えています。
- block要素と同様に、要素自体にheightやwidth、またmarginとpaddingが指定できる
- inline要素と同様に、要素自体が流動的で複数のinline-blockと共に横並びになる
inline要素の特徴を持ちながら、block要素の特徴も持っている非常に優秀な要素です。しかし便利である一方でblock要素とは違い、要素自体が流動的で要素が左詰めになってしまいます。

要素自体ではなく、親要素にcssを用いる

inline-block自体には上記の様な特徴があるので、inline-block自体ではなく、その親要素に対してcssを追加します。

それが先にも言った通り、text-align: center;です。

具体的には以下の様になります。
```

<div>
    <span>こんにちは</span>
</div>

/* CSSファイル */
div {
    text-align: center;
}
span {
    display: inline-block;
}
```
親要素にtext-align: center;を適用することで子要素のinline-block要素が中央寄せされます。

これで皆さんもWeb制作マスターですっ！
2021年2月20日
左上にロゴ、右上に横並びliの方法
どうも、すなです。

今回の記事は忘備録に近いです。

久々にWeb制作をして、最初にぶち当たった壁だったので二回も同じことを調べる時間をなくすために書きました。

内容はタイトルの通りです。Webサイトにありがちな、
- headerの左上にロゴ(やタイトル)
- headerの右上には横並びになっているli
これを実装する方法を紹介します。やりたいことに対して、実装に意外と時間がかかってしまったので、これからはこれで解決したいです。

ulにfloat: right;を設置

上記の見出しに結論を書いちゃいました。もう少し詳細を話します。

例えば、以下の様なheaderがあるとします。これを横並びにします。
```
<div>
    <h1>Title</h1>
    <ul>
        <li>List1</li>
        <li>List2</li>
        <li>List3</li>
    </ul>
</div>
```
h1タグにタイトルが入り、その下のulタグにはリンクが入る想定のliタグが複数あります。このliタグにはfloat: left;でリストが横一列になるところまでは把握されている方、多いかと思います。

問題はその後です。今度はその横並びのliをh1タグと同じ高さで横一列にしたいですよね。その方法は以下です。
```
h1 {
    float: left;
}
ul {
    float: right;
}
li {
    float: left;
}
```
見出しにも書いた通り、左上に配置したい(今回で言う)h1タグに対してfloat: left;で配置、最後に横並びになっているliタグを囲っているulに対してfloat: right;でulタグごと右上に配置します。

これで皆さんもheaderのメニューのcssには迷わなくて済みますね！

それでは良いコーディングライフを。
2021年2月19日
大学卒業までに20万円/月を稼ぐ人の話
どうも、すなです。

人生で何回目か分かりませんが、親のおかげでまた春休みを頂くことになりました。お父さん、お母さん、いつもありがとうございます。

さて今回はそんな長期休暇を利用して、時間があり余っている大学生がプログラミングでお金を稼ごう、という話をします。

社会人になる前にスキルつけとこ！

やみくもに「稼ぐぞ〜！」と言っても、勝手にお金が銀行に振り込まれる訳ではないので、そのやり方を説明したいと思います。

案件受注までの流れ

理由などの説明はあとでするとして、先に結論から話します。下の流れが答えです。

月に20万円を稼ぐ
↑
例）10万円の案件を月に2つこなす
↑
①スキルを付ける
②営業する

ざっとこんな感じかなと思います。

スキルを付ける

エンジニアは専門職です。スキルを磨いて、常に自分の牙を磨いておかないといけません。ではWebサイト制作におけるスキルとは一体なんでしょう。個人的には以下のスキルがあれば大丈夫かなと思います。
- HTML/CSS
- JavaScript (≒jQuery)
- PHP
- ※wordpress
- ※SEO
基本的にはそのプログラミング言語を勉強しましょうという話なのですが、wordpressは言語ではなくPHPを用いたソフトウェアで、SEOもプログラミング言語ではないので、一応米印(※)にしておきました。これくらいできる様になれば、正味どこかしらのWeb制作の会社に就職できるくらいかなとは思います。

営業する

自分のスキルが十分にあってもそれを販売する方法がないと、せっかく身に付けたスキルも宝の持ち腐れです。それを周囲の人に宣伝して、Webサイトを制作して欲しい人とマッチしないといけません。僕が考える今できる営業方法は以下です。
- クラウドソーシング
- 知り合いなどに個人的に営業 (営業というかお手伝い)
- クラウドシーシング経由でWeb制作会社から受注
- ブログでプログラミングのことを発信しつつ、それを担保に受注
- 営業職の知人に副業的にWebサイト制作の営業もしてもらう
営業はやったことないのでどこまで現実的か分かりませんが、ざっと思いつくのはこんな感じでしょうか。

目標との差を埋めるために必要なこと

①今の僕に足らないスキル

リストアップしたスキル、すなさんは全部あるの！？って話ですが、残念ながら今の僕は持ち合わせていません。何が足りてて、何が足りてないのか一先ず整理しましょう。
- HTML/CSS → 十分、多分困らない
- JavaScript, jQuery → 最低限はできる、分からなくても調べたらできる
- PHP → 十分、インターン時代の専門言語だった
- wordpress → ダメ、今まで避けてきた
- SEO → ダメ、やったことないけどめちゃ興味はある
②営業するのに必要なこと

営業と言っても、先にリストアップした方法はクラウドソーシングを利用したり、それ経由でWeb制作会社から受注だったり、営業職の知人に代行してもらったりなので、実際に僕が足を動かして営業する訳ではありません。

じゃあ後は何が必要なのかと言ったら、相手に「この人だったら自分がほしいWebサイトを作ってもらえそうだな」って思ってもらうためのポートフォリオとそれを細分化した簡易的な見積書かなと考えました。

Webサイトが欲しい
→でもスキルがない
→外注して専門家に頼もう
→自分でできないからエンジニアに具体的な指示もできない

⇦「こういうことなら〇〇円でできますよ」と最初に自分の手札を見せて、相手に好きなものを選んでもらう(＝お店で店員さんにオススメを聞くときも、多分皆んな同じことをされてる)

直近でやること

よって①スキルを磨くのと、②ポートフォリオを充実させて、自分が何ができるのか(＝自分の商品)を理解することが、今は直近でやることかなと思いました。

具体的にはwordpressの勉強をして、そのスキルでポートフォリオを作る。実際に案件を獲得したら、練習で用いたサイトの代わりに実際の制作物をポートフォリオに組み込む。こんな感じかなと思います。

【結論】

結構殴り書きみたいな感じで書いちゃったんで、綺麗にはまとまってないかもですが、やりたいことは伝わったと思います。また進展があったら続きを書きたいを思います。ばいばい〜♪
2021年2月11日
アルコール消毒の仕組み、知らないっしょ？

こんにちは、すなです。

今回は僕のトリビアブログです。

2020年からCOVID-19(≒コロナウイルス)が世界中で流行して、特に高齢者を中心に多くの重症患者を出しています。この記事を書いている僕はまだ20代なので統計的には重篤化の可能性が低いですが、実家のおじいちゃんとおばあちゃんがずっと心配です。

現在はいわゆるコロナ禍で、頻繁に「アルコール除菌」や「アルコール消毒」という言葉を耳にする様になりました。このとき僕は”アルコール消毒ってどういう仕組みで殺菌してるんだろ”って疑問に思ったので、今回は「アルコール消毒の仕組み」について書きました。

エンベロープの有無による分類

2020年から流行しているCOVID-19ですが、どうやらこれは感染症(=ウイルスによって引き起こされる病気自体)のことを指す用語らしく、この感染症をひこおこすウイルスは「SARS-CoV-2」という名前らしいです。多分このSARS-CoV-2に感染するとCOVID-19が発症する、っていうニュアンスですかね。

また普段僕たちが呼んでいる「コロナウイルス」も実はウイルスの総称の1つで、コロナウイルスにはSARS-CoV-2以外の他のウイルスも含まれています(普段風邪をひくときのウイルスもコロナウイルスに分類されているらしいです)。

ウイルスを分類するときに、そのウイルスに「エンベロープ」があるかないかで区別することがあります。

ウイルスにはエンベロープ(envelope)という膜で覆われているものとそうでないものがあります。「Envelope」は英語で「封筒」を意味する単語ですが、エンベロープウイルスはエンベロープの中にカプシド(=タンパク質の殻)と核酸(=遺伝子)を含んでいます(エンベロープがないウイルスはこれらが露出しています)。このエンベロープには突起がついているのですが、コロナウイルスはこの見た目が王冠に見えるため、王冠を意味するギリシャ語の「corona」から命名されました。

ちなみにエンベロープを有するウイルスを「エンベロープウイルス」といい(そのままです笑)、一方でエンベロープがないウイルスを「ノンエンベロープウイルス」といいます(これもそのままです笑)。有名なエンベロープウイルスにはインフルエンザウイルスが、ノンエンベロープウイルスにはノロウイルスがあります。

アルコールでエンベロープを破壊する

SARS-CoV-2(新型コロナウイルス)もエンベロープを有しているため、エンベロープウイルスに分類されるのですが、このエンベロープは大部分が脂質で構成されています。よってエンベロープはアルコールなどの有機溶媒に溶けやすく、アルコール製剤の主成分であるエタノールで破壊されます。

エンベロープを破壊されるとウイルスは感染や増殖できなくなり、感染力を失います(=不活性化)。

上記の理由でアルコール製剤による消毒はコロナウイルスに有効だと分かっています。

逆にノンエンベロープウイルスはこのアルコール消毒に強く、アルコール製剤が効きにくいです。よってこれらのウイルスには塩素系消毒剤を用いて殺菌します。

他の方法によるエンベロープの破壊

有機溶媒を用いた消毒以外にもエンベロープウイルスを不活性化する有名な方法が存在します。それは石鹸による手洗いです。石鹸に含まれる界面活性剤はエンベロープの成分である脂質を分解して溶かすので、これもウイルスの不活性化に有効であるとされています。

【結論】

今回は「アルコール消毒がなんで有効なのか」について調べてみました。アルコールがウイルスを消毒する過程が気になっていたので、ある程度プロセスが理解できて良かったです。

でもまだ気になってるのは、「エンベロープを破壊すると殺菌できるなら、初めからエンベロープがないウイルスはどうなってるん？」ってところですかね。

5,6回目(?)の春休みなんで、発信がてらたくさん勉強していきたいですね。

2021年2月9日

月: 2021年2月

架空の病院のサイト

完成した模写サイト

はにわまんさんの元サイト

技術的にはそこまで高くない

HTML&CSSのみ

全ページは5枚

作業時間は12時間

作業量を減らすためにした工夫

cssファイルを2つ読み込む

レスポンシブにも対応

Font Awesomeとパンくずリスト

Font Awesome

パンくずリスト

7,8万が妥当(?)

2つ目のサイト模写が完成！

写真家のポートフォリオサイト

実際に制作したサイトがこちら

所要時間約3時間

今回も1ページだけ

HTML,CSSに少しのjQuery

PHPも使いたかった

5万~円程度で受注できたら嬉しい

作業時間を短くできた

こんな表を作りたい

tableタグを使う

dlタグとは

dlタグを使ってゆるい表を作る

floatを使う

flexを使う

おすすめはどっち？

今回は「初級レベル」のサイト模写

自転車の趣味サイト

実際の制作物はこちら

所要時間は5時間

ページ数は1枚だけ

画像はフリー素材

HTML/CSSだけでok

1万円でも利益

いいスタートになった

親要素にtext-align: center ;を用いる

inline-block要素自体は中央寄せできない

要素自体ではなく、親要素にcssを用いる

ulにfloat: right;を設置

社会人になる前にスキルつけとこ！

案件受注までの流れ

スキルを付ける

営業する

目標との差を埋めるために必要なこと

①今の僕に足らないスキル

②営業するのに必要なこと

直近でやること

【結論】

エンベロープの有無による分類

アルコールでエンベロープを破壊する

他の方法によるエンベロープの破壊

【結論】