文字を装飾するCSS 【font-size】 用途：フォントの大きさを変更する 使用例：font-size: 2.5px;　font-size: 2.5em; px：端末の設定が変わっても大きさが一定 em：端末の設定によって大きさが変わってくる 【font-family】 用途：フォントの種類を変更する 使用例：font-family: serif; 【font-weight】 用途：フォントの太さを変更する 使用例：font-weight: 100;(数字が大きいほど太くなる) 【color】 用途：フォントの色を変更する 使用例：color: #1b1b1b;(色はカラーコードで指定) 【text-align】 用途：文字の左寄せ・右寄せ・中央寄せを変更する 使用例：text-align: center; text-align: right; text-align: left; 画像や要素の縦幅、横幅調整 【width】 用途：横幅を変更する 使用例：width: 100%; width: 150px; 【height】 用途：縦幅を変更する 使用例：height: 100%; height: 150px; 画像や文章の位置調整 【margin-top】 用途：上との間隔を変更する 使用例：margin-top: 10px; margin-top: 15%; 【margin-left】 用途：右との間隔を調節する 使用例：margin-left: 10px; margin-left: 15%; 【margin-right】 用途：左との間隔を調節する 使用例：margin-right: 10px; margin-right: 15%; 【margin-bottom】 用途：下との間隔を調節する 使用例：margin-bottom: 10px; margin-bottom: 15%; 【margin】 用途：上下左右との間隔を一括で調節する 使用例：margin: 1px; margin: 10% 0% 10% 0%; 値が1つ指定された場合、上下左右に同じ値が適用される。 値が2つ指定された場合、1つ目の値は上下、2つ目の値は左右の辺に適用される。 値が3つ指定された場合、1つ目の値は上、2つ目の値は左右、3つ目の値は下に適用される。 値が4つ指定された場合、値はそれぞれ上、右、下、左の順 (時計回り) に適用される。 【padding-top】 用途：上部の余白を調節する 使用例：padding-top: 10px; padding-top: 15%; 【padding-left】 用途：左部の余白を調節する 使用例：padding-left: 10px; padding-left: 15%; 【padding-right】 用途：右部の余白を調節する 使用例：padding-right: 10px; padding-right: 15%; 【padding-bottom】 用途：下部の余白を調節する 使用例：padding-bottom: 10px; padding-bottom: 15%; 【padding】 用途：上下左右の余白を一括で調節する 使用例：padding: 1px; padding: 10% 0% 10% 0%; 値が1つ指定された場合、上下左右に同じ値が適用される。 値が2つ指定された場合、1つ目の値は上下、2つ目の値は左右の辺に適用される。 値が3つ指定された場合、1つ目の値は上、2つ目の値は左右、3つ目の値は下に適用される。 値が4つ指定された場合、値はそれぞれ上、右、下、左の順 (時計回り) に適用される。 【top】 用途：ページの最上部からの位置を調節する 使用例：top: 10px; top: 15%; 【left】 用途：ページの最左部からの位置を調節する 使用例：left: 10px; left: 15%; 【right】 用途：ベーシの最右部からの位置を調節する 使用例：right: 10px; right: 15%; 【bottom】 用途：ページの最下部からの位置を調節する 使用例：bottom: 10px; bottom: 15%; ※margin-topとtopの違い margin-top：上にある要素との間隔を調節する →縦に2つ並んだ画像の間隔を開けたい場合に使用する top：ページ全体での上からの位置を調節する

