What's New Qiita

20190915のCSSに関する記事は8件です。

  • 投稿日：2019-09-15T19:52:01+09:00

疑似要素って何？

公式さんからの引用

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

いくつか種類がある

::after 要素の直前に内容を追加
::before 要素の直後に内容を追加
::first-letter 最初の行の最初の文字のスタイルを変更
::first-line 段落の最初の行のフォントスタイルを変更
::selection ユーザーが選択した箇所のスタイルを変更

疑似要素をコロンひとつで書いてあったりする
→以前まではコロンひとつだったが、CSS3でコロンを２つ書く決まりになったそうな。

どう使うの？

テキストの前にアイコンを追加（font awesome使用）
.hoge::before {
  font-family: "Font Awesome 5 Free";
  content: "\f00c";  /*ユニコード*/
  font-weight: 900;
}
親要素に指定してfloatの回り込みを解除
.hoge::after {
  clear: both;
  display: block;
  content: " ";
}
絶対値で重ねて表示
h1 {
position: relative;
}

h1::before {
content: "";
position: absolute;
top: 0;
left: 0;
}

なるほど。
他にも、疑似要素のコンテンツの中身は検索エンジンに引っかからないのでSEOを気にせず自由に表現できる！と言うメリットもあるそう。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-09-15T17:23:31+09:00

33分でポートフォリオサイトを作成しデプロイする裏技とは！？

33分でポートフォリオサイト作成

「未経験者が転職少しでもアピールするためには、ポートフォリオサイトを作った方がいい」

私は未経験からWebエンジニアを目指してプログラミンングスクールに通っているのですが、この言葉を同期から聞いて、正直焦りました。

もう就職活動に動き始めている段階で、Githubのリポジトリーだけを見せるつもりだったからです。

実際に同期の人のポートフォリオサイトを見せてもらうと、自分で作ったものやカリキュラムで作ったものを簡単に紹介できたり、自分の自己紹介ができたりするので結構目を引きました。

ということで、自分も作るべきなのではないか？と思いました。

ただし時間が、、、。

ということで今回手軽にできる方法をいろいろ調べた結果、Bootstrapのテンプレートを使う方法がめちゃくちゃ手軽だったので、それを紹介したいと思います。

なぜ33分かというと、30分でポートフォリオサイトを作り、Githubを使って3分でデプロイするという内訳です。

すでに書くことを決めていたらコピペするだけなので可能です。

完成後は下記のようになります。

自分の好きなテンプレートを見つけよう

下記のサイトから自分の好きなテンプレートを見つけ、ダウンロードします。

https://templatemag.com/bootstrap-templates/

ちなみに自分はこれを選びました。

https://templatemag.com/demo/Kelvin/

ダウンロードしたテンプレートをVSCodeで編集

ダウンロードしたBootstrapのテンプレートをVSCodeで開きます。

そして経歴やポートフォリオの説明などの文章を、元の文から書き変えましょう。

書き変えた後は、画像を入れ替えます。

まず、自分が入れ替えたい画像を、imgフォルダ下に配置します。

配置した後、

src="img/〜"

というコードがimgタグにあるので、~の部分に、画像の拡張子までつけた自分の入れたい画像の名前に書き換えます。

背景画像を変えたい場合には、CSSフォルダのstylesheetにある、

background: url(../img/〜) no-repeat center top;

という〜の部分を、自分の表示させたい画像の名前に書き変えましょう。

以上でポートフォリオサイト作りは終わりです。

微調整も必要だと思うので、そこは適宜HTMLタグを増やしたり、CSSの指定を変えたりしてください。

Githubを使って3分でデプロイ

ポートフォリオサイトのようにデータベースとの連携がない場合には、Githun場で簡単にデプロイできます。

手順は、このポートフォリオサイトを自分のGithubのリポジトリとして追加した後、そのリポジトリ内でSettingsをクリック。

GitHub Pagesという見出しのSourceという欄がNoneになっているので、これをmaster branceに変更。

