20200711のCSSに関する記事は12件です。

【初心者でもわかる】line-heightのせいでデザインを崩さないためのコーディング方法

どうも、7noteです。今回は初心者が落ち入りやすいline-heightの罠を解説し、対応策についてもしっかり書いていきます。

過去の記事でも書いたのですが、デザイナーは1pxの細かいデザインまでこだわってWEBデザインを作成しています。コーディングを担当するものとして、またコーダーとして、ブラウザで見たときにデザインを完璧に再現するのがコーダーの仕事の一つです。

そんなとき、厄介なのがline-heightの存在です。今までこんな経験はないでしょうか?

  • 「あれ、デザインでしっかりpx測ったのになんか余白が広い気がする。」
  • 「ここって、こんなに空いてたっけ?」

この問題、実は「line-height」の影響かもしれません。

「line-height」って何?

「line-height」は日本語でいうと「行間」です。

文字を読む際にはこの行間はとても大切です。行間がないと文字が詰まりすぎて読み難かったり、場合によっては文字が重なって読めなくなるなんて事もあります。

本なんかでも、文字がギュウギュウに詰まった本は読みにくいですよね。一行一行ある程度の感覚が空いているのでストレスなく本を読むことができます。これはWEBでも同じで、WEBサイトにはたくさんの文字が書かれています。特にニュース記事やブログなどはたくさんの文字が書かれていますよね。WEBサイトでもたくさんの文字が使われるということは行間もとても大切になってきます

タイトルで「line-heightのせいで・・・」みたいに書いてますが、line-heightはとても重要なcssの一つだと思っています。ですが・・・

余白の計算が狂う元凶に・・・

例えばこんなデザイン。
line-height_1.png

見出し(【初心者でもわかる】CSS〜〜)と書いている部分をコーディングする時で考えてみましょう。
数字やCSSは以下の通りとします。
line-height_2.png

line-heightを無視するならこんな感じで書きますが。。。

index.html
<div class="header">    
    <h1>【初心者でもわかる】CSSのセレクタ3種類の書き方(隣接セレクタ・間接セレクタ・直下セレクタ)<h1>
</div>
style.css
h1 {
    font-size: 20px;
    line-height: 1.4;
    margin-top: 40px;
}

ですが、実際には上側に4pxのズレが生じます。
line-height_3.png

なぜズレる?

そう、これがline-heightの罠なのです!!!
なぜズレるのか。line-height分の余白があるからです。

行間があるということは文字の上下に余白がつきます。今回はline-heightに1.4を指定しています。つまり1行の高さはこうなります。

【font-size × line-height = 1行の高さ】
20px × 1.4 = 28px

1行の高さは28pxになります。それに伴い文字サイズの20pxを引くと上下につく余白は8pxとなります。

【1行の高さ - font-size = 上下の余白】
28px - 20px = 8px

上下の余白の合計が8pxになるので、文字の上についている余白は半分の4pxとなります。

8px ÷ 2 = 4px(文字の上側の余白)

これが4pxズレる罠です。

「line-height」のズレを考慮して、余白を指定

style.css
h1 {
    font-size: 20px;
    line-height: 1.4;
    margin-top: 36px; /*line-height分の4pxを考慮して指定*/
}

line-height_4.png

いかがでしょうか。これでデザイン通りの余白がとれましたね!

まとめ

注意点としては、文字サイズやline-heightの値で考慮しないといけない余白の大きさはその都度変わってきます
またデザインによってline-heightの値が統一されておらず、こっちでは行間が1.5で、こっちでは行間は1.8などになっている場合もよくあります。その都度その都度しっかり計算して正しい余白をとるようにしましょう!

今回はわかりやすくするために「2020年06月〜〜」の部分のline-heightはあえて無視していますが、取りたい余白の上下どちらにも文字があるときは上の文字の行間と下の文字の行間の両方を考慮して余白をとるようにしましょう!
これをマスターすればline-heightに関しては脱初心者と言っても過言ではありません!

おそまつ!

(コメント・質問・ソースの指摘等なんでもウェルカムです!初心者の方でも気軽に質問ください!)

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

初心者によるプログラミング学習ログ 367日目

100日チャレンジの367日目

twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。
100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
367日目は、

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

Vue.js/Nuxt.jsでパララックス効果を実装

Vue/Nuxtでパララックスしようぜ!

※パララックス効果とは:スクロールしたときに、スクロール量に合わせてずれたり動いたりするやつ。

こういうやつ
sukiyaki2.gif

Vue.jsプラグインもいくつかあるけど、自前で実装した方が自由度高くて楽だった。勉強にもなるし。

