- 投稿日:2020-07-11T23:17:47+09:00
【初心者でもわかる】line-heightのせいでデザインを崩さないためのコーディング方法
どうも、7noteです。今回は初心者が落ち入りやすいline-heightの罠を解説し、対応策についてもしっかり書いていきます。
過去の記事でも書いたのですが、デザイナーは1pxの細かいデザインまでこだわってWEBデザインを作成しています。コーディングを担当するものとして、またコーダーとして、ブラウザで見たときにデザインを完璧に再現するのがコーダーの仕事の一つです。
そんなとき、厄介なのがline-heightの存在です。今までこんな経験はないでしょうか?
- 「あれ、デザインでしっかりpx測ったのになんか余白が広い気がする。」
- 「ここって、こんなに空いてたっけ?」
この問題、実は「line-height」の影響かもしれません。
「line-height」って何?
「line-height」は日本語でいうと「行間」です。
文字を読む際にはこの行間はとても大切です。行間がないと文字が詰まりすぎて読み難かったり、場合によっては文字が重なって読めなくなるなんて事もあります。
本なんかでも、文字がギュウギュウに詰まった本は読みにくいですよね。一行一行ある程度の感覚が空いているのでストレスなく本を読むことができます。これはWEBでも同じで、WEBサイトにはたくさんの文字が書かれています。特にニュース記事やブログなどはたくさんの文字が書かれていますよね。WEBサイトでもたくさんの文字が使われるということは行間もとても大切になってきます。
タイトルで「line-heightのせいで・・・」みたいに書いてますが、line-heightはとても重要なcssの一つだと思っています。ですが・・・
余白の計算が狂う元凶に・・・
見出し(【初心者でもわかる】CSS〜〜)と書いている部分をコーディングする時で考えてみましょう。
数字やCSSは以下の通りとします。
line-heightを無視するならこんな感じで書きますが。。。
index.html<div class="header"> <h1>【初心者でもわかる】CSSのセレクタ3種類の書き方(隣接セレクタ・間接セレクタ・直下セレクタ)<h1> </div>style.cssh1 { font-size: 20px; line-height: 1.4; margin-top: 40px; }なぜズレる?
そう、これがline-heightの罠なのです!!!
なぜズレるのか。line-height分の余白があるからです。行間があるということは文字の上下に余白がつきます。今回はline-heightに1.4を指定しています。つまり1行の高さはこうなります。
【font-size × line-height = 1行の高さ】
20px × 1.4 = 28px1行の高さは28pxになります。それに伴い文字サイズの20pxを引くと上下につく余白は8pxとなります。
【1行の高さ - font-size = 上下の余白】
28px - 20px = 8px上下の余白の合計が8pxになるので、文字の上についている余白は半分の4pxとなります。
8px ÷ 2 = 4px(文字の上側の余白)
これが4pxズレる罠です。
「line-height」のズレを考慮して、余白を指定
style.cssh1 { font-size: 20px; line-height: 1.4; margin-top: 36px; /*line-height分の4pxを考慮して指定*/ }いかがでしょうか。これでデザイン通りの余白がとれましたね!
まとめ
注意点としては、文字サイズやline-heightの値で考慮しないといけない余白の大きさはその都度変わってきます。
またデザインによってline-heightの値が統一されておらず、こっちでは行間が1.5で、こっちでは行間は1.8などになっている場合もよくあります。その都度その都度しっかり計算して正しい余白をとるようにしましょう!今回はわかりやすくするために「2020年06月〜〜」の部分のline-heightはあえて無視していますが、取りたい余白の上下どちらにも文字があるときは上の文字の行間と下の文字の行間の両方を考慮して余白をとるようにしましょう!
これをマスターすればline-heightに関しては脱初心者と言っても過言ではありません!おそまつ!
(コメント・質問・ソースの指摘等なんでもウェルカムです!初心者の方でも気軽に質問ください!)
- 投稿日:2020-07-11T21:54:09+09:00
初心者によるプログラミング学習ログ 367日目
100日チャレンジの367日目
twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。
100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
367日目は、
おはようございます
— ぱぺまぺ@社畜✕投資✕ブロガー (@ppmp65) July 10, 2020
昨日の作業・やったこと⇩
●ブログ記事1記事作成
●プログラミング学習367日目 1.5h
・メンターの課題
・ナビクリック後のアクション
とりあえず、暑さがしんどい#駆け出しエンジニアとつながりたい#100DaysOfCode#早起きチャレンジ
- 投稿日:2020-07-11T18:44:12+09:00
Vue.js/Nuxt.jsでパララックス効果を実装
Vue/Nuxtでパララックスしようぜ!
※パララックス効果とは:スクロールしたときに、スクロール量に合わせてずれたり動いたりするやつ。
Vue.jsプラグインもいくつかあるけど、自前で実装した方が自由度高くて楽だった。勉強にもなるし。
実装方法概要
実装方法の大まかな説明
- scrollイベントをlisten
- スクロール量やら色々パラメータを取って移動量を計算
- imgのstyleに
object-position: {移動量X}% {移動量Y}%
をぶち込む
- ※
object-position
を知らない方は先に 事前知識 : CSS object-position について をどうぞ。index.vue<template> <img ref="backgroundImg" class="background-img" src="~/assets/img/background.png" :style="`object-position: 50% ${objPosY}%;`" > </template> <script> export default { data() { return { objPosY: 0 } }, mounted(){ window.addEventListener('scroll', this.calculateScrollY) // スクロールイベントのlisten }, methods: { calculateScrollY() { // this.objPosY に計算した移動量をぶち込む } } }以上の実装方法ですが、場合によって移動量の計算方法が異なります。
- img要素が完全に隠れている場合。(スクロールしないとimg要素が現れない場合)
- img要素が最初から見えている場合。(スクロールしなくてもimg要素が少しでも見えていて、これからスクロールする場合。)
1. img要素が完全に隠れている場合
この場合、画像の移動量は、以下の通りである。
- スクロールして要素が見え始めた時は、移動量が0%である。
- = ブラウザの表示領域のbottomが、img要素のtop に到達した時
- スクロールして要素が見えなくなった時は、移動量が100%である。
- = ブラウザの表示領域のtopが、img要素のbottom に到達した時
以上のように、
this.objPosY
がスクロール量に合わせて0から100まで動けばよい。1.1 要素が見え始めた時にスクロール量が0となるやつを作る
getBoundingClientRect()
を使ってスクロール量を取得し、新たに変数topVisibleScrollY
を定義した。const rect = this.$refs.backgroundImg.getBoundingClientRect(); console.log(rect.top) // ブラウザの表示領域を基準とする、img要素の絶対座標(top) スクロールによって可変 const innerHeight = window.innerHeight // ブラウザの表示領域の高さ。 const topVisibleScrollY = -rect.top + innerHeight // 要素が見え始めた時にスクロール量が0。スクロールによって可変 console.log(topVisibleScrollY)
getBoundingClientRect().top
は、ブラウザの表示領域を基準とする、img要素の絶対座標である。
つまり、ブラウザの表示領域のtopとimg要素のtopが重なった時に0になる。
「img要素のtop」を「img要素のbottom」に変えるために、img要素の高さを引いてやれば良い。ただ、
getBoundingClientRect().top
は、下へスクロールするごとに値が小さくなっていくので、マイナスにして正負反転させていることに注意。こうすることで、imgが画面内に現れた後、下へのスクロールによって値は正の方へ増えていく。これで、「スクロールして要素が見え始めた時は、移動量が0%である。」の条件がクリアできたので、今度は「じゃぁ
topVisibleScrollY
が何pxのときに100%とみなせばいいのか」を求めていきます。1.2
topVisibleScrollY
が何pxのときに100%とみなせばいい?要素が見えなくなった時に
topVisibleScrollY
が何pxかがわかれば良い。
要素が見え始めた時を0としたスクロール量がtopVisibleScrollY
だから、計算は簡単。答えは、img要素の高さと表示領域の高さを足したやつになる。
// img要素の高さ const height = this.$refs.backgroundImg.clientHeight // `topVisibleScrollY`が何pxのときに100%とみなせばいいか const bottomVisibleEndY = height + innerHeight1.3 要素が見えなくなった時に、移動量が100%となるやつを作る
topVisibleScrollY
がbottomVisibleEndY
に達した時に100になるようにすればいい。this.objPosY = topVisibleScrollY / bottomVisibleEndY * 100 // 見え始めた時は0、見えなくなった時100
topVisibleScrollY
もbottomVisibleEndY
も単位がピクセル量なのでパーセントに変換。
おしまい!1.4 全体のコード
index.vue<template> <img ref="backgroundImg" class="background-img" src="~/assets/img/background.png" :style="`object-position: 50% ${objPosY}%;`" > </template> <script> export default { data() { return { objPosY: 0 } }, mounted(){ window.addEventListener('scroll', this.calculateScrollY) // removeEventListenerは別で書きましょう。 }, methods: { calculateScrollY() { const rect = this.$refs.backgroundImg.getBoundingClientRect(); const innerHeight = window.innerHeight // 表示領域の高さ const topVisibleScrollY = -rect.top + innerHeight // 要素が見え始めた時にスクロール量が0。スクロールによって可変。 const height = this.$refs.backgroundImg.clientHeight // img要素の高さ const bottomVisibleEndY = height + innerHeight // topVisibleScrollYが何pxのときに100%とみなせばいいか this.objPosY = topVisibleScrollY / bottomVisibleEndY * 100 // 見え始めた時は0、見えなくなった時100 } } } </script> <style> .background-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; overflow: hidden; } </style>2. img要素が最初から見えている場合
この場合、imgが上側へ隠れることがないので、これまでの実装方法だと移動量が0%になることがない。スクロールしてない状態でも、40%とか30%とかになってしまう。
スクロールしてない状態なら0%にしたい。ということで以下に変えれば解決。
calculateScrollY() { const scrollY = window.scrollTop; const rect = this.$refs.backgroundImg.getBoundingClientRect(); const height = this.$refs.backgroundImg.clientHeight const bottomVisibleEndY = height + rect.top + scrollY this.objPosY = scrollY / bottomVisibleEndY * 100 }スクロール量については、途中から0で始める必要がなくなったので、rect.topをやめて
window.scrollTop
に変更。
bottomVisibleEndY
(scrollTopが何pxのときに100%とみなせばいいか) はimg要素の高さとimg要素のY座標を足し合わせればOK。
img要素のY座標はrect.top + scrollY
で求められます。事前知識 : CSS
object-position
について今回は CSS の
object-position
を使って画像をずらしていたのでその説明。
参考:https://developer.mozilla.org/ja/docs/Web/CSS/object-position画像の width と height を指定した上で、画像自体は cover にしたい時、よく使われるのは以下のようなコード。
backgroundに画像を指定する方法である。.hoge-img { /* img要素ではなくdiv要素とかにつける */ width: 100px; height: 100px; background: url('image.png') no-repeat; background-position: 50% 50%; /* center; でも可 */ background-size: cover; }ただこの方法は、CSSに画像のパスを配置する必要がある。なので、パスが動的に変わるような場合は、imgタグを使いたいときもある。
その際に登場するのが、object-fit
とobject-position
。img.hoge-img { /* img要素につける */ width: 100px; height: 100px; object-fit: cover; object-position: 50% 50%; /* center; でも可 */ overflow: hidden; }これでimg要素でも自由なサイズにクリッピングできる。
今回は
object-position
を使ったが、background-position
を使っても同様にパララックスできる。
こうすればいいだけ↓↓↓index.vue<template> <div ref="backgroundImg" class="background-img" :style="`background-position: 50% ${objPosY}%;`" > </template> ...ついでに:addEventListenerについて
mixins.js
をpluginsフォルダにつくって、nuxt.config.jsにplugins: plugins: ['~/plugins/mixins'],
とやる。
これでEventListenerを使う時は、this.listen(window, 'scroll', this.calculateScrollY)
とするだけでよい。~/plugins/mixins.jsimport Vue from 'vue' Vue.mixin({ destroyed() { if (this._eventRemovers) { this._eventRemovers.forEach(function(eventRemover) { eventRemover.remove() }) } }, methods: { listen(target, eventType, callback) { if (!this._eventRemovers) { this._eventRemovers = [] } target.addEventListener(eventType, callback) this._eventRemovers.push({ remove() { target.removeEventListener(eventType, callback) } }) } } })remove()をいちいち書かなくて良いの天才すぎる。以下から参考にさせていただきました。(多分)
- Nuxt.jsで異なるコンポーネントから共通で利用できる関数を定義する(mixin編) - Qiita
- Vue.js 外側をクリックすると閉じるドロップダウンメニュー - Qiita
- ここでイベントリスナーの知見を得た。あざます。
PS : Twitterで「パララックス、SafariとiOSで動かなかったはずでは?」って言われたのでビビってます。とりあえずSafariでは動作確認できました。
- 投稿日:2020-07-11T17:26:54+09:00
CSS フォントサイズの変更 クラス指定なし
html
あいうえお
かきくけこ
css
p{
fontsize
}pタグにクラス名を指定せずに、「あいうえお」「かきくけこ」のフォントサイズを別々にできる方法はありますか?(「あいうえお」フォントサイズ10px、「かきくけこ」フォントサイズ20px)のように
これ以外で外部cssで記述する方法があれば知りたいです。
- 投稿日:2020-07-11T17:18:52+09:00
vscode・Emmet Snippetでhtml, cssを手っ取り早くかく
もし不明なところや、間違いとかがあればご指摘頂けると幸いです。
やること
- vscodeに基本提供されているemmet snippetsを使い、手っ取り早くhtml, cssを書くことを試みる
- emmetはどういうものかをざっくり目を通す
vscodeのEmmet Snippetsとは?
https://code.visualstudio.com/docs/languages/html#_emmet-snippets
vscodeは、基本的にemmetのauto-completionを提供している。
htmlのauto-completion例
ul>li*3>span.hello$を書くと
<ul> <li><span class="hello1"></span></li> <li><span class="hello2"></span></li> <li><span class="hello3"></span></li> </ul>こういうふうに、HTMLを自動で完成してくれる。
cssのauto-completion例
p10を書くと
padding: 10px;こういうふうに、css属性を自動で完成してくれる。
Emmetとは
Emmetは既定形式の入力補完機能によりHTML、XML、XSL等を素早く編集できる、テキストエディタ用プラグイン
vscodeは、このプラグインを基本搭載している。Emmetでできること
html, css, xslのauto-completion
Emmet Documents
Cheat Sheetsのいくつかを覚えておくと便利
● Cheat Sheets(html, css, xsl)
https://docs.emmet.io/cheat-sheet/● Syntax & Documentation
https://docs.emmet.io/abbreviations/syntax/
- 投稿日:2020-07-11T17:18:52+09:00
vscode・Emmet Snippetでhtml, cssを手っ取り早くかく(備忘録)
もし不明なところや、間違いとかがあればご指摘頂けると幸いです。
やること
- vscodeに基本提供されているemmet snippetsを使い、手っ取り早くhtml, cssを書くことを試みる
- emmetはどういうものかをざっくり目を通す
vscodeのEmmet Snippetsとは?
https://code.visualstudio.com/docs/languages/html#_emmet-snippets
vscodeは、基本的にemmetのauto-completionを提供している。
htmlのauto-completion例
ul>li*3>span.hello$を書くと
<ul> <li><span class="hello1"></span></li> <li><span class="hello2"></span></li> <li><span class="hello3"></span></li> </ul>こういうふうに、HTMLを自動で完成してくれる。
cssのauto-completion例
p10を書くと
padding: 10px;こういうふうに、css属性を自動で完成してくれる。
Emmetとは
Emmetは既定形式の入力補完機能によりHTML、XML、XSL等を素早く編集できる、テキストエディタ用プラグイン
vscodeは、このプラグインを基本搭載している。Emmetでできること
html, css, xslのauto-completion
Emmet Documents
Cheat Sheetsのいくつかを覚えておくと便利
● Cheat Sheets(html, css, xsl)
https://docs.emmet.io/cheat-sheet/● Syntax & Documentation
https://docs.emmet.io/abbreviations/syntax/jsxでも使えるように設定(react)
設定▶拡張機能▶emmet項目でsetting.jsonを開き、以下の設定を追加
setting.json{ "emmet.includeLanguages": { "javascript": "javascriptreact" } }
- 投稿日:2020-07-11T17:18:52+09:00
vscode・Emmet Snippetでhtml, css, jsxを手っ取り早くかく(備忘録)
もし不明なところや、間違いとかがあればご指摘頂けると幸いです。
やること
- vscodeに基本提供されているemmet snippetsを使い、手っ取り早くhtml, css,jsxを書くことを試みる
- emmetはどういうものかをざっくり目を通す
vscodeのEmmet Snippetsとは?
https://code.visualstudio.com/docs/languages/html#_emmet-snippets
vscodeは、基本的にemmetのauto-completionを提供している。
htmlのauto-completion例
ul>li*3>span.hello$を書くと
<ul> <li><span class="hello1"></span></li> <li><span class="hello2"></span></li> <li><span class="hello3"></span></li> </ul>こういうふうに、HTMLを自動で完成してくれる。
cssのauto-completion例
p10を書くと
padding: 10px;こういうふうに、css属性を自動で完成してくれる。
Emmetとは
Emmetは既定形式の入力補完機能によりHTML、XML、XSL等を素早く編集できる、テキストエディタ用プラグイン
vscodeは、このプラグインを基本搭載している。Emmetでできること
html, css, xslのauto-completion
Emmet Documents
Cheat Sheetsのいくつかを覚えておくと便利
● Cheat Sheets(html, css, xsl)
https://docs.emmet.io/cheat-sheet/● Syntax & Documentation
https://docs.emmet.io/abbreviations/syntax/jsxでも使えるように設定
reactなどで便利
設定▶拡張機能▶emmet項目でsetting.jsonを開き、以下の設定を追加
setting.json{ "emmet.includeLanguages": { "javascript": "javascriptreact" } }
- 投稿日:2020-07-11T14:00:47+09:00
一つ目のサービスを作ってから、感じたこと/サービスを作りなおした話
1カ月前に「みんなでコードレビュー」というサービスを作りました~~
■参考記事
https://qiita.com/shibaHaya/items/734d5e2cd22f7e7d9576このサービスは、自分のコードをレビューしてもらったり、軽い感じでレビューするサービスを想定して作ってみたものでした
経過
Qiitaに記事を書いて、「LGTM」をたくさんもらえて、それなりの流入がありました。
しかし、日がたつにつれサイトの訪問者はどんどん減っていきました原因
・サービス開始時に、それほど質問の量がないので、見に来る人も少なくなる(なので期間がかかる)
・そもそもこのサービスに人がいないので、コードを載せても答えが返ってこない、使わない
・コードレビューなら、普通Githubなどを使うし、軽い感じでコードレビューしてもらいたいって人があまりいないので、需要がない
・見た目が使いにくい
・そもそも知られてないまあ、主な点はこんな感じだろう??と思う。。
少し対策してみる
なにか苦し紛れな感じで、追加機能をつけてみた。
・通知機能
・アイコン入力機能
・Best Answer
・そもそも機能を改修し、自分のコードを自分でレビューするようなサービスにしてみたりした。その時の気持ち
少し使いやすさは改善したように思うが、なんかやっていて意味があるのかな~?
そもそも、「自分このサービス使わないしな~」とか思ってた。だいぶモチベーションが下がっていたとき、「Google Adsense」の合格メールが来た
「まあ、広告はっといたら、1円ぐらいは、かせげるのかな~」と思い、機能開発はストップしていたが、広告だけ貼ってみた。すると、次の日に「100円」の収益がついていた。
「え、100円も稼げるの?」ってだいぶモチベーションが上がった自分が感じたこと
自分は最初、作るのは楽しいし、とりあえず作って、人が集まったら、広告でも貼って、ちょっとは収益になるかな~と思っていた
実際作ったまでは、楽しかったが、それ以降の「機能追加・改修」はあんまりモチベーションが続かなかった。
そもそも僕は、月6万ぐらいかせげたら、田舎のおじいちゃん・おばあちゃんの家で暮らして、そこで開発したいな~と思っている。
僕にとっては収益が重要ぽいので、100円稼げたときは、自分が想像するよりもモチベーションが上がった。結果、自分の性格的に、サービス開発を続ける / このサービス継続して長く公開しとこうと思えるモチベーション優先順位は、
- 収益
- サービスの新規開発の楽しさ
- 収益がない場合でも、自分が使えるもので、あまり大きな改修や追加機能の手間がないもの (これはサービスの目的をしっかり決めてたら達成できそう)
こんな感じだと思う。 多分
収益があれば、機能改修のモチベーションも湧くが、今の「みんなでコードレビュー」は、自分も使わない(3番も未達成)し、人が全然いないので、1番も達成できなそう。2番はもう使い終わったし。。
1番は、ハードルが高いので、とりあえず3番を達成できそうなサービスに作り替える
自分が開発するときのメモを、webで保存できて後から見直せるサービスに作り替える。
自分が使うサービスを作ろうと思ったので、これにした。
機能的には、「みんなでコードレビュー」で実装したものを削っていけばできるから、簡単だった。
・自分のメモを残せるようにする
・ログイン
・お気に入り/いいね
・メモをちょっとカラフルに(codeなんかものせられる)
・マイページでも、見た目がダサいので、これだと自分もつかわなくなるかもと思ったので、見た目を改善する
デザインテンプレートを参考に使ってみる
自分のデザイン力は、絶望的なので、これを利用すれば手っ取り早くかっこよくなる。
調べると、ほんとうにいっぱいあってありがたい。今回参考にしたサイトは、「https://template-party.com/」
利用規約を読むと、
テンプレート下部に入っているWeb Design:Template-Party(もしくは「Produced by Girl Staff」か「Web Design:Template-Party&> Girl-Staff」等の表記である場合あり)の文字とリンクは外さずにご利用下さい。その他は自由にカスタマイズして頂いて構いません
だったので、必要な機能だけ残してカスタマイズさせてもらった。
見た目はこんな感じ前よりめちゃいい。つぎからこういったサイトを作るときはテンプレートを利用しよ!
サイト内の色を決める
僕はとりあえず、オレンジをメインにてきとうに決めていたが、すごく見えづらかった。
調べてみると、世の中には配色デザインを提供してくれるサービスがあるらしい。そんな中で今回利用したのが、「PALETTABLE」
何百万人のデザイナーの配色知識を詰めこんだツールで、組み合わせも考えられた色を、好きか嫌いを選ぶだけで直感的に探し出してくれる。
このサービスを使って、5色決めたことにより、見た目がきれいになった。
回収したサイト
これなら、自分も使いそう
まとめ
今回のことで、自分が何にモチベーションをもっているのか少しわかった。
このサービスは、完了したので、次のサービスを作りたい今度は、ドメイン名以外すべて無料で開発しようと思う。
記事を読んでくれて、ありがとうございました
- 投稿日:2020-07-11T13:33:32+09:00
cssのdisplayモデルのdivとspanの違い
displayプロパティの理解
div→横いっぱいに変更される。
下記はブロックレベル要素になる。
・h1~h4
・section
・pspan→開業されないため横に並ぶ。
下記はインラインレベル要素になる。
・a
・imgSee the Pen zYraRgr by daiki-6cats (@daiki-6cats) on CodePen.
- 投稿日:2020-07-11T11:03:01+09:00
カブトムシを様々な種類にトランスフォームさせたくなったときの簡単なTIPS
【 完成形 】
See the Pen MWKXrmO by daisukeibi (@daisukeibi) on CodePen.
まず初めにGSAPのライブラリを読み込む。
index.html<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js?r=2314"></script> <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin3.min.js"></script>使いたいSVGをダウンロードしてコードエディタで開き、
svgタグのviewBoxとpathタグのd属性をコピーして貼り付ける。index.html<svg id="svg" viewBox="(viewBox属性を貼り付ける)" fill="#4F392B"> <path id="icon1" d="(一匹目のカブトムシのd属性を貼り付ける)"> <path id="icon2" d="(二匹目のカブトムシのd属性を貼り付ける)"> <path id="icon3" d="(三匹目のカブトムシのd属性を貼り付ける)"> </svg>cssで初期表示しないpath要素を隠す。
style.css#icon2,#icon3{ visibility: hidden; }jsで動かす。
script.jsvar tl = gsap.timeline({repeat:-1}); tl.to("#icon1", 1,{ morphSVG: "#icon2" }).to("#icon1", 1,{ morphSVG: "#icon3" }).to("#icon1", 1,{ morphSVG: "#icon1" })以上で完成です!
morphSVGPluginは有料ですが、他にもAnime.jsやsnap.svgなど無料で使えるのもいっぱいあるので、「SVG モーフィング」で調べてみてください。(モーフィング時の滑らかさとか実装の難しさに差があって面白いです)
JS苦手な方や手っ取り早く動かしたいという方には短い記述で簡単に実装できるので、有料にはなりますがmorphSVGPluginがおすすめです。
使用ライブラリ:https://greensock.com/morphsvg/
- 投稿日:2020-07-11T01:36:46+09:00
HTML,CSSだけでホームページ作成『開発環境編』「前編」
はじめに
HTMLとCSSでホームページを作成するためには
- エディタ
- ブラウザ
この2つが必要になってきます。
グラフを見て分かるようにエンジニアの3人に1人がVisual Studio Codeを使用
していることになります。なので、今回はVisual Studio Codeを使用していきます。
1.VisualStudioCodeをインストール
- サイトにアクセス
今回はmacOSでやっていきます。
下記のリンクからアクセスして「Download for Mac」をクリック
https://code.visualstudio.com/
- ダウンロード
- zipファイルを解凍
画面右下の ① のアイコンをクリックすると、ダウンロードフォルダに入ったファイル一覧が出てくるので、該当の ② をクリックします。
- アプリケーションフォルダに移動
ダウンロードフォルダVisualStudioCode表示されると思いますが、まだ開かないでおきましょう。
そのアイコンをドラッグアンドドロップで、サイドメニューの「アプリケーション」に移動させます。
- 認証ボタン押す
画面が表示されたら「認証」ボタンを押して、管理者のログイン情報を入力し認証してください。
- アプリケーションフォルダから「VisualStudioCode」を開く
これでエディタの開発環境は終わりです。
お疲れ様でした!まとめ
今回、ブラウザのことまで書きたかったんですが長くなりそうなので「前編」「後編」と言った形に分けさせてもらいます。
今回ご紹介したVisualStudioCodeは、デフォルトで便利な機能が備わっていますし、扱いやすさも抜群なので、初心者の方でも使っていて不便ということがほぼないと思います。
もし機能で困ったことがあっても、VSCodeは認知度が高く、ネットに多くの情報が載っているため、検索すればいくらでも解決策が出てきます。
※Qiitaを有効活用しましょう!!!!ただ、初めのうちはどのエディタを使用しても違いがよくわからないと思います。
しかし、使っていくうちに『こんな機能をつけたい』『これが便利』と感じることが増えてくると思いますので、その後に自分に適したテキストエディタを見つけてどんどんコードを書いていきましょう!
参考文献
【2020年最新版】プログラミング効率を上げるテキストエディタ
https://frontend-diary.com/programming-editor/
MacOSでVisual Studio Codeをインストールする手順
https://qiita.com/watamura/items/51c70fbb848e5f956fd6