「ブロックレベル要素とインライン要素ってどう違うの？」 ということを聞かれた時、 ブロックレベル要素は親要素の横幅いっぱいに広がって改行が入る。他の要素を中に入れられる。高さや幅を自由に変更できる。 インライン要素は、改行が入らない。他の要素は中に入らない。高さや幅は要素の長さ次第で、変更はできない。 というような答え方をしたら、 「それは本質的じゃない。もっと概念から考えるといいよ」 とアドバイスをもらいました。 それから、本質ってなんやねん？と思いながら色んなサイトを巡って考え、 自分の言葉にできた時に、初めてこの二つの要素を理解できた気がしたので、自分なりの考え方をまとめてみました。 対象 HTMLやってるけどブロックとインラインがうまく理解できない初学者 ブロックとインラインについて、自分なりにしっくりくる説明が見つかっていない人 参考サイト 私は以下のサイトでブロックレベル要素とインライン要素を理解しました。 すごくわかりやすいです。ここで理解できればここから下はスクロール不要です。 MDN：ブロックレベル要素 MDN：インライン要素 WebMedia：【基礎知識】ブロックレベル要素・インライン要素の性質と違い ブロックレベル要素・インライン要素とは 私はブロックレベル要素とインライン要素を以下のように考えています。 ブロックレベル要素 ブロックレベル要素は、他の要素を格納するための大きな箱。 インライン要素 インライン要素は、箱の中で機能する小さな部品。 なぜブロックレベル要素は箱なのか ブロックレベル要素の役割は、他の要素を格納することです。 家で例えればタンスや本棚といったところでしょうか。 これらの箱には明確な役割があります。 タンスには服を。本棚には本を。 その辺りが雑になると汚い部屋になるのはイメージしやすいと思います。 HTMLも同じです。 bodyやarticle、tableなど、ブロックレベル要素にも様々な種類がありますが、 その箱の役割に合わせて、適切に他の要素を格納することで、コンテンツにまとまりが生まれ、綺麗に整理されたWebページを作ることができます。 なぜインライン要素は部品なのか 一方、インライン要素はそれ自体が機能を持った単体の部品です。 家の例で言えば前述した服や本、時計やペンなどが該当しそうです。 箱であるブロックレベル要素の中で、その箱の持つ役割に合わせて配置することで、Webページを装飾したり、様々な機能を加えることができます。 ブロックレベル要素とインライン要素の違いはどこから生まれる？ ボックスレベル要素 = 箱 インライン要素 = 部品 として考えると、冒頭の機能の違いが生まれる理由について、しっくりくるんじゃないかと思います。 ブロックレベル要素 箱だから他の要素を格納できる。 箱の内外を区別しているため前後には改行が入る。 他の要素を格納するため、高さや幅を自由に設定できる必要がある。 インライン要素 単体の部品だから他の要素は格納できない。 単体の部品のため改行が入らない。だから他の部品（インライン要素）と横並びにできる。 それ自体で完結しているため、高さや幅は決まっている。 最後に 自分自身が初学者なので、本当に伝わるのかいまいちピンと来ませんが、誰かの役に立てば嬉しいです。 インライン要素の「部品」という言い方について、もっとうまい言い回しはないかなーと思いながらここまで書きました。うまい表現があればぜひ教えてください。 備考 HTML5では「ブロックレベル要素」「インライン要素」という区分はなくなり、「コンテンツカテゴリー」という分類になっているようです。それぞれの分類の中で、ブロック要素にあたるもの・インライン要素にあたるもの、があるようです。