実装方法概要

実装方法の大まかな説明

  • scrollイベントをlisten
  • スクロール量やら色々パラメータを取って移動量を計算
  • imgのstyleに object-position: {移動量X}% {移動量Y}% をぶち込む
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 に計算した移動量をぶち込む
    }
  }
}

以上の実装方法ですが、場合によって移動量の計算方法が異なります。

  1. img要素が完全に隠れている場合。(スクロールしないとimg要素が現れない場合)
  2. img要素が最初から見えている場合。(スクロールしなくてもimg要素が少しでも見えていて、これからスクロールする場合。)

1. img要素が完全に隠れている場合

この場合、画像の移動量は、以下の通りである。

  • スクロールして要素が見え始めた時は、移動量が0%である。
    • = ブラウザの表示領域のbottomが、img要素のtop に到達した時
  • スクロールして要素が見えなくなった時は、移動量が100%である。
    • = ブラウザの表示領域のtopが、img要素のbottom に到達した時

以上のように、this.objPosY がスクロール量に合わせて0から100まで動けばよい。

image.png

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)

image.png

getBoundingClientRect().top は、ブラウザの表示領域を基準とする、img要素の絶対座標である。
つまり、ブラウザの表示領域のtopimg要素の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 + innerHeight 

image.png

1.3 要素が見えなくなった時に、移動量が100%となるやつを作る

topVisibleScrollYbottomVisibleEndY に達した時に100になるようにすればいい。

this.objPosY = topVisibleScrollY / bottomVisibleEndY * 100 // 見え始めた時は0、見えなくなった時100

topVisibleScrollYbottomVisibleEndY も単位がピクセル量なのでパーセントに変換。
おしまい!

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
  }

image.png

スクロール量については、途中から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;
}

image.png

ただこの方法は、CSSに画像のパスを配置する必要がある。なので、パスが動的に変わるような場合は、imgタグを使いたいときもある。
その際に登場するのが、object-fitobject-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.js
import 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()をいちいち書かなくて良いの天才すぎる。以下から参考にさせていただきました。(多分)

PS : Twitterで「パララックス、SafariとiOSで動かなかったはずでは?」って言われたのでビビってます。とりあえずSafariでは動作確認できました。

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

CSS フォントサイズの変更 クラス指定なし

html

あいうえお


かきくけこ

css
p{
fontsize
}

pタグにクラス名を指定せずに、「あいうえお」「かきくけこ」のフォントサイズを別々にできる方法はありますか?(「あいうえお」フォントサイズ10px、「かきくけこ」フォントサイズ20px)のように

これ以外で外部cssで記述する方法があれば知りたいです。

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

vscode・Emmet Snippetでhtml, cssを手っ取り早くかく

もし不明なところや、間違いとかがあればご指摘頂けると幸いです。

やること

  • vscodeに基本提供されているemmet snippetsを使い、手っ取り早くhtml, cssを書くことを試みる
  • emmetはどういうものかをざっくり目を通す

vscodeのEmmet Snippetsとは?

image.png

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/

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

vscode・Emmet Snippetでhtml, cssを手っ取り早くかく(備忘録)

もし不明なところや、間違いとかがあればご指摘頂けると幸いです。

やること

  • vscodeに基本提供されているemmet snippetsを使い、手っ取り早くhtml, cssを書くことを試みる
  • emmetはどういうものかをざっくり目を通す

vscodeのEmmet Snippetsとは?

image.png

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"
  }
}

image.png

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

vscode・Emmet Snippetでhtml, css, jsxを手っ取り早くかく(備忘録)

もし不明なところや、間違いとかがあればご指摘頂けると幸いです。

やること

  • vscodeに基本提供されているemmet snippetsを使い、手っ取り早くhtml, css,jsxを書くことを試みる
  • emmetはどういうものかをざっくり目を通す

vscodeのEmmet Snippetsとは?

image.png

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"
  }
}

image.png

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

一つ目のサービスを作ってから、感じたこと/サービスを作りなおした話

1カ月前に「みんなでコードレビュー」というサービスを作りました~~

■参考記事
https://qiita.com/shibaHaya/items/734d5e2cd22f7e7d9576

このサービスは、自分のコードをレビューしてもらったり、軽い感じでレビューするサービスを想定して作ってみたものでした:relaxed:

経過 :man:

Qiitaに記事を書いて、「LGTM」をたくさんもらえて、それなりの流入がありました。
しかし、日がたつにつれサイトの訪問者はどんどん減っていきました:runner_tone5:

原因 :frowning2:

