すなぶろぐ

タグ: css

  • 4つ目の模写サイトが完成しましたっ！

    4つ目の模写サイトが完成しましたっ！

    皆さん、こんにちは。

    すなです。

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

    今回もサイトを模写するにあたって、ポイントや技術的なお話をできたらなと思います。

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

    https://sunablog.tokyo/2021/02/27/post-706/

    世界一周団体「TABIPPO」のモノづくりブランド

    今回、模写させていただいたWebサイトは、世界一周団体TABIPPOのモノづくりブランド、PAS-POLのサイトになります。

    PAS-SOLさんのWebサイトは旅の魅力を伝えつつ、モノづくりブランドとして自社で開発している商品の宣伝や、PAS-POLの企画を案内するニュースのページなどがあります。

    Webサイトは非常に綺麗で、デザインはまとまっていて、かなり見やすいのではないかなと思います。

    完成した模写サイト

    今回、模写した僕のサイトはこちらになります。

    元サイトを完全には模写していなくて、

    • トップページ
    • NEWSページ

    のみ模写しました。

    下層ページは似た様なレイアウトの横回しなので、スタミナを付けたいときは有効かもですが、ページの構成を勉強したい人にとっては多少時間の無駄かなと思いました。

    作業量が多かった

    今回のサイト模写で用いたスキルなどについて解説したいと思います。

    HTML&CSSとJavaScript

    今回のサイトで扱ったスキルは以下になります。

    • たくさんのHTML
    • たくさんのCSS
    • 少しのJavaScript(= jQuery)

    今回のサイトが今までのサイトと1番違う点は、1ページあたりのテキスト量がとても多いことです。

    過去のサイトはそこまでHTMLの量が多くなかったのですが、今回はかなり作り込まれたサイトだったのでまずそもそもの量が多かったです。

    レスポンシブ対応

    それに加えて、レスポンシブでレイアウトではなくデザイン自体が若干変わるので、それに対応するのが少し大変でした。

    画面幅が900px以下に時はheaderのメニューがアコーディオンメニューになるので、メニューを2回作る様な作業をしました。

    また下部に外部リンクも画面幅に応じて要素数が変わるので、これも対応するのが少し大変でした。

    レスポンシブ系で毎回重宝しているのは、やはり「display: flex;」ですね。

    こいつはかなり優秀です。

    数年前のBootstrapと同じ様な雰囲気を感じますが、最近はdisplay: flex;の様が覇権を握っている様な気がします。

    同じ内容が実装できれば中身はどちらでもいいと思いますが、もしまだ使ったことな人いたら是非display: flex;も使ってみてください。

    またheader付近にスライドがありますが、これはjQueryは使っておらずcssのみで実装しています。

    複数の画像を用意して、それらにtransition: all 1s ease-in-out;を適用しています。

    詳細を知りたい方は僕が参考にしたサイトを貼っておくので、そちらを参照ください。

    作業時間は50時間

    今回も体感なのですが、この模写サイトを制作するのに50時間くらいかかったかなと思います。

    ニュースの記事部分を全て一旦書き起こしているため、同じ作業が重複しているのも時間がかかった原因かと思います。

    時間の80%はWebサイト自体を制作するのに費やしました。

    残りの20%はそれをWordPress化するのに使いました。

    WordPressめっちゃ便利です

    今までずっと食わず嫌いして避けていたのですが、ちゃんと取り組んだらこんなに使いやすいのかとびっくりしています。

    これは余談なのですが、過去に俺のことをなんとなく嫌っていた人がいたのですが、ちゃんと僕と絡む様になったら今では大親友になったみたいな話が昔ありました。

    その時と似た感覚を覚えました（なんの話？）。

    WordPressはWeb制作をする上では避けては通れない道です。

    Web制作をする際にRuby on RailsやLaravelなどのフレームワークを勉強してちゃんとプログラミングを学習される方は、なんとなく「WordPressって逃げじゃん？」みたいな思い込みでWordPressを避けることがあると思います（僕はそうでした汗）。

    しかしCMS(= Content Management System)なだけあって、使いこなせる様になるとWP側で記事やレイアウトの管理(= Management)をしれくれるので、圧倒的に楽だと思いました。

    要は一度HTML&CSSなどのレイアウト、デザインを決めてしまえば、全ての投稿に同様のデザインが適用されるので、かなり便利です。

    10-15万円で受注できればおけ

    Webサイト制作会社の相場はもっと高いですが、個人でやっているのと、まだ駆け出しなので10-15万くらいで受注できれば全然アリなのではないかなと思っています。

    今回の模写では2ページ分しか模写していないので、実際はもう少し金額を上乗せできる様な気もします。

    先にも書きましたが、最近はWordPressの扱い方が少しずつ分かってきてプログラミングが楽しいと感じれらる様になりました。

    苦痛なく、しかもお金も頂戴できるのならば、これほど幸せなことはありません。

    ありがたいことに学生の長期休暇は勉強にうってつけなので、まだまだ吸収したいと思います！

  • 3つ目の模写サイトができました！

    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サイト制作を頑張りたいと思います！

  • 2つ目の模写サイトができたので紹介します！

    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万円程度で受注したいところですかね。

    作業時間を短くできた

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

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

    また使う言語も少しづつ増えてきているので、もっと色んなことをできるようになりたいですね！

  • html,cssでいい感じの「表」的なものを作る

    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サイト制作、是非一緒に頑張りましょう！

  • 初めてサイト模写した結果

    初めてサイト模写した結果

    こんにちは、すなです。

    今回は「大学卒業までに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も使用してない静的なページではありますが、昔に勉強したことや、新しい知識にも出会えて、いいスタートになったかなと思います。

    少しづつサイトのレベル感を上げていって、クライアントにサイト制作を任せてもらえる様なエンジニアになりたいですねっ！

  • inline-blockを中央寄せする方法

    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;です。

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

    <!-- HTMLファイル --->