1. はじめに フロントエンドを始めたばかりの頃、参考書や参考サイトで当然のように使われているものの、特に說明がないような「慣習」や「テクニック」に困惑したり、その理由が気になった経験を思い出したので、その一部を簡単にまとめてみました。 2. HTML 2-1. iタグでアイコン <i class="icon"></i>テキスト HTML の興味深いテキスト要素 (<i>)は、何らかの理由で他のテキストと区別されるテキストの範囲を表します。例えば、技術用語、外国語のフレーズ、架空の人物の思考などです。英文においてはよく斜体で表示されるものです。 <i>: 興味深いテキスト要素 - HTML: HyperText Markup Language | MDN 仕様上は適切な使用方法ではなさそうですが、「Bootstrap Icons」や「Font Awesome」などでも採用されているように、普及している印象があります。 ちなみにHTML4.01ではテキストを斜体（イタリック）にするものとして定義されていました。 2-2. ボタンのマークアップ <a href="#">こちらをクリック！</a> <button type="button">こちらをクリック！</button> そのボタンがリンク機能を持つ場合はaタグで、それ以外はbuttonタグを使用することが多いです。 inputタグにもtype="button"がありますが、デザイン調整のしづらさ（疑似要素が使えない）からあまり使われることはありません。 divやspanでも作成できますが、フォーカスが効かない、エンターキーやスペースキーでの操作ができない、スクリーンリーダーに対応していないなどのデメリットがあり、別途対応の手間がかかってしまいます。 ちなみにbuttonタグのtypeを明記しない場合はsubmitが既定値になります。 ボタンは<button>で実装しよう - Qiita 2-3. 一部分だけタグが改行されていない or タグ間の謎のコメントアウト <ul> <li>hoge</li><li>fuga</li><li>piyo</li> </ul> <ul> <li>hoge</li><!-- --><li>fuga</li><!-- --><li>piyo</li> </ul> display:inline-block;は横並び時に不要な隙間ができてしまうので、それを防止するテクニックのひとつです。 他者が作成した上記のようなHTMLをメンテする際、その意味を確認せず整形したりコメントアウトを除去してしまうと、デザイン崩れを引き起こす可能性があります。 そのため基本的にはCSSでの対応がおすすめです。 inline-blockの隙間をなくす方法 - Qiita 2.4. scriptタグをbody閉じタグ直前に設置 <body> ... <script src="hoge.js"> </body> scriptタグはhtmlのどこにでも記述可能ですが、JavaScriptの読み込み中はレンダリングがストップしてしまい表示が遅くなってしまうということと、JavaScriptでDOM操作をする場合、DOM構築が完了している必要があるため、scriptタグをbody閉じタグ直前に設置するという慣習が生まれました。 ちなみにheadタグ内にscriptタグを記述した場合でもdefer属性をつけることで上記の問題は解決できます。 <script>: スクリプト要素 - HTML: HyperText Markup Language | MDN 3. CSS 3-1. クリアフィックス .clearfix::after { display: block; clear: both; content: ""; } 最近では要素の横並びはFlexboxを使用する機会が増え、floatを使うことは少なくなりましたが、これはfloatを解除するためのテクニックです。 float適用要素もしくはそのラッパー要素のafter疑似要素で解除することで、次に続く要素の先頭での解除を不要にします。 overflow: hidden;でも解除できますが、内包要素が親要素からはみだすようなデザインの場合には不向きです。 IEが非対応ならdisplay: flow-root;という方法もあります。 Clearfix · Bootstrap v5.0 3-2. 表示上は何も変わらないtransform設定 transform: translate3d(0,0,0); transform: translateZ(0); backface-visibility: hidden; これらの設定によりCSSアニメーションにGPU処理が取り入れられるようになり、アニメーションがスムーズになるケースがあります。 また、最近では以下のようなプロパティによる設定方法もあります。 will-change - CSS: カスケーディングスタイルシート | MDN しかしこれらはいずれも乱用すべきテクニックではないため使用には注意が必要です。 CSS アニメーションについて深く知る - Qiita 3-3. ズーム率を等倍 zoom: 1; IE7までは内部にhaslayoutという値をもっており、これがデフォルトでfalseだったため、レイアウトが崩れるという事象がありました。 上記コードによりtrueへと変更することで、レイアウト崩れを直せるケースがありました。 目にすることはあっても、もう自分で書く機会はないと思います。 4. JavaScript 4-1. for文のカウンタ変数「i」 for (let i = 0; i < 9; i++) { console.log(i); } FORTRANという世界最初の高水準プログラミング言語があり、その言語では変数名は一文字だけしか使用できず、そのうち整数をあらわすものはI～Nの６個だけだったことによる慣習らしいです。 Index,Iterator,Integerなどの頭文字というわけではなかったんですね。 iのほかにもそれに続くj,kなどが使用されたりします。 なぜループカウンタ変数のほとんどに “i”が使用されるのか？ - Qiita 4-2. $から始まる変数 const $hoge = $('.hoge'); 先頭に「$」を付与することで、ひと目でjQueryオブジェクトが格納されていることがわかります。 4-3. that, _this, selfという変数名 const that = this; thisの参照を保存するためによく使われる変数名ですが、Airbnbのスタイルガイドでは アロー関数かFunction#bindを利用すること が推奨されています。 4-4. アンダースコアから始まる変数・関数名 const _hoge = 'hoge'; function _doSomething() {…}; JavaScriptには仕様上、アクセス修飾子（public,private,protected,static）がないため、プライベート（ローカルスコープ内だけでの使用を想定）であることを明示したいときなどに使われることがあります。 また「_this」のように予約語を回避するために使用されることもあります。 ちなみにAirbnb JavaScript スタイルガイドでは、 JavaScriptは、プロパティやメソッドについてのプライバシーの概念を持っていません。先頭のアンダースコアは「非公開」を意味する一般的な規則ですが、実際にはこれらのプロパティは完全に公開されているため公開APIの一部です。この規約により、開発者は変更が壊れているとは見なされない、またはテストが必要ではないと誤って考える可能性があります。 として、「末尾または先頭のアンダースコアを避ける」ことが推奨されていました。 4-5. クラス名はアッパーキャメル class HogeFuga {...} const hogeFuga = new HogeFuga(); ちなみにAirbnb JavaScript スタイルガイドにも オブジェクト、関数、インスタンスにはキャメルケース（小文字から始まる）を使用すること。 クラスやコンストラクタにはパスカルケース（大文字から始まる）を使用すること。 と明記されています。 クラス名をアッパーキャメル（パスカルケース）にしておくと、インスタンス化する時にローワーキャメル（キャメルケース）にするだけでいいという利便性もあります。 4-6. 定数は大文字 const HOGE_FUGA = 42; 定数は大文字をアンダースコアでつないだアッパースネークケースで書かれることがあります。 MDNには 定数は大文字または小文字で宣言することができますが、すべて大文字で宣言するのが慣例です。 と書かれておりますが、Airbnb JavaScript スタイルガイドでは、 ファイル内の定数には大文字を使用しないでください。ただしエクスポートされた定数には使用する必要があります。 となっています。 4-7. 即時関数によるスコープ ;(function() {...})(); 即時関数（即時に実行される関数式）により、スコープを作るテクニックです。 スコープとは「変数の名前や関数などの参照できる範囲を決めるもの」です。 functionの前に「(」があるのは、これがないと関数式ではなく関数宣言だと構文解析されエラーになってしまうから（+や!などが使われているパターンも）。 先頭に「;」が付けられていることもありますが、これはファイル結合された場合、直前のファイルの最後にセミコロンが抜けていると構文エラーになってしまうことを防止するためです。 (function($){…})(jQuery);のように引数が渡されている場合もありますが、これは変数$の衝突を回避するためです。 4-8. 名前空間パターン const Hoge = window.Hoge || {}; Hoge.Fuga = function() {...}: グローバル空間に公開するオブジェクトを最小限にし、予期せぬ名前の衝突を防ぐテクニックです。 「||」は論理和演算子で、左辺と右辺のいずれかがtrueの場合trueとなり、その値を返却します。 つまり「もし変数Hogeがすでに設定されていたならそれを流用し、未使用なら新規オブジェクトを代入する」ことにより、すでにある変数の上書きを回避します。 5. その他 5-1. ほげ const ary = ['hoge','fuga','piyo']; メタ構文変数（メタこうぶんへんすう、metasyntactic variable）はプログラミング言語の記述で使われる識別子の一種。サンプルプログラムなどで意味のない名前が必要な場合に利用される、「意味のない名前」であることが広く知られた識別子のことである。 メタ構文変数 - Wikipedia https://ja.wikipedia.org/wiki/%E3%83%A1%E3%82%BF%E6%A7%8B%E6%96%87%E5%A4%89%E6%95%B0#hoge%E3%81%A8piyo 日本で主に使用されているメタ構文変数です。 由来についてはいくつか仮説があるものの、よくわかっていないようです。 使用する順番が決まっており、たとえばいきなりfugaから使用するということはありません。 ちなみに英語圏ではfoo,bar,bazなどが採用されています。 5-2. 英文のダミーテキスト「Lorem ipsum」 <p>Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> lorem ipsum（ロレム・イプサム、略してリプサム lipsum ともいう）とは、出版、ウェブデザイン、グラフィックデザインなどの諸分野において使用されている典型的なダミーテキスト。書籍やウェブページや広告などのデザインのプロトタイプを制作したり顧客にプレゼンテーションしたりする際に、まだ正式な文章の出来上がっていないテキスト部分の書体（フォント）、タイポグラフィ、レイアウトなどといった視覚的なデザインを調整したりわかりやすく見せるために用いられる。 lorem ipsum - Wikipedia https://ja.wikipedia.org/wiki/Lorem_ipsum もとは古代ローマの政治家・哲学者キケロの『De finibus bonorum et malorum』（善と悪の究極について）という著作から取られているそうです。 デザインよりも文章の内容に意識が集中しないようにするための工夫です。 ちなみにHTMLやCSSを省略記法で簡潔に記述するためのツール「Emmet」に対応したエディタで、「lorem」と入力し変換すると、毎回、ランダムなlorem ipsumを生成してくれるので便利です。 5-3. TODOというコメントアウト // TODO: totalはオプションパラメータとして設定されるべき。 // FIXME: グローバル変数を使用するべきではない。 アノテーションコメントといい、問題を指摘して再考を促す場合や、問題の解決策を提案する場合に使用されます。 上記以外にも種類があり、エディタによってはこれらをハイライトや一覧で見ることができます。 TODO: 以外のアノテーションコメントをまとめた - Qiita 5-4. READMEファイル名を大文字にする README.md リードミー（Readme）とは、ソフトウェアを配布する際の添付文書のひとつ。配布物の一般的な情報を記載したファイルである。多くの場合、そのソフトウェアをインストールし使用する前に読むべきものとされている。 リードミー - Wikipedia https://ja.wikipedia.org/wiki/%E3%83%AA%E3%83%BC%E3%83%89%E3%83%9F%E3%83%BC なぜ大文字なのかということについては、「目立つから」「並び順が小文字よりも先になるから」といった理由が散見されました。 6. おわりに まだまだ挙げればキリがありませんが、あらためて感じたことは、たいていの慣習にはなんらかの理由や目的があるということでした。 このような慣習に対する深い理解は、応用や発展に向けて有用だと思いました。 7. 参考サイト Bootstrap · 世界で最も人気のあるフロントエンドフレームワーク 開発者向けのウェブ技術 | MDN Airbnb JavaScript スタイルガイド() { | javascript-style-guide javascriptイディオム集 JavaScript イディオム集