変更したらURLが生成されます。

そのURLが、あなたのポートフォリオサイトがデプロイされた状態です。

これだけで終わりです。

いやめちゃくちゃ簡単ですね。

メリット・デメリット

Bootstrapのテンプレートを使用する場合、やはりメリットは手軽にできることです。

おそらく、ここまでこの文章を読んでくれた人はご理解いただけたと思います。

ただしデメリットもあります。

それは、HTML/CSS/JavaScriptの勉強にはならないということ。

当たり前っちゃ当たり前なのですが、テンプレートですでにほとんどのデザインが完成されているので、あまり手を加える必要がありません。

そのため、HTML/CSS/JavaScriptの勉強をしながら、ポートフォリオサイトを作りたいといった人にはおすすめできないです。

これを理解した上で、手軽にポートフォリオサイトを作りたいといった人にはおすすめです。

注意点

Bootstrapのテンプレートを使用する場合、

<!--
You are NOT allowed to delete the credit link to TemplateMag with free version.
You can delete the credit link only if you bought the pro version.
Buy the pro version with working PHP/AJAX contact form: https://templatemag.com/kelvin-bootstrap-resume-template/
Licensing information: https://templatemag.com/license/-->

という文章があるので、下記のコードのクレジットは消してはいけません。

Bootstrapのテンプレートで手軽にポートフォリオサイトを作れる

Bootstrapのテンプレートを使用すれば、手軽にポートフォリオサイトを作れます。

ただしデメリットや注意点もあるので、それを承知した上で今回紹介した手順で作りたいと思った人は、ぜひ参考にしてみてください。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-09-15T17:23:31+09:00

33分でポートフォリオサイトを作成・デプロイまでする裏技とは！？

33分でポートフォリオサイト作成

「未経験者が転職のために少しでもアピールするには、ポートフォリオサイトを作った方がいい」

私は未経験からWebエンジニアを目指してプログラミンングスクールに通っているのですが、この言葉を同期から聞いて、正直焦りました。

もう就職活動に動き始めている段階で、GitHubのリポジトリーだけを見せるつもりだったからです。

実際に同期の人のポートフォリオサイトを見せてもらうと、自分で作ったものやカリキュラムで作ったものを簡単に紹介できたり、自分の自己紹介ができたりするので結構目を引きました。

ということで、自分も作るべきなのではないか？と思いました。

ただし時間が、、、。

ということで今回手軽にできる方法をいろいろ調べた結果、Bootstrapのテンプレートを使う方法がめちゃくちゃ手軽だったので、それを紹介したいと思います。

なぜ33分かというと、30分でポートフォリオサイトを作り、3分でGitHubを使ってデプロイするという内訳です。

すでに書くことを決めていたらコピペするだけなので可能です。

完成品は下記のようになります。

ポートフォリオサイトの作り方

それではどうやって、33分でポートフォリオサイトを作るのか説明していきます。

① 自分の好きなテンプレートを見つけよう

下記のサイトから自分の好きなテンプレートを見つけ、ダウンロードします。

https://templatemag.com/bootstrap-templates/

ちなみに私はこれを選びました。

https://templatemag.com/demo/Kelvin/

② ダウンロードしたテンプレートをVSCodeで編集

ダウンロードしたBootstrapのテンプレートをVSCodeで開きます。

そして経歴やポートフォリオの説明などの文章を、元の文から書き変えましょう。

書き変えた後は、画像を入れ替えます。

まず、自分が入れ替えたい画像を、imgフォルダ下に配置します。

配置した後、

src="img/〜"

というコードがimgタグにあるので、~の部分に、画像の拡張子までつけた自分の入れたい画像の名前に書き換えます。

背景画像を変えたい場合には、CSSフォルダのstylesheetにある、

background: url(../img/〜) no-repeat center top;

という〜の部分を、自分の表示させたい画像の名前に書き変えましょう。

以上でポートフォリオサイト作りは終わりです。

微調整も必要だと思うので、そこは適宜HTMLタグを増やしたり、CSSの指定を変えたりしてください。

