概要

Web初心者がVue.jsでポートフォリオを作ってみた
2019/2/26 レスポンシブ対応してないので注意

準備

前回書いた記事を参照

作成物

ポートフォリオサイト
github

まずコンポーネントを作ろう

とりあえず全ページ共通で使用するものをコンポーネントとして用意すればいいっしょ？
という軽い気持ちで作成。

ヘッダー

Header.vue

<template>
  <div>
    <header class="header">
      <router-link to="/">Top</router-link>
      <router-link to="/about">About</router-link>
      <router-link to="/career">Career</router-link>
      <router-link to="/portfolio">Portfolio</router-link>
      <router-link to="/contact">Contact</router-link>
    </header>
  </div>
</template>

ページタイトル(画面毎に文言が変わるためpropsを設定)

Pagetitle.vue

<template>
  <div class="pagetitle">
    <p> {{pagetitle}} </p>
  </div>
</template>

<script>
export default{
  name:'pagetitle',
  props:{
    pagetitle:{
      type:String,
      default:''
    }
  }
}
</script>

ヘッダーは画面によって文言やデザインが変わる必要は無いのでApp.vueに記載

App.vue

<template>
  <div id="app">
    <Header></Header>
    <router-view/>
  </div>
</template>

<script>
import Header from '@/components/Header'

export default{
  name:'header',
  components:{
    Header
  }
}
</script>

ページの作成

HTMLとCSSでページを作成する。
作成したページタイトルコンポーネントに引数を入れて呼び出す。

トップ画面

Top.vue

<template>
  <div class="top">
    <Pagetitle pagetitle='Top'></Pagetitle>
    <p id="text">Doragon's Portfolio</p>
  </div>
</template>

<script>
import Pagetitle from '@/components/Pagetitle.vue'

export default{
  name:'top',
  components:{
    Pagetitle
  }
}
</script>

Router

作成したページをRouterに設定。

router.js

import Vue from 'vue'
import Router from 'vue-router'
import Top from './pages/Top.vue'
import About from './pages/About.vue'
import Career from './pages/Career.vue'
import Contact from './pages/Contact.vue'
import Portfolio from './pages/Portfolio.vue'

Vue.use(Router)

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'top',
      component: Top
    },
    {
      path: '/about',
      name: 'about',
      component: About
    },
    {
      path: '/career',
      name: 'career',
      component: Career
    },
    {
      path: '/portfolio',
      name: 'portfolio',
      component: Portfolio
    },
    {
      path: '/contact',
      name: 'contact',
      component: Contact
    }
  ]
})

main.jsにrouterの宣言を忘れずに。

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

作成したポートフォリオを公開する

今回はgithub pagesにデプロイする。
ソースコードを公開する代わりに無料でwebページを公開してくれる優しいやつ。

vue.config.jsをディレクトリ直下に作成
このままbuildすると/dist直下にビルドファイルが作成されてしまう。
github pagesでは/docs直下のものが公開対象となるため設定を変更する。

vue.config.js

module.exports = {
  baseUrl: process.env.NODE_ENV === 'production'
    ? '/portfolio/'
    : '/',
  outputDir: 'docs',
};

コマンドラインでビルドを行う

$npm run build

github
/docs直下にビルドされたファイルが作成された事を確認した後、masterにpush。
githubのsettingを以下のようにする。

反映まで少し時間がかかるので注意
せっかちな人は以下の記事を参考にしてください。
https://qiita.com/shge/items/ac20f45c9e8e0b4f33cc

一言

レスポンシブ対応がまだ出来ていないので後々やります・・・。
SASSも使いたかったけど、全く使っていない・・・。
HTMLとCSSとJSはまだまだ初心者レベルなので修行が必要だと痛感した。
Node.jsも勉強してwebに強くなりたい。

参考文献

https://qiita.com/plus_kyoto/items/a01578b782f17f573510
https://qiita.com/shge/items/ac20f45c9e8e0b4f33cc

目的

CSS設計の考え方をまとめていつでも使えるようにしたい。

背景

業務でデザイナーと協力してCSS設計を行うことになった。

前提

HTML&CSSも並行して勉強中。

OOCSS（オブジェクト指向CSS）

特徴

CSSにオブジェクト指向の概念を取り入れたもの。大原則は以下の2点。
1. 構造と見た目を分離
2. コンテナ（入れ物）とコンテンツ（中身）を分離

構造と見た目を分離

コンテナとコンテンツを分離

SMACS

特徴

OOCSSをベー巣に考えられた設計。ページを以下のカテゴリに分類する考え方を採用している。
1. Base
2. Layout
3. Module
4. State
5. Theme

Base

htmlやbodyに適用するような全体の背景やフォントなどを定義する。このカテゴリは基本的に上書きされることはないため、上書きされるような定義はしない。

Layout

IDセレクタで定義されるような大枠（ブロック）や、グリッドレイアウトなどのレイアウトルールを定義する。

Module

ボタン、見出し、リンク、などなどのパーツ。

State

Javascriptの制御によって切り替わる状態。display:noneとかが該当する。

Theme

全体のテーマの切り替え。白背景→黒背景とか。

その他