・サービス開始時に、それほど質問の量がないので、見に来る人も少なくなる(なので期間がかかる)
・そもそもこのサービスに人がいないので、コードを載せても答えが返ってこない、使わない
・コードレビューなら、普通Githubなどを使うし、軽い感じでコードレビューしてもらいたいって人があまりいないので、需要がない
・見た目が使いにくい
・そもそも知られてない

まあ、主な点はこんな感じだろう??と思う。。:ok_woman_tone3:

少し対策してみる:dancer_tone4:

なにか苦し紛れな感じで、追加機能をつけてみた。

・通知機能
・アイコン入力機能
・Best Answer
・そもそも機能を改修し、自分のコードを自分でレビューするようなサービスにしてみたりした。

その時の気持ち

少し使いやすさは改善したように思うが、なんかやっていて意味があるのかな~?:skull:
そもそも、「自分このサービス使わないしな~」とか思ってた。

だいぶモチベーションが下がっていたとき、「Google Adsense」の合格メールが来た:angel:
「まあ、広告はっといたら、1円ぐらいは、かせげるのかな~」と思い、機能開発はストップしていたが、広告だけ貼ってみた。

すると、次の日に「100円」の収益がついていた。
「え、100円も稼げるの?」ってだいぶモチベーションが上がった:heart_eyes_cat:

自分が感じたこと

自分は最初、作るのは楽しいし、とりあえず作って、人が集まったら、広告でも貼って、ちょっとは収益になるかな~と思っていた:fist_tone5:

実際作ったまでは、楽しかったが、それ以降の「機能追加・改修」はあんまりモチベーションが続かなかった。

そもそも僕は、月6万ぐらいかせげたら、田舎のおじいちゃん・おばあちゃんの家で暮らして、そこで開発したいな~と思っている。
僕にとっては収益が重要ぽいので、100円稼げたときは、自分が想像するよりもモチベーションが上がった。:hugging:

結果、自分の性格的に、サービス開発を続ける / このサービス継続して長く公開しとこうと思えるモチベーション優先順位は、

  1. 収益
  2. サービスの新規開発の楽しさ
  3. 収益がない場合でも、自分が使えるもので、あまり大きな改修や追加機能の手間がないもの (これはサービスの目的をしっかり決めてたら達成できそう)

こんな感じだと思う。 多分:v:

収益があれば、機能改修のモチベーションも湧くが、今の「みんなでコードレビュー」は、自分も使わない(3番も未達成)し、人が全然いないので、1番も達成できなそう。2番はもう使い終わったし。。

1番は、ハードルが高いので、とりあえず3番を達成できそうなサービスに作り替える:thumbsup:

自分が開発するときのメモを、webで保存できて後から見直せるサービスに作り替える。

自分が使うサービスを作ろうと思ったので、これにした。

機能的には、「みんなでコードレビュー」で実装したものを削っていけばできるから、簡単だった。

・自分のメモを残せるようにする
・ログイン
・お気に入り/いいね
・メモをちょっとカラフル:alarm_clock:に(codeなんかものせられる)
・マイページ

でも、見た目がダサいので、これだと自分もつかわなくなるかもと思ったので、見た目を改善する:night_with_stars:

デザインテンプレートを参考に使ってみる

自分のデザイン力は、絶望的:thermometer_face:なので、これを利用すれば手っ取り早くかっこよくなる。
調べると、ほんとうにいっぱいあってありがたい。

今回参考にしたサイトは、「https://template-party.com/」

利用規約を読むと、

テンプレート下部に入っているWeb Design:Template-Party(もしくは「Produced by Girl Staff」か「Web Design:Template-Party&> Girl-Staff」等の表記である場合あり)の文字とリンクは外さずにご利用下さい。その他は自由にカスタマイズして頂いて構いません

だったので、必要な機能だけ残してカスタマイズさせてもらった。:soccer:
見た目はこんな感じ

エンジニアメモ - Google Chrome 2020_07_11 13_55_26 (2).png

前よりめちゃいい。つぎからこういったサイトを作るときはテンプレートを利用しよ!:guardsman_tone3:

サイト内の色を決める

僕はとりあえず、オレンジをメインにてきとうに決めていたが、すごく見えづらかった。
調べてみると、世の中には配色デザインを提供してくれるサービスがあるらしい。

そんな中で今回利用したのが、「PALETTABLE

何百万人のデザイナーの配色知識を詰めこんだツールで、組み合わせも考えられた色を、好きか嫌いを選ぶだけで直感的に探し出してくれる。

このサービスを使って、5色決めたことにより、見た目がきれいになった。

回収したサイト

エンジニアメモ