③ GitHubを使って3分でデプロイ

ポートフォリオサイトのようにデータベースとの連携がない場合には、GitHubで簡単にデプロイできます。

手順は、このポートフォリオサイトを自分のGitHubのリポジトリとして追加した後、そのリポジトリ内でSettingsをクリック。

GitHub Pagesという見出しのSourceという欄がNoneになっているので、これをmaster branchに変更。

変更したらURLが生成されます。

そのURLが、あなたのポートフォリオサイトがデプロイされた状態です。

これだけで終わりです。

いやめちゃくちゃ簡単ですね。

メリット・デメリット

Bootstrapのテンプレートを使用する場合、やはりメリットは手軽にできることです。

おそらく、ここまでこの文章を読んでくれた人はご理解いただけたと思います。

そしてレスポンシブデザインにも対応しているので、スマホで見てもビューが崩れません。

素晴らしすぎますね。

ただしデメリットもあります。

それは、HTML/CSS/JavaScriptの勉強にはならないということ。

当たり前っちゃ当たり前なのですが、テンプレートですでにほとんどのデザインが完成されているので、あまり手を加える必要がありません。

そのため、HTML/CSS/JavaScriptの勉強をしながら、ポートフォリオサイトを作りたいといった人にはおすすめできないです。

これを理解した上で、手軽にポートフォリオサイトを作りたいといった人にはおすすめです。

注意点

Bootstrapのテンプレートを使用する場合、

<!--
You are NOT allowed to delete the credit link to TemplateMag with free version.
You can delete the credit link only if you bought the pro version.
Buy the pro version with working PHP/AJAX contact form: https://templatemag.com/kelvin-bootstrap-resume-template/
Licensing information: https://templatemag.com/license/-->

という文章があるので、無料で使う場合、下記のコードのクレジットは消してはいけません。

Bootstrapのテンプレートで手軽にポートフォリオサイトを作れる

Bootstrapのテンプレートを使用すれば、手軽にポートフォリオサイトを作れます。

ただしデメリットや注意点もあるので、それを承知した上で今回紹介した手順で作りたいと思った人は、ぜひ参考にしてみてください。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-09-15T17:23:31+09:00

【転職希望者必見】33分でポートフォリオサイトを作成・デプロイまでする裏技とは！？

33分でポートフォリオサイト作成

「未経験者が転職のため少しでもアピールするには、ポートフォリオサイトを作った方がいい」

私は未経験からWebエンジニアを目指してプログラミンングスクールに通っているのですが、この言葉を同期から聞いて、正直焦りました。

もう就職活動に動き始めている段階で、Githubのリポジトリーだけを見せるつもりだったからです。

実際に同期の人のポートフォリオサイトを見せてもらうと、自分で作ったものやカリキュラムで作ったものを簡単に紹介できたり、自分の自己紹介ができたりするので結構目を引きました。

ということで、自分も作るべきなのではないか？と思いました。

ただし時間が、、、。

ということで今回手軽にできる方法をいろいろ調べた結果、Bootstrapのテンプレートを使う方法がめちゃくちゃ手軽だったので、それを紹介したいと思います。

なぜ33分かというと、30分でポートフォリオサイトを作り、3分でGithubを使ってデプロイするという内訳です。

すでに書くことを決めていたらコピペするだけなので可能です。

完成後は下記のようになります。

自分の好きなテンプレートを見つけよう

下記のサイトから自分の好きなテンプレートを見つけ、ダウンロードします。

https://templatemag.com/bootstrap-templates/

ちなみに自分はこれを選びました。

https://templatemag.com/demo/Kelvin/

ダウンロードしたテンプレートをVSCodeで編集

ダウンロードしたBootstrapのテンプレートをVSCodeで開きます。

そして経歴やポートフォリオの説明などの文章を、元の文から書き変えましょう。

書き変えた後は、画像を入れ替えます。

まず、自分が入れ替えたい画像を、imgフォルダ下に配置します。