前に作った「読みやすさチェッカー」を応用して コードネームのテキストを、簡単に移調するウェブアプリを作りました！ 機能 入力したコード進行を、任意のキーやディグリーネームへ一瞬で書き換えられます。 想定している用途 ・コード進行メモを別のキーへ変更する →オリジナル曲などのキーを変更したくなったとき、いちいち書き直す必要はありません。 テキストを貼り付けてキーを設定するだけでOKです。 ・コード進行のアイデアメモをディグリーネームへ変換する →良さそうなコード進行をディグリーネームでメモしたいときありますよね。 変換後のキーを「ディグリーネーム表記」にすれば簡単に変換できます。 便利過ぎて、草。 今までの人生で、コード進行のメモを別のキーへちまちま書き換える作業を何度やったか分かりません。 でも、もうやる必要は無くなりました。これを使えば一瞬で終わるので！！ ぜひ使ってみてください！(๑˃̵ᴗ˂̵)و

まずは完成品をどうぞ 渋谷のギラギラ感を出したかったのでネオンライト風CSSを使った。 スクロールするとこんな感じ。 試しにGoogleMapAPIも使ってみた。 スマホで見るとちょっとデザインが変わります。 実際にWeb公開しているURLはここです。 ちょっと重たいかも。 作り方 まずは作った動機 vue-CLIとGitHub Pagesの組み合わせで簡単にweb公開できることを知って 試しに何か作ってみたくなったというお話。 総制作時間6時間くらいで、もちろん費用はかかっていない。 結局一通り出来上がってからレスポンシブやらなんやらの調整に一番時間かかった。 割と見た目ができていればOKくらいの気持ちで作った。 Web公開の方法 まずGitHubでリポジトリを作ってクローンして、vue-CLIを使って実装をしていく。 実装する前にまずPagesの設定をして、vueのサンプルページがうまく表示されるかを確認した。 実際にvueの生成物をPagesでの公開する方法の詳細はこちらの記事から。 XDを使ってデザインをなんとなく考える XDはadobeのデザイン作成ソフト。 Web制作ではよく使われる上に、無料で使える模様。 adobe公式サイトのスターターキットダウンロードで入手できる。 トップのイメージを探す 素材に関してはおなじみのunsplashで見つけた。 無料とは思えないクオリティの素材を発掘できるので重宝している。 vueでトップページを作成 詳しい説明は割愛するが、HTMLとCSSに関しては、ドットインストールのはじめてのWeb制作とvue-cliの使い方をググればできるレベル。 ドットインストールは初心者におすすめ。 ネオンライト風のCSS CSSで美しいネオンライトのエフェクトをテキストやボタン、ボーダーに実装するテクニックのまとめを参考にした。 GoogleMapAPI ライブラリなしでGoogle MapをVue.jsで使う方法を参考にした。 レスポンシブデザイン PCで見るのとスマホで見るのとで幅が変わるのでデザインを変更した。 これも"レスポンシブデザイン"でググったら出てくるレベルで作成。(全然解説になってない) まとめ 以上が全貌。 結局何が難しいってフレームワークを決めることとデザイン自体の2つ。 この2点に関しては正解がないので常に最適解に近づけていく必要がある。 それ以外に関しては大体ググったら正解が手に入る。 あとは、デザインの勉強のためにWebサイト制作をしてみたが、 正直XDでお絵描きして終わりでもいいような気がする。 デザイン＋実装するなると半日はかかるので、量産ができない。 いずれにしても、今後も架空のWebサイトデザインを作っていきたい。