これなら、自分も使いそう:massage:

まとめ

今回のことで、自分が何にモチベーションをもっているのか少しわかった。
このサービスは、完了したので、次のサービスを作りたい:man_tone1:

今度は、ドメイン名以外すべて無料で開発しようと思う。
記事を読んでくれて、ありがとうございました:bow_tone2:

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

cssのボックスモデルの理解

ボックスモデルとは

ボックスモデルの理解のためにアウトプットをします。

スクリーンショット 2020-07-09 17.49.00.png

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

cssのdisplayモデルのdivとspanの違い

displayプロパティの理解

div→横いっぱいに変更される。

下記はブロックレベル要素になる。
・h1~h4
・section
・p

span→開業されないため横に並ぶ。

下記はインラインレベル要素になる。
・a
・img

See the Pen zYraRgr by daiki-6cats (@daiki-6cats) on CodePen.

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

カブトムシを様々な種類にトランスフォームさせたくなったときの簡単な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.js
var tl = gsap.timeline({repeat:-1});

tl.to("#icon1", 1,{
  morphSVG: "#icon2"
}).to("#icon1", 1,{
  morphSVG: "#icon3"
}).to("#icon1", 1,{
  morphSVG: "#icon1"
})

以上で完成です!

morphSVGPluginは有料ですが、他にもAnime.jssnap.svgなど無料で使えるのもいっぱいあるので、「SVG モーフィング」で調べてみてください。(モーフィング時の滑らかさとか実装の難しさに差があって面白いです)

JS苦手な方や手っ取り早く動かしたいという方には短い記述で簡単に実装できるので、有料にはなりますがmorphSVGPluginがおすすめです。


使用ライブラリ:https://greensock.com/morphsvg/

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

HTML,CSSだけでホームページ作成『開発環境編』「前編」

はじめに

HTMLとCSSでホームページを作成するためには

  • エディタ
  • ブラウザ

この2つが必要になってきます。

スクリーンショット 2020-07-11 0.28.00.png

グラフを見て分かるようにエンジニアの3人に1人がVisual Studio Codeを使用
していることになります。

なので、今回はVisual Studio Codeを使用していきます。

1.VisualStudioCodeをインストール

  • サイトにアクセス

今回はmacOSでやっていきます。
下記のリンクからアクセスして「Download for Mac」をクリック
https://code.visualstudio.com/
スクリーンショット 2020-07-11 1.01.19.png

  • ダウンロード

クリックすると自動でダウンロードが開始されます。
スクリーンショット 2020-07-11 1.04.51.png

  • zipファイルを解凍

画面右下の ① のアイコンをクリックすると、ダウンロードフォルダに入ったファイル一覧が出てくるので、該当の ② をクリックします。

※Finderから直接でも上記でもどちらからでも良いです
スクリーンショット 2020-07-11 1.08.31.png

  • アプリケーションフォルダに移動

ダウンロードフォルダVisualStudioCode表示されると思いますが、まだ開かないでおきましょう。
そのアイコンをドラッグアンドドロップで、サイドメニューの「アプリケーション」に移動させます。

スクリーンショット 2020-07-11 1.15.10.png

  • 認証ボタン押す

画面が表示されたら「認証」ボタンを押して、管理者のログイン情報を入力し認証してください。

スクリーンショット 2020-07-11 1.20.33.png

  • アプリケーションフォルダから「VisualStudioCode」を開く

スクリーンショット 2020-07-11 1.21.10.png

これでエディタの開発環境は終わりです。
お疲れ様でした!

まとめ

今回、ブラウザのことまで書きたかったんですが長くなりそうなので「前編」「後編」と言った形に分けさせてもらいます。

今回ご紹介したVisualStudioCodeは、デフォルトで便利な機能が備わっていますし、扱いやすさも抜群なので、初心者の方でも使っていて不便ということがほぼないと思います。

もし機能で困ったことがあっても、VSCodeは認知度が高く、ネットに多くの情報が載っているため、検索すればいくらでも解決策が出てきます。
※Qiitaを有効活用しましょう!!!!

ただ、初めのうちはどのエディタを使用しても違いがよくわからないと思います。

しかし、使っていくうちに『こんな機能をつけたい』『これが便利』と感じることが増えてくると思いますので、その後に自分に適したテキストエディタを見つけてどんどんコードを書いていきましょう!

参考文献

【2020年最新版】プログラミング効率を上げるテキストエディタ
https://frontend-diary.com/programming-editor/
MacOSでVisual Studio Codeをインストールする手順
https://qiita.com/watamura/items/51c70fbb848e5f956fd6

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