配置した後、

src="img/〜"

というコードがimgタグにあるので、~の部分に、画像の拡張子までつけた自分の入れたい画像の名前に書き換えます。

背景画像を変えたい場合には、CSSフォルダのstylesheetにある、

background: url(../img/〜) no-repeat center top;

という〜の部分を、自分の表示させたい画像の名前に書き変えましょう。

以上でポートフォリオサイト作りは終わりです。

微調整も必要だと思うので、そこは適宜HTMLタグを増やしたり、CSSの指定を変えたりしてください。

Githubを使って3分でデプロイ

ポートフォリオサイトのようにデータベースとの連携がない場合には、Githubで簡単にデプロイできます。

手順は、このポートフォリオサイトを自分のGithubのリポジトリとして追加した後、そのリポジトリ内でSettingsをクリック。

GitHub Pagesという見出しのSourceという欄がNoneになっているので、これをmaster branchに変更。

変更したらURLが生成されます。

そのURLが、あなたのポートフォリオサイトがデプロイされた状態です。

これだけで終わりです。

いやめちゃくちゃ簡単ですね。

メリット・デメリット

Bootstrapのテンプレートを使用する場合、やはりメリットは手軽にできることです。

おそらく、ここまでこの文章を読んでくれた人はご理解いただけたと思います。

そしてレスポンシブルデザインにも対応しているので、スマホで見てもビューが崩れません。

素晴らしすぎますね。

ただしデメリットもあります。

それは、HTML/CSS/JavaScriptの勉強にはならないということ。

当たり前っちゃ当たり前なのですが、テンプレートですでにほとんどのデザインが完成されているので、あまり手を加える必要がありません。

そのため、HTML/CSS/JavaScriptの勉強をしながら、ポートフォリオサイトを作りたいといった人にはおすすめできないです。

これを理解した上で、手軽にポートフォリオサイトを作りたいといった人にはおすすめです。

注意点

Bootstrapのテンプレートを使用する場合、

<!--
You are NOT allowed to delete the credit link to TemplateMag with free version.
You can delete the credit link only if you bought the pro version.
Buy the pro version with working PHP/AJAX contact form: https://templatemag.com/kelvin-bootstrap-resume-template/
Licensing information: https://templatemag.com/license/-->

という文章があるので、下記のコードのクレジットは消してはいけません。

Bootstrapのテンプレートで手軽にポートフォリオサイトを作れる

Bootstrapのテンプレートを使用すれば、手軽にポートフォリオサイトを作れます。

ただしデメリットや注意点もあるので、それを承知した上で今回紹介した手順で作りたいと思った人は、ぜひ参考にしてみてください。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-09-15T17:07:21+09:00

[css]pxや%などのサイズ指定について

始めに

cssのサイズ指定をする際、pxや%など色々な単位がありますが、どれが一番適切なのかよく理解出来ていなかったので自分なりにまとめていきたいと思います。

pxについて

pxは絶対値なので値を指定する事でどの様な画面でもそのサイズに固定して表示させる事が出来ます。使用はしやすいですが、レスポンシブ対応する際は、融通が効かないので不具合が出る可能性が高くなります。

.test {
    font-size: 16px;
  }

%について

%は相対値なので親要素の値によって値が変化します。デフォルトは16pxなのでその値を基準に何%かを表示させる事が出来ます。
レスポンシブサイトを作成する際は後ほど説明しますremを親要素の値として使用し子要素に%を使用する事で画面の拡大、縮小する際に自動的に文字のサイズを変更する事が可能になります。

.html {
    font-size: 16px;
  }
.test {
    font-size: 200%;
  }

この場合のfont-sizeの値は32pxになります。

emについて

emも同じ相対値かつ使用方法は%とあまり変わりません。%で表現しますと1em＝100%となります。

.html {
    font-size: 16px;
  }
.test {
    font-size: 2em;
  }

この場合のfont-sizeの値は32pxになります。

remについて