まずは完成品をどうぞ 渋谷のギラギラ感を出したかったのでネオンライト風CSSを使った。 スクロールするとこんな感じ。 試しにGoogleMapAPIも使ってみた。 スマホで見るとちょっとデザインが変わります。 実際にWeb公開しているURLはここです。 ちょっと重たいかも。 作り方 まずは作った動機 vue-CLIとGitHub Pagesの組み合わせで簡単にweb公開できることを知って 試しに何か作ってみたくなったというお話。 総制作時間6時間くらいで、もちろん費用はかかっていない。 結局一通り出来上がってからレスポンシブやらなんやらの調整に一番時間かかった。 割と見た目ができていればOKくらいの気持ちで作った。 Web公開の方法 まずGitHubでリポジトリを作ってクローンして、vue-CLIを使って実装をしていく。 実装する前にまずPagesの設定をして、vueのサンプルページがうまく表示されるかを確認した。 実際にvueの生成物をPagesでの公開する方法の詳細はこちらの記事から。 XDを使ってデザインをなんとなく考える XDはadobeのデザイン作成ソフト。 Web制作ではよく使われる上に、無料で使える模様。 adobe公式サイトのスターターキットダウンロードで入手できる。 トップのイメージを探す 素材に関してはおなじみのunsplashで見つけた。 無料とは思えないクオリティの素材を発掘できるので重宝している。 vueでトップページを作成 詳しい説明は割愛するが、HTMLとCSSに関しては、ドットインストールのはじめてのWeb制作とvue-cliの使い方をググればできるレベル。 ドットインストールは初心者におすすめ。 ネオンライト風のCSS CSSで美しいネオンライトのエフェクトをテキストやボタン、ボーダーに実装するテクニックのまとめを参考にした。 GoogleMapAPI ライブラリなしでGoogle MapをVue.jsで使う方法を参考にした。 レスポンシブデザイン PCで見るのとスマホで見るのとで幅が変わるのでデザインを変更した。 これも"レスポンシブデザイン"でググったら出てくるレベルで作成。(全然解説になってない) まとめ 以上が全貌。 結局何が難しいってフレームワークを決めることとデザイン自体の2つ。 この2点に関しては正解がないので常に最適解に近づけていく必要がある。 それ以外に関しては大体ググったら正解が手に入る。 あとは、デザインの勉強のためにWebサイト制作をしてみたが、 正直XDでお絵描きして終わりでもいいような気がする。 デザイン＋実装するなると半日はかかるので、量産ができない。 いずれにしても、今後も架空のWebサイトデザインを作っていきたい。