• 子供セレクタをなるべく使わないことでHTMLとCSSの依存関係を減らす。
• コンポーネントを拡張するときは、子供の命名規則には親のコンポーネント名をケバブケースで付与することで名前の汚染を防ぐ。 # BEM ## 特徴 Block,Element,Modifierの略。命名規則に着目したアプローチ。 ## Block ブロック。親。 ## Element Blockと親子関係にあるもの。 block__nameのような名前を付ける。 ## Modifier BlockやElementのバリエーションの違い。 block--modifierやelement--modifierのような名前を付ける。 # MCSS ## 特徴 MultilayerCSSの略。OOCSSとBEMを合わせたようなもの。SMACSが5つのカテゴリ分けを行う考え方なのに対し、MCSSは4つのレイヤーを定義している。
• Foundation
• Base
• Project
• Cosmetics 下位レイヤー（番号が小さい）から上位レイヤー（番号が大きい）は上書きできないが、逆は可能という考え方。 ## Foundation SMACSSでいうところのBase。 ## Base SMACSSでいうところのModule。共通のパーツ。 ## Project Baseよりも具体的な要素。 ## Cosmetics ちょっとしたレイアウトの変更など。 # マルチクラスとシングルクラス ## マルチクラス 上記まで記載したきて各設計手法のような、コンポーネントごとにクラスを作成し、必要に応じて複数のクラスをHTMLに適用していく。 ## シングルクラス Sass等を使って、クラスセレクタ名にはセマンティックな名前をつける。

最近よく使うものをcodepenにメモしたので、Qiitaにも引っ張ってきました。
flexboxってなんて便利なんだろう（何度目かの噛みしめ）

See the Pen CSSで作る見出しデザイン12種 by Yuki Koide (@yuki_24) on CodePen.

CSS animation day36 となりました。
毎日記事を投稿しているせいで、画像アップロードの上限(100MB月)になってしまいました。大変申し訳ないのですが、画像は極力抑えて、codesandobox で随時貼り付けてお届けいたします。

本日は、
パララックスによる奥域表現をしたいと思います。

1. 完成版

See the Pen World Parallax by hiroya iizuka (@hiroyaiizuka) on CodePen.

2. なぜか？

やっぱり男にとって、Z軸は憧れの対象だと思います。
WebGL とかthree.js とかを使いこなしている人は、羨望の対象でしかありません。かっこいいです、本当に。

今までのパララックスは、Y軸方向にちょこちょこ動かすことによって、視差効果を出しておりました。が、所詮2Dレベルの表現です。　

今回は、少しでも3Dレベルに近づくため、Z軸に挑戦をします。

3. 参考文献

beercamp
magic leap
Mask Text Hover Effect | CSS Tutorial

4. 分解してみる

❶.
マークアップしましょう。

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="css/styles.css" />
  </head>
  <body>
    <div class="container">
      <div class="bgimg"></div>
      <div class="text">
        Hello World
      </div>
    </div>
  </body>
</html>

styles.scss

body {
  background: #fff;
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  width: 100vw;
  height: 100vh;
  background-image: url("../img/starnight.png");
  background-size: 100% 100%;
  background-position: center;
}

.text {
  height: 100vh;
  width: 100%;
  font-size: 170px;
  text-align: center;
  line-height: 200px;
  margin: 100px auto;
}

これで、背景画像の上に、Hello World と乗っただけの、静止画ができます。

以前ご紹介したテクニック
→text の中に、background-clip: text　で、画像を文字の背景に出します。

styles.scss

.text {
  height: 100vh;
  width: 100%;
  font-size: 170px;
  text-align: center;
  line-height: 200px;
  margin: 100px auto;
  background-image: url("../img/starnight.png");
  background-size: 100% 100%;
  background-position: center;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

これで、text に背景画像が適応されます。(画像容量制限でアップできなくてすみません。)


❷.
アニメーションをつけましょう。
背景画像を大きくしたり小さくしたりすることで、Z軸方向の遠近感を出します。

styles.scss

.text {
  height: 100vh;
  width: 100%;
  font-size: 150px;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding-top: 250px;
  background-image: url("../img/starnight.png");
  background-size: 100% 100%;
  -webkit-background-clip: text;
  color: transparent;
  animation: move 8s ease-in-out infinite;
}

@keyframes move {
  50% {
    background-size: 50% 50%;
  }
}

See the Pen Hello World by hiroya iizuka (@hiroyaiizuka) on CodePen.

文字の中身が背景と連動して動くようになりました。


❸.

パララックスは視差効果なので、もう一つ、真逆な動きを取り入れましょう。

文字の中の背景画像は小さくなったので、今度は、.bgimg クラスの背景画像を、逆に大きくしましょう。rotateY180 で逆に配置すると、より素敵です。(Youtubeのアイデアを参考にしてます。)

styles.scss

body {
  background: #fff;
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

.bgimg {
  width: 100vw;
  height: 100vh;
  background-image: url("../img/starnight.png");
  background-size: 100% 100%;
  background-position: center;
  transform: rotateY(180deg);
  animation: move2 8s ease-in-out infinite;
}

.text {
  height: 100vh;
  width: 100%;
  font-size: 150px;
  letter-spacing: 10px;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding-top: 250px;
  background-image: url("../img/starnight.png");
  background-size: 100% 100%;
  background-position: center;
  -webkit-background-clip: text;
  color: transparent;
  animation: move 8s ease-in-out infinite;
}

@keyframes move {
  50% {
    background-size: 50% 50%;
  }
}

@keyframes move2 {
  50% {
    background-size: 150% 150%;
  }
}

See the Pen World Parallax by hiroya iizuka (@hiroyaiizuka) on CodePen.

できました！
このように、パララックス = 視差効果を利用して、2つの物体を逆に動かすことで、奥域が生まれます。面白い効果ですね。　

早く、画像アップロード制限が解除されることを祈るばかりです。
それでは、また明日〜