remも相対値でレスポンシブ画面にも対応できる単位となります。[root em]の略でremです。%やemは親要素の値を参照して表示されますが、remの場合だとルート、つまりhtmlのサイズを基準に表示する事が出来ます。
なので%やemの入れ子構造の問題に悩まされる事がない為、修正もしやすくなります。

.html {
    font-size: 16px;
  }
.test {
    font-size: 2rem;
  }

この場合のfont-sizeの値は32pxになります。

vw/vhについて

vmはviewport widthの略でビューポートの幅の事で、vhはviewport heightの略でビューポートの高さの事です。ビューポートとはユーザーが見ている画面に対しての表示の事です。
vwは、画面の横幅を100として、その割合でフォントサイズを指定します。つまり、1vwの大きさとは、画面サイズの1/100という意味になります。これは高さを意味するvhも同じです。
この他にもvmaxとvminがあります。
画像をフルスクリーンで表示させる場合の使用方法は

.fullscreen {
  width: 100%;
  height: 100vh;
  padding: 40vh;
}

となります。

まとめ

cssって本当奥が深いですね。レスポンシブ対応させる場合はこの辺りを理解する必要がありそうです。正直言葉足らずな所もありますので、以下の記事も参考して頂けたらと思います。
https://creive.me/archives/16915/#px
https://qiita.com/39_isao/items/e8242901ba1aadb75676

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-09-15T02:10:32+09:00

モバイルファーストでCSSを書くのをためらうただ１つの理由

私が以前担当したコーディング案件での話です。新規１ページのレスポンシブ対応ありの仕事ですが、他の案件と並行してた上、スケジュールがタイトだったため、今回は作業効率が良さそうな「モバイルファースト」でCSSを書こうと決めました。一部複雑なレイアウトがあってリスク管理の面から、スマホ版の方を早く作り込んで表示確認しておきたいと思ったのも理由でした。ところが無事テストアップした翌日、サイトを確認したお客様から私に修正依頼のメールがきました。PDFで添付されていたPC版ページのキャプチャを見て愕然。「プリントしたら画面とレイアウトが変わりました」とのご指摘。確かにPC版のレイアウトが崩れまくってます。画像サイズが大きすぎたり、floatが効いてなかったり……。お客様サイトで運用中の他の既存ページはPDFに印刷してもコンテンツ部分のレイアウトは崩れません。それらのページはHTMLやCSSで特に印刷用に何か設定してるわけでもないのに。明確な違いは１つ。それら既存ページのCSSは「デスクトップファースト」で制作されていたものでした。
この記事では、「モバイルファーストで作成したWebページを印刷した時にレイアウトが崩れる現象」について、その原因および最も簡易的な解決法を書きます。

発生する現象の例

例として、シンプルな画像ギャラリー風のページをモバイルファーストでサクッと作ってみました（下図）。ブレイクポイントは２箇所 600px, 1025pxで、画像リストのカラム数を変えています。どのメディアクエリが選択されたかわかるように、見出しにSP, Tablet, PCの文字列を表示させました。

HTML（要点のみ）
html
<div>
  <h2 class="status">Layout: </h2>
  <ul class="img-list">
    <li>
      <img src="https://picsum.photos/id/1001/800/565" alt="">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </li>
    <li>
      <img src="https://picsum.photos/id/102/800/565" alt="">
      <p>Sed et quam at velit tincidunt molestie.</p>
    </li>
    <!-- 残りの画像も同様 -->
  </ul>
</div>


CSS（要点のみ）
css
/* 各画面サイズに共通のコード */
/* スマホ画面サイズ用のコード */
.status::after {
  content: "SP";
}

@media screen and (min-width: 600px) {
  .status::after {
    content: "Tablet";
  }
  /* タブレット画面サイズとPC画面サイズに共通のコード (PCにも継承) */
  /* タブレット画面サイズ用のコード */
}

@media screen and (min-width: 1025px) {
  .status::after {
    content: "PC";
  }
  /* PC画面サイズ用のコード */
}