<div>
    <span>こんにちは</span>
</div>

/* CSSファイル */
div {
    text-align: center;
}
span {
    display: inline-block;
}

    親要素にtext-align: center;を適用することで子要素のinline-block要素が中央寄せされます。

    これで皆さんもWeb制作マスターですっ！

  • 左上にロゴ、右上に横並びliの方法

    左上にロゴ、右上に横並び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には迷わなくて済みますね！

    それでは良いコーディングライフを。

  • 大学卒業までに20万円/月を稼ぐ人の話

    大学卒業までに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の勉強をして、そのスキルでポートフォリオを作る。実際に案件を獲得したら、練習で用いたサイトの代わりに実際の制作物をポートフォリオに組み込む。こんな感じかなと思います。

    【結論】

    結構殴り書きみたいな感じで書いちゃったんで、綺麗にはまとまってないかもですが、やりたいことは伝わったと思います。また進展があったら続きを書きたいを思います。ばいばい〜♪

  • ::beforeとは

    ::beforeとは

    Webサイト制作の勉強をしている時に、参考にしているWebサイトに「::before」という要素があった。見たことはあったけど、ちゃんとその機能について調べたことなかったから、気になって調べることにした。

    before要素とは

    表面的に言うと「cssの擬似要素」らしい。全然意味分からんから、もう少し深掘りしてみよう。

    擬似要素とは

    まず擬似要素ってなんやねん、って話。「MDN web docs」によると、擬似要素は

    CSSの擬似要素はセレクターに付加するキーワードで、選択された要素の特定の部分にスタイル付けできるようにするものです。

    https://developer.mozilla.org/ja/docs/Web/CSS/Pseudo-elements

    と書いてある。文字の説明だと全然分からんから、実例を見て理解することにする。例えばこちら。

    <p class="hello">こんにちは</p>
</style>.hello::first-letter {color: red;}</style>

    こんにちは

    上記の様にpタグで囲った「こんにちは」という文字列を、擬似要素でfirst-letterのcolorをredにすると、「こ」のみが赤色に変化する。

    次はこれ。

    <div>
  Hello, world!<br>
  This is Suna.
</div>
div::first-line {font-weight: bold;}
    Hello, world!
    This is Suna.

    こうやって書くと、divタグ中の最初の文章「Hello, world!」だけfont-weightがboldになる。

    要はHTML上では存在しない要素をcssで擬似的に作ることができるって感じかな。

    before要素で何ができるの？

    上記の例の様に、beforeを用いてできることを列挙してみる。

    <p class="line">私は2文目です。</p>
.line::before { content: "私が1文目だ。"; }

    私は2文目です。

    本来コード上では「私は2行目です。」という文字列しか存在しないけど、ブラウザ上では「私が1行目だ。」という文字列がpタグの「私が2行目です。」の前に表示される。

    また、beforeとコンビのafterをセットで使って以下の様な表記もできる。

    <p>初めまして。</p>
p::before { content: "「"; }
p::after { content: "」"; }

    初めまして。

    上記の様にcssを書くと、ブラウザ上では『「初めまして。」』と表示される。

    また「サルワカ」に書いてあったのだが、FontAwesomeのアイコンを上手い具合に表示できるみたい！テンションが上がって、日本語が下手過ぎるので、これも例を見せて紹介しようと思う。

    <p>これはブックマークです。</p>
p::before {
  font-family: "Font Awesome 5 Free";
  content: "\f02e";
}

    cssでfont-familyに「Font Awesome 5 free」、contentにFontAwesomeのunicodeを書くと以下の様にFont Awesomeのアイコンが文章の前に表示されます。

    これはブックマークです。

    この様にbeforeを上手に使えば、HTML自体を操作しなくても表現したい要素をcssで追加的に記述することができる。

    【結論】

    beforeを有効に用いることができると表現の幅が広がるねっ！よく調べてみると擬似クラスってものもあるらしい。今度はそれについても調べてみようかな。