まずは完成品をどうぞ 渋谷のギラギラ感を出したかったのでネオンライト風CSSを使った。 スクロールするとこんな感じ。 試しにGoogleMapAPIも使ってみた。 スマホで見るとちょっとデザインが変わります。 実際にWeb公開しているURLはここです。 ちょっと重たいかも。 作り方 まずは作った動機 vue-CLIとGitHub Pagesの組み合わせで簡単にweb公開できることを知って 試しに何か作ってみたくなったというお話。 総制作時間6時間くらいで、もちろん費用はかかっていない。 結局一通り出来上がってからレスポンシブやらなんやらの調整に一番時間かかった。 割と見た目ができていればOKくらいの気持ちで作った。 Web公開の方法 まずGitHubでリポジトリを作ってクローンして、vue-CLIを使って実装をしていく。 実装する前にまずPagesの設定をして、vueのサンプルページがうまく表示されるかを確認した。 実際にvueの生成物をPagesでの公開する方法の詳細はこちらの記事から。 XDを使ってデザインをなんとなく考える XDはadobeのデザイン作成ソフト。 Web制作ではよく使われる上に、無料で使える模様。 adobe公式サイトのスターターキットダウンロードで入手できる。 トップのイメージを探す 素材に関してはおなじみのunsplashで見つけた。 無料とは思えないクオリティの素材を発掘できるので重宝している。 vueでトップページを作成 詳しい説明は割愛するが、HTMLとCSSに関しては、ドットインストールのはじめてのWeb制作とvue-cliの使い方をググればできるレベル。 ドットインストールは初心者におすすめ。 ネオンライト風のCSS CSSで美しいネオンライトのエフェクトをテキストやボタン、ボーダーに実装するテクニックのまとめを参考にした。 GoogleMapAPI ライブラリなしでGoogle MapをVue.jsで使う方法を参考にした。 レスポンシブデザイン PCで見るのとスマホで見るのとで幅が変わるのでデザインを変更した。 これも"レスポンシブデザイン"でググったら出てくるレベルで作成。(全然解説になってない) まとめ 以上が全貌。 結局何が難しいってフレームワークを決めることとデザイン自体の2つ。 この2点に関しては正解がないので常に最適解に近づけていく必要がある。 それ以外に関しては大体ググったら正解が手に入る。 あとは、デザインの勉強のためにWebサイト制作をしてみたが、 正直XDでお絵描きして終わりでもいいような気がする。 デザイン＋実装するなると半日はかかるので、量産ができない。 いずれにしても、今後も架空のWebサイトデザインを作っていきたい。