表示した結果は下図のとおりです。PC上のブラウザで「ファイル」メニューから印刷を選び、出力先をPDFに指定すると、印刷プレビュー画像のレイアウトが確かに変わってしまってます。よく見るとスマホ用レイアウトになってるのがわかります。

サンプル画像の出典: Unsplash via Lorem Picsum

原因と対策

印刷レイアウトがスマホ版になってしまった原因はメディアクエリの書き方にありました。印刷やPDFに出力する場合、以下のクエリの書き方はメディアタイプにscreenしか指定していないため印刷にはマッチせず、中身のCSSルールが適用されません。

css
@media screen and (min-width: 600px) { /* Tablet & PC */ }
@media screen and (min-width: 1025px) { /* PC */ }

これらのスタイルを印刷にも適用させたい場合は、メディアタイプprintを付け足します。

css
@media print,screen and (min-width: 600px) { /* Tablet & PC */ }
@media print,screen and (min-width: 1025px) { /* PC */ }

モバイルファーストでCSSを記述した場合、min-widthが小さい方から大きい方へCSSルールが継承されていくので、すべての@media行にprintを追加しておく必要があります。なお、@media構文はカンマ,がメディアクエリの区切りなので、print,screenが１つのまとまりではなく、意味はprintとscreen and (min-width:...)という２つのクエリになります。(CSS仕様書 3. Syntax)

css
@media print, /* 印刷用 */
       screen and (min-width: 1025px) /* 画面用 */
上記の対策をした結果、PC版レイアウトで印刷/PDF出力されるようになりました（下図）。

print指定が効いていることを確認するため、見出しの前に文字列「PRINT」を表示させてみました。メディアクエリは

css
@media print {
  .status::before {
    content: "PRINT - ";
    color: red;
  }
}

完成したコードはこちら: https://codepen.io/kaz_hashimoto/pen/WNeMQyz

冒頭に書いた「他の既存ページはPDFに印刷してもコンテンツ部分のレイアウトは崩れなかった」理由は、既存ページのCSSはデスクトップファーストで記述されていたため、印刷時は元々メディアクエリの外側に書いてあるPCレイアウト用のCSSルールだけが適用されたからでした。

ところで、printの代わりにallを指定したらどうなるでしょうか？ 2.3. Media Typesによると、allはすべてのデバイスにマッチするはずです。試したところ、

css
/* スマホもPCレイアウトになってしまうのでダメ */
@media all,screen and (min-width: 600px) { /* すべてのデバイス */ }
@media all,screen and (min-width: 1025px) { /* すべてのデバイス */ }
css
/* 画面はOKだがA4縦印刷時はタブレット版のレイアウトになる */
@media all and (min-width: 600px) { /* A4縦印刷時はこちらが適用 */ }
@media all and (min-width: 1025px) { /* A4縦印刷時は適用されない */ }

後者はA4横を指定するとPC版レイアウトで出力されました。

上記のサンプルは@mediaが2箇所だけでしたが、CSSファイル内に@media行が散在している場合、抜け漏れなく直すのは面倒で間違いの元です。実際、私が書いていたコードは、レイアウトのブロックごとにベース記述の後ろに@mediaを記述する形式にしていたため、修正箇所が多数に及びました。しかも、
@media screen and (min-width: xxx) and (max-width: yyy)
のような範囲を指定したクエリがあって、printを入れる箇所を慎重に判断しなければならず注意が要りました。

まあ、こんな対策に後から工数がかかってしまったことを踏まえると、最初から従来どおりデスクトップファーストで作っておけばよかったと思いました。以来私は実際の案件ではそうしています。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-09-15T01:47:16+09:00

イケてるマウスカーソルをPure JavaScriptで実装する

結果

See the Pen Cool UI - Mouse Chaser 01 by Loki (@loki__codepen) on CodePen.

追従するマウスカーソルについて

ここ最近、マウスカーソルに装飾をするサイトが増えてきている気がします。
自作するのは面倒なので、多くの制作者は以下のサイトのコードをコピーすることも多いでしょう。

イケてるマウスカーソルを簡単に実装する | 株式会社 エヴォワークス -EVOWORX-
https://www.evoworx.co.jp/blog/mouse-stoker-gsap/

jQueryを利用して書かれています。
Webサイトの制作であればjQueryを利用しない機会はあまりないと思いますが、記述をPure JavaScriptに調整したものを作成しましたので、共有いたします。

ソースコード

const 
  cursor = document.getElementById('js-cursor'),
  chaser = document.getElementById('js-chaser'),
  target = document.querySelector('a');
let
    delay = 10,
    cursorPosX = 0,
    cursorPosY = 0,
    chaserPosX = 0,
    chaserPosY = 0;

// カーソルの遅延アニメーション
TweenMax.to({}, .001, {
    repeat: -1,
    onRepeat: function() {
        chaserPosX += (cursorPosX - chaserPosX) / delay;
        chaserPosY += (cursorPosY - chaserPosY) / delay;

        TweenMax.set(cursor, {
            css: {
                left: cursorPosX - (cursor.clientWidth / 2),
                top: cursorPosY - (cursor.clientWidth / 2)
            }
        });

        TweenMax.set(chaser, {
            css: {
                left: chaserPosX - (chaser.clientWidth / 2),
                top: chaserPosY - (chaser.clientWidth / 2)
            }
        });
    }
});

// マウス座標を取得
document.onmousemove = function(event) {
    cursorPosX = event.pageX;
    cursorPosY = event.pageY;
};

// マウスオーバー時の処理
target.onmouseover = function() {
    cursor.classList.add('is-active');
    chaser.classList.add('is-active');
};

// マウスアウト時の処理
target.onmouseout = function() {
    cursor.classList.remove('is-active');
    chaser.classList.remove('is-active');
};

その他に調整した点

以下の点を修正しております。
- セレクタ名を.cursorから#js-cursorに変更
- セレクタ名を.followerから#js-chaserに変更
- cWidthやfWidthなど、JavaScript側でもサイズを入力する必要があった値を、CSSのみで認識するように変更

さいごに

マウスカーソルの視認性が良くなるので、個人的には好きな実装です！
十数年前の流行りが回帰していますが、アニメーション系のライブラリと合わさって現代バージョンとして流行っていることがなんだか面白いですね。
やりすぎには注意（笑）

Twitterのフォロワーを募集しております！
すでにWeb業界にいらっしゃる方や、業界未経験の方、どんな方でも募集しておりますので、どうぞよろしくお願いいたします(*^^*)

Twitter - https://twitter.com/loki__tweet

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-09-15T00:36:46+09:00

フリーランスになるために

初めまして

まず「フリーランスになりたい」なんて記事をQiitaで書いていいの？なんて気もしますが、
自分が学んだ技術を書き残す場所が欲しいなってことでQiitaブログを初めてみます。

何をゴールとするか

小目標

私は現在本業で８時間フルタイム働いているので、副業として動くことを前提として、
2019年のうちにWebコーダーとして月10万売り上げることを目標とします。

中目標

小目標が達成できたら、本業をやめる、つまり退職してフリーランス一本にします。
数字としては、月30万売り上げたい。

大目標

今の年収と同額をフリーランスで稼ぐこと。
どのタイミングで知り合いに公開するか不明なので、現段階では具体的な金額は伏せます。
2020年までにできるといいなあ・・・

現状のスキル

つい最近までECサイト構築の会社にいてエンジニアとして働いていたので、
HTML、CSS、JavaScriptの知識は多少あります。
あとは、.Net（VB、C#）がかけるのと、JavaとかRubyは調べながらなら読めるくらい。

これから

実際に１から１０まで作れるかというと微妙なので、実務に必要な流れを一通り学びたい。
そして流行りや効率的な書き方を全然知らないので、学びたい。

具体的に

  • サイトの模写コーディング
  • ポートフォリオ作成

がんばるぞい！

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

日付別

タグ一覧