20210124のCSSに関する記事は17件です。

tailwindcss のデフォルトの単位を rem から px に変更する方法

tailwindcss はデフォルトの単位が rem になっています。

既存のプロジェクトに tailwindcss を導入する際、既に <html> に font-size が指定してされている場合(16px 以外)、プレイグラウンドや他のプロジェクトからエレメントをコピーした場合にサイズが変わってしまいます。

ですので、単位を px に変更したいと思います。

変更する場合は、tailwind.config.js を修正します。
(下記の例では spacing と borderRadius を変更しています)

ブラウザの <html> の font-size は 16px(大体) ですので、 1: '0.25rem',1: `${16 * 0.25}px`, と変更します。
default configuration

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
    spacing: {
      px: "1px",
      0: "0px",
      0.5: `${16 * 0.125}px`,
      1: `${16 * 0.25}px`,
      1.5: `${16 * 0.375}px`,
      2: `${16 * 0.5}px`,
      2.5: `${16 * 0.625}px`,
      3: `${16 * 0.75}px`,
      3.5: `${16 * 0.875}px`,
      4: `${16 * 1}px`,
      5: `${16 * 1.25}px`,
      6: `${16 * 1.5}px`,
      7: `${16 * 1.75}px`,
      8: `${16 * 2}px`,
      9: `${16 * 2.25}px`,
      10: `${16 * 2.5}px`,
      11: `${16 * 2.75}px`,
      12: `${16 * 3}px`,
      14: `${16 * 3.5}px`,
      16: `${16 * 4}px`,
      20: `${16 * 5}px`,
      24: `${16 * 6}px`,
      28: `${16 * 7}px`,
      32: `${16 * 8}px`,
      36: `${16 * 9}px`,
      40: `${16 * 10}px`,
      44: `${16 * 11}px`,
      48: `${16 * 12}px`,
      52: `${16 * 13}px`,
      56: `${16 * 14}px`,
      60: `${16 * 15}px`,
      64: `${16 * 16}px`,
      72: `${16 * 18}px`,
      80: `${16 * 20}px`,
      96: `${16 * 24}px`,
    },
    borderRadius: {
      none: "0px",
      sm: `${16 * 0.125}px`,
      DEFAULT: `${16 * 0.25}px`,
      md: `${16 * 0.375}px`,
      lg: `${16 * 0.5}px`,
      xl: `${16 * 0.75}px`,
      "2xl": `${16 * 1}px`,
      "3xl": `${16 * 1.5}px`,
      full: "9999px",
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

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

【CSS】セレクタの記号の意味を実例で理解する。 スペース、>(大なり)、+(プラス)、,(カンマ)、.(ドット)

CSSのセレクタで使われているスペースや>(大なり)、(プラス)、,(カンマ)、.(ドット)などの機能の確認。

目次

  1. スペース
  2. >(大なり)
  3. +(プラス)
  4. ,(カンマ)
  5. .(ドット)
  6. *(アスタリスク)


1. スペース

子孫要素、つまり配下のすべての要素が対象となる。
親要素 子孫要素 {処理}

▼実例

.html
<div class="parent">
  parent 親要素
  <div class="child">
    child 子要素
    <div class="grand-child">
      grand-child孫要素
      <p class="great-grandchild">great-grandchild ひ孫要素</p>
      <span class="great-grandchild">great-grandchild ひ孫要素</span>
    </div>
  </div>
</div>
.css
.parent p {
  color: red;
}

クラス属性parentの配下のpタグに赤色を適用する。



▼ブラウザの表示

image.png



▼例2

.css
.parent .grand-child {
  color: red;
}

クラス属性parent配下のクラス属性grand-childに適用する。

image.png

指定したdivの中のテキストが赤色になる。


2. >(大なり)

子要素、つまり直下の要素にのみ適用する。

親要素 > 子要素 {処理}

▼実例

.html
<div class="parent">
  parent 親要素
  <div class="child">
    child 子要素
    <div class="grand-child">
      grand-child孫要素
      <p class="great-grandchild">great-grandchild ひ孫要素</p>
      <span class="great-grandchild">great-grandchild ひ孫要素</span>
    </div>
  </div>
</div>
.css
.grand-child > p {
  color: red;
}

クラス属性grand-child直下のpタグにのみ適用する。

image.png



▼例2

.css
.parent > p {
  color: red;
}

クラス属性parent直下にpタグが存在しないので、何も変化しない。

image.png



▼例3

.css
div > p {
  color: red;
}

divタグ直下のpタグに適用する。この関係が成り立つのは1箇所ある。

image.png


3. +(プラス)

隣接要素、つまり、同じ深さ(兄弟要素)に適用する。

親要素 + 隣接要素 {処理}

▼実例

.html
<div class="parent">
  (div)parent 親要素
  <div class="child">
  (div)child 子要素
    <div class="grand-child">
    (div)grand-child孫要素
      <p class="great-grandchild">(p)great-grandchild ひ孫要素</p>
      <span class="great-grandchild">(span)great-grandchild ひ孫要素</span>
    </div>
  </div>
  <p class="child-brother">(p)child-brother 子の兄弟</p>
  <span class="child-brother">(span)child-brother 子の兄弟</p>
</div>
.css
div + p {
  color: red;
}

divタグと隣接する(同じ深さにある)pタグにのみ適用する。

image.png



▼例2

.css
.parent + p {
  color: red;
}

クラス属性parentと同じ深さにpタグが存在しないので、何も変化しない。

image.png


4. ,(カンマ)

複数のセレクタに適用する。これと、あれと、あれ、、

要素1, 要素2, ,,, {処理}

▼実例

.html
<div class="parent">
  (div)parent 親要素
  <div class="child">
  (div)child 子要素
    <div class="grand-child">
    (div)grand-child孫要素
      <p class="great-grandchild">(p)great-grandchild ひ孫要素</p>
      <span class="great-grandchild-sapn">(span)great-grandchild ひ孫要素</span>
    </div>
  </div>
  <p class="child-brother">(p)child-brother 子の兄弟</p>
  <span class="child-brother-span">(span)child-brother 子の兄弟</p>
</div>
.css
.great-grandchild, span {
  color: red;
}

クラス属性great-grandchildとspanタグに適用する。

image.png


5. .(ドット)

IDではなく、ある要素との連結で使われる場合のドットについて。
指定した要素で、かつ次に指定した要素を持つもの。対象セレクタの絞り込み

要素1要素2 {処理}

▼実例

.html
<div class="parent">
  (div)parent 親要素
  <div class="child">
  (div)child 子要素
    <div class="grand-child">
    (div)grand-child孫要素
      <p class="great-grandchild">(p)great-grandchild ひ孫要素</p>
      <span class="great-grandchild-sapn">(span)great-grandchild ひ孫要素</span>
    </div>
  </div>
  <p class="child-brother">(p)child-brother 子の兄弟</p>
  <span class="child-brother-span">(span)child-brother 子の兄弟</p>
</div>
.css
p.great-grandchild {
  color: red;
}

pタグの中でクラス属性great-grandchildを持つものに適用する。

image.png



▼例2

.css
.great-grandchild.third {
  color: red;
}

クラス属性.great-grandchildと.thirdの両方を持つクラスに適用する。


6. *(アスタリスク)

すべての要素に適用する。スペースでつなげば絞り込みになる。

* {処理}

親要素 * {処理}

▼実例

.html
<div class="parent">
  (div)parent 親要素
  <div class="child">
  (div)child 子要素
    <div class="grand-child">
    (div)grand-child孫要素
      <p class="great-grandchild">(p)great-grandchild ひ孫要素</p>
      <span class="great-grandchild-sapn">(span)great-grandchild ひ孫要素</span>
    </div>
  </div>
  <p class="child-brother">(p)child-brother 子の兄弟</p>
  <span class="child-brother-span">(span)child-brother 子の兄弟</p>
</div>
.css
*{
  color: red;
}

すべての要素に適用する。

image.png



▼例2

.css
.grand-child *{
  color: red;
}

クラス属性.grand-childの配下の要素すべてに適用する。

image.png



▼例3

.css
.child + *{
  color: red;
}

クラス属性.childと隣接するすべての要素に適用する。

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

【CSS】セレクタの記号の意味を実例で理解する。 スペース、>(大なり)、*(アスタリスク)+(プラス)、,(カンマ)、.(ドット)

CSSのセレクタで使われているスペースや>(大なり)、(プラス)、,(カンマ)、.(ドット)などの機能の確認。

目次

  1. スペース
  2. >(大なり)
  3. +(プラス)
  4. ,(カンマ)
  5. .(ドット)
  6. *(アスタリスク)


1. スペース

子孫要素、つまり配下のすべての要素が対象となる。
親要素 子孫要素 {処理}

▼実例

.html
<div class="parent">
  parent 親要素
  <div class="child">
    child 子要素
    <div class="grand-child">
      grand-child孫要素
      <p class="great-grandchild">great-grandchild ひ孫要素</p>
      <span class="great-grandchild">great-grandchild ひ孫要素</span>
    </div>
  </div>
</div>
.css
.parent p {
  color: red;
}

クラス属性parentの配下のpタグに赤色を適用する。



▼ブラウザの表示

image.png



▼例2

.css
.parent .grand-child {
  color: red;
}

クラス属性parent配下のクラス属性grand-childに適用する。

image.png

指定したdivの中のテキストが赤色になる。


2. >(大なり)

子要素、つまり直下の要素にのみ適用する。

親要素 > 子要素 {処理}

▼実例

.html
<div class="parent">
  parent 親要素
  <div class="child">
    child 子要素
    <div class="grand-child">
      grand-child孫要素
      <p class="great-grandchild">great-grandchild ひ孫要素</p>
      <span class="great-grandchild">great-grandchild ひ孫要素</span>
    </div>
  </div>
</div>
.css
.grand-child > p {
  color: red;
}

クラス属性grand-child直下のpタグにのみ適用する。

image.png



▼例2

.css
.parent > p {
  color: red;
}

クラス属性parent直下にpタグが存在しないので、何も変化しない。

image.png



▼例3

.css
div > p {
  color: red;
}

divタグ直下のpタグに適用する。この関係が成り立つのは1箇所ある。

image.png


3. +(プラス)

隣接要素、つまり、同じ深さ(兄弟要素)に適用する。

親要素 + 隣接要素 {処理}

▼実例

.html
<div class="parent">
  (div)parent 親要素
  <div class="child">
  (div)child 子要素
    <div class="grand-child">
    (div)grand-child孫要素
      <p class="great-grandchild">(p)great-grandchild ひ孫要素</p>
      <span class="great-grandchild">(span)great-grandchild ひ孫要素</span>
    </div>
  </div>
  <p class="child-brother">(p)child-brother 子の兄弟</p>
  <span class="child-brother">(span)child-brother 子の兄弟</p>
</div>
.css
div + p {
  color: red;
}

divタグと隣接する(同じ深さにある)pタグにのみ適用する。

image.png



▼例2

.css
.parent + p {
  color: red;
}

クラス属性parentと同じ深さにpタグが存在しないので、何も変化しない。

image.png


4. ,(カンマ)

複数のセレクタに適用する。これと、あれと、あれ、、

要素1, 要素2, ,,, {処理}

▼実例

.html
<div class="parent">
  (div)parent 親要素
  <div class="child">
  (div)child 子要素
    <div class="grand-child">
    (div)grand-child孫要素
      <p class="great-grandchild">(p)great-grandchild ひ孫要素</p>
      <span class="great-grandchild-sapn">(span)great-grandchild ひ孫要素</span>
    </div>
  </div>
  <p class="child-brother">(p)child-brother 子の兄弟</p>
  <span class="child-brother-span">(span)child-brother 子の兄弟</p>
</div>
.css
.great-grandchild, span {
  color: red;
}

クラス属性great-grandchildとspanタグに適用する。

image.png


5. .(ドット)

IDではなく、ある要素との連結で使われる場合のドットについて。
指定した要素で、かつ次に指定した要素を持つもの。対象セレクタの絞り込み

要素1要素2 {処理}

▼実例

.html
<div class="parent">
  (div)parent 親要素
  <div class="child">
  (div)child 子要素
    <div class="grand-child">
    (div)grand-child孫要素
      <p class="great-grandchild">(p)great-grandchild ひ孫要素</p>
      <span class="great-grandchild-sapn">(span)great-grandchild ひ孫要素</span>
    </div>
  </div>
  <p class="child-brother">(p)child-brother 子の兄弟</p>
  <span class="child-brother-span">(span)child-brother 子の兄弟</p>
</div>
.css
p.great-grandchild {
  color: red;
}

pタグの中でクラス属性great-grandchildを持つものに適用する。

image.png



▼例2

.css
.great-grandchild.third {
  color: red;
}

クラス属性.great-grandchildと.thirdの両方を持つクラスに適用する。


6. *(アスタリスク)

すべての要素に適用する。スペースでつなげば絞り込みになる。

* {処理}

親要素 * {処理}

▼実例

.html
<div class="parent">
  (div)parent 親要素
  <div class="child">
  (div)child 子要素
    <div class="grand-child">
    (div)grand-child孫要素
      <p class="great-grandchild">(p)great-grandchild ひ孫要素</p>
      <span class="great-grandchild-sapn">(span)great-grandchild ひ孫要素</span>
    </div>
  </div>
  <p class="child-brother">(p)child-brother 子の兄弟</p>
  <span class="child-brother-span">(span)child-brother 子の兄弟</p>
</div>
.css
*{
  color: red;
}

すべての要素に適用する。

image.png



▼例2

.css
.grand-child *{
  color: red;
}

クラス属性.grand-childの配下の要素すべてに適用する。

image.png



▼例3

.css
.child + *{
  color: red;
}

クラス属性.childと隣接するすべての要素に適用する。

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

デベロッパーツールで他人のサイトの見た目を変更したまま更新しても維持する方法

先に述べますが、表題そのままの解決ができたわけではありません。真っ赤な嘘となります。
発生した課題の解決自体はできています。

やりたかったこと

-Chromeのデベロッパーツールで他者のサイトのスタイルシートを好みの状態にイジった後、更新したり再度訪問してもその状態を維持したい
-Twitter Webの右側にあるトレンドを消し去りたかった。タイムラインで情報は追いかけたいが、トレンドは嫌でも目について気が散ってしまう

通常の検索でわかったこと

-「デベロッパーツール」を軸にしたキーワードで検索
-デベロッパーツールでsave overrideをすることで、更新・再訪問しても、デベロッパーツールを開けば変更した状態を維持できるが、デベロッパーツールを開いていない状態では変更は反映されない

検索方法を変えてわかったこと

-拡張機能も検討したが、「デベロッパーツールの固定」といったキーワードではやはり見当たらない
-そもそも直で「twitter トレンドエリアを消す デベロッパーツール」と検索したところ、こちらのサイトがヒット

使った拡張機能

Stylus

学んだこと

-実は当初は拡張機能も探していたが、思いつく限りの検索ワードでは「過去に使えていたXXXという拡張機能が今は使えない」というような記事しかHitしなくて諦めていた
-今回のように「ツイッターのトレンドエリアを消す」といったような、全く別の検索アプローチ--ユーザーの多いコンテンツを軸に何らかの状況を限定した想定--で目当てのものが見つかることもある。今回はもともとの目的のキーワードでHitしたからよかったものの、情報自体はネットに転がっているが、そのキーワードおよび存在自体を知らない場合もあるので、やはり幅広い知識を持つことは重要である

さいごに

-参考先ページにもあるが、ChromeだけでなくFireFoxでも利用可能 Stylus(FF版)
-ググり方の上手さが大事だというが、ここまで斜めだとは思わなかった

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

【CSS】htmlとcssでモーダルを作成する方法。(擬似要素と擬似クラスの活用)

擬似要素と擬似クラスを使うとモーダルを簡単に作成することができる。

modal.gif

擬似要素の::after, ::before,擬似クラスの:targetを使う。

(参考)擬似要素と擬似クラスとは?

ソースコード

.html
<a href="#modal">モーダルを表示</a>

<div id="modal">
  <div class="message-wrapper">
    <a href="#" class="close"></a>
    <div class="message-box">
      モーダルです。<br>
      元の画面に戻るには閉じるアイコンか、<br>
      枠の外をクリックしてください<br>
    </div>
  </div>
</div>
.css
/*1. デオフォルト非表示にする*/
#modal {
  display: none;
}


/*2. 内部リンククリックで適用する*/
#modal:target{
  width: 100%;
  height: 100%;
  position: absolute; 
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}


/*3. メッセージBOX(テキスト部)*/
#modal .message-box {
  position: relative;
  background-color:  gold;
  padding: 20px;
  height: 80px;
  cursor: default;
}

/*4. 閉じる領域のためのアンカー*/
#modal .close {
  position: relative;
  display: block;
}

/*5. 枠外の閉じる領域*/
#modal .close::before {
  content: "";
  background: rgba(0, 0, 0, 0.6);
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  cursor: default;
}


/*6. 閉じるボタン*/
#modal .close::after {
  content: "x";
  color: white;
  position: absolute;
  right: -1rem;
  top: -1rem;
  width: 2rem;
  height: 2rem;
  z-index: 1;
  border-radius: 50%;
  background-color: black;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}


解説

1. デオフォルト非表示にする

.css
/*1. デオフォルト非表示にする*/
#modal {
  display: none;
}

id="modal"を非表示にしている。


2. 内部リンククリックでcssを適用する

.css
/*2. 内部リンククリックで適用する*/
#modal:target{
  width: 100%;
  height: 100%;
  position: absolute; 
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

:target
この擬似クラスを使うと、内部リンクをトリガーとして、リンク先の要素にcssを適用することができる。

なお、:targetの適用をオフにする(初期状態に戻す)には、ページトップへの内部リンクをクリックする。

・ページトップへの内部リンク:<a href="#">



▼処理の流れ

.html
<a href="#modal">モーダルを表示</a>

(1)上記リンクで、id="modal"の要素に飛ぶ
 ↓
(2)cssの#modal:targetが発火

ちなみに、:targetを仕掛ける対象は同一タグ内のクラス属性でも発火する。

例:<div id="modal" class="hide">としてcsshide:target{処理}でも発火する。

 ↓
(3)ページトップへの内部リンク:<a href="#">クリックで:targetのcssが外れる。



・画面いっぱいに表示

width: 100%;
height: 100%;

ただし、このままでは上のdiv要素の下に現在の画面と同じ大きさの要素が生成され、画面全体が下にズレるので以下プロパティを加える。



absoluteで要素の位置を固定

  position: absolute;
  top: 0;
  left: 0;

absoluteのみだと、当初の位置のままなので、topleftで場所を指定する。

親要素にrelativefixedabsoluteがない場合はbodyタグ(ここでは画面)が基準となる。

これで、元ある要素の上に被せて画面いっぱいに表示することができる。



・中身の要素の位置を整える

  display: flex;
  justify-content: center;
  align-items: center;

柔軟なレイアウト指定ができるflexboxを指定する(flex)これで、justify-contentalign-itemsプロパティが使えるようになる。

justify-content: center;はflexの中の要素を横方向の中央に設置する。

align-items: centerはflexの中の要素を縦方向の中央に配置する。

以上で、flexの中身を画面中央に配置完了。



▼子要素の横幅
親要素にflexを適用すると、子要素の幅は指定がない場合、子要素が内部に持っている幅に自動で調整される。

flexでない場合、block要素は画面横幅いっぱい(100%)となる。


3. メッセージBOX(テキスト部)

.css
/*3. メッセージBOX(テキスト部)*/
#modal .message-box {
  position: relative;
  background-color:  gold;
  padding: 20px;
  height: 80px;
  cursor: default;
}

メッセージ部分のレイアウトを調整。

position: relative;
これがないと、兄弟要素の閉じるボタン(aタグ)にpositionを適用した際にaタグ要素よりも裏側に回ってしまう。

positionを設定することで記述の順番通り、こちらがaタグよりも上側に表示される。

.html
    <a href="#" class="close"></a>
    <div class="message-box">
      モーダルです。<br>
      元の画面に戻るには閉じるアイコンか、<br>
      枠の外をクリックしてください<br>
    </div>

cursor: default;
矢印マークのポインタが表示される。(環境設定を変更している場合はデフォルトで設定しているもの)

これがないと、テキストの上を通過するときに、テキスト入力アイコンになる。


4. モーダルを閉じる領域のためのアンカー

.css
/*4. 閉じる領域のためのアンカー*/
#modal .close {
  display: block;
  position: relative;
}

閉じるアクションとして、(1)閉じるボタンを::afterで(2)閉じる領域::beforeで設定する。

上記処理で、閉じるアクションとなるaタグのデフォルト位置を指定している。



display: block;
aタグはデフォルトinline要素で、兄弟要素のdivの前方に配置されてしまう。

div要素の上に表示させるためblockに変更。

position: relative;
親要素をposition: relative;とすることで、子要素を親要素の位置を基準にして動かすことができるようになる。


5. 枠外の閉じる領域

.css
/*5. 枠外の閉じる領域*/
#modal .close::before {
  content: "";
  background: rgba(0, 0, 0, 0.6);
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  cursor: default;
}

擬似要素::beforeでaタグ(class="close")の前方に閉じる領域を作成している。

content: "";
::beforeで使うプロパティ。今回はテキストや画像を挿入しないので空であることを明示しておく。

background: rgba(0, 0, 0, 0.6);
背景色。4つ目のパラメータで透明度を指定している。

opacity:
透過なし 1 ⇄ 0 完全透過

・画面全体を覆う
この要素が画面全体を覆うようにする。

 width: 100%;
 height: 100%;

これだけでは要素の領域が確保されていないため変化がない。fixedで画面基準として領域を指定する。

position: fixed;
windowを基準点とする。位置を指定しない場合は現在位置をが基点のままとなる。

現在位置を基点とし、windowと同じサイズの半透明の黒枠が表示されるようになる。

・位置の指定

  top: 0;
  left: 0;

黒枠の設置位置を画面左上に固定する。これで画面全体を覆った黒枠が表示完了。

cursor: default;
ポインタをデフォルトの矢印にする。
これがないと、aタグの延長要素なので指マークのポインタになってしまう。


6. 閉じるボタン

.css
/*6. 閉じるボタン*/
#modal .close::after {
  content: "x";
  color: white;
  border-radius: 50%;
  background-color: black;
  position: absolute;
  right: -1rem;
  top: -1rem;
  width: 2rem;
  height: 2rem;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

::afterを使ってaタグの後ろに閉じるボタンを設置する。

・ボタンの作成

  content: "x";
  color: white;
  border-radius: 50%;
  background-color: black;
  width: 2rem;
  height: 2rem;

擬似要素::aftercontentプロパティを指定することで、そのテキスト(や画像)を表示できる。

文字色、枠線、背景色を定義。大きさをremで定義。

rem
サイズの単位の一つ。htmlのデフォルトのフォントサイズを1として、大きさを倍数で指定している。

・ボタンの中身の位置調整
文字を中央に寄せるため、flexのjustify-content: center;align-items: center;を使う。

  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;

・ボタンの位置を指定
ボタンをメッセージボックスの右上に配置する。

  position: absolute;
  right: -1rem;
  top: -1rem;

親要素のaタグがrelativeなので、absoluteとすることで、aタグの位置を基点に場所を指定できる。

aタグはdispaly:blockでblock要素にしている。幅を指定しない場合、親要素の100%の幅となる。

親の親要素がflexになっているため、親要素の幅は兄弟要素のメッセージボックスの幅と同じになっている。

aタグは現在高さを持っていないので、メッセージボックスの右上からマイナス方向に-1remを指定したことになる。

cursor: pointer;
aタグは通常でもポインタになるが念のためあえて指定。



以上。

(参考)mozilla :target

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

Safariでborder-radiusがhoverアニメーション中に効かない時の対処

こういう時に

// HTML
<div class="img_wrap">
  <img src="/img/sample.jpg" alt="">
</div>
// CSS(SCSS)
.img_wrap {
  border-radius: 30px;
  overflow: hidden;

  img {
    transition: transform 0.3s;
    transform-origin: center center;
  }

  &:hover img {
    transform: scale(1.2);
  }
}

こんな感じでホバーした時に画像をズームアップして表示したい、そして角丸でマスクしたい、そういう時にSafariでのみアニメーション中に角丸がなくなってしまうことがあります。

こうすると治るかも

// CSS(SCSS)
.img_wrap {
  border-radius: 30px;
  overflow: hidden;
  will-change: transform; // 画像をラップしている要素にこれを付けます

  img {
    transition: transform 0.3s;
    transform-origin: center center;
  }

  &:hover img {
    transform: scale(1.2);
  }
}

画像をラップしている要素に will-change: transform; を付けましょう。
これで解決する場合がありますので、他の記事などによくある z-index を使用した方法で治らなかった方はこちらを試してみるといいかもしれないですね。

z-indexを使用した方法の記事
safariでborder-radiusが動いてない時の解決法

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

【CSS】コロン2つ::とコロン1つ:の違い。(擬似要素と擬似クラスの違いとそれぞれの使い方)

CSSでコロン2つ(::beforeなど)やコロン1つ(:hoverなど)がついたプロパティの違いについて。


  1. コロン2つ::とコロン1つ:の違い
  2. 擬似要素と擬似クラスの違い
  3. 擬似要素
    1. 擬似要素の一覧
    2. ::before
      1. 前方にテキストを追加する
      2. 前方に画像を追加する
      3. 前方に追加する画像のサイズを変更する
      4. 下線を表示する
      5. 上線を表示する
      6. 左に線を表示する
      7. 注意点
    3. ::after
    4. ::first-letter
    5. ::first-line
  4. 擬似クラス
    1. 擬似クラスの一覧
    2. :hover
    3. :active
    4. :link, :visited
    5. :focus
    6. タグ名:nth-child(n)
    7. :nth-of-type(n)
    8. :target


コロン2つ::とコロン1つ:の違い

  • コロン2つ(::)は擬似要素
  • コロン1つ(:)は擬似クラス


▼例外

コロン2つがつくべき擬似要素でも、コロン1つが使われている場合がある。(例 ::before ⇄ :before)

擬似要素にコロン2つが公式に使われるようになったのはCSS3(2011年以降から)。なので、昔の名残で擬似要素にコロン1つが使われている場合もある。


擬似要素と擬似クラスの違い

  • 要素は適用対象の一部に変化を加えるもの。
  • 擬似クラスは適用対象全体に変化を加えるもの。

▼名前の考え方
どちらも本来のcssではなく、後から処理を追加したり、JSで適用する処理をcssで実現したりする処理なので、擬似がつく。

cssなので適用対象はタグになる。あるタグ全体にcssを適用するときclass属性を使うため、擬似クラスと呼ぶ。

一方で、タグの中の一部の要素にのみ変化を加えるため擬似要素という。

例えば、テキストの文字全体にcssを追加する場合は擬似クラス(:)を使い、テキストの一文字目だけにcssを追加する場合は擬似要素(::)を使う。


擬似要素

擬似要素の一覧

image.png

・(参考)MDN 擬似要素

種類は多く見えるが、::grammer-error::markerなどchromeでサポートしていない仕様もある。


主な擬似要素の実例

1. ::before

指定した要素の前方に新たな要素を追加する(装飾する)。

対象要素::before{ 処理 }
 ┗ contentプロパティで要素を追加できる。
 ┗ 指定がない場合インラインで適用する

・contentプロパティとは?
擬似要素::before::afterでのみ使えるプロパティ。指定した値を追加できる。

実例

1-1. 前方にテキストを追加する

.css
.u-prefix-hello::before{
  content: "こんにちは";
  color: red;
  font-weight: bold;
}

追加するテキストのCSSも定義できる。

.html
<div class="u-prefix-hello">元のテキスト</div>

クラス(or id)属性に::beforeをつける必要はない。
cssの中に、対象のセレクタに対し::beforeが記述してあれば自動的に反映される。

▼ブラウザの表示とソースコード

image.png
image.png

ソースコードの要素を追加した箇所に::beforeと表示される。(※指定したテキストは表示されていない)


1-2. 前方に画像を追加する

contentプロパティの値にurlメソッドでパスを指定する。

.css
.u-prefix-hello::before {
  content: url(/images/small-cat.jpg);
  display: inline-block;
  vertical-align: middle;
}
image.png


1-3. 前方に追加する画像のサイズを変更する

画像自体のサイズを変更することはできない。
このため、画像を表示する枠を用意し、その中に背景として画像を読み込む。

.css
.u-prefix-hello::before {
  content: "";
  display: inline-block;
  width: 100px;
  height: 100px;
  background-image: url(/images/small-cat.jpg);
  background-size: contain;
  vertical-align: middle;
}

content:はあえて""と記述する。

image.png

background-size: contain;
縦横比は保持して、枠に収まる最大サイズになるように背景画像を拡大縮小する。

他にも、autoの場合は自動で画像を繰り返す。coverの場合は枠に収まる最少サイズになるよう拡大縮小する。


1-4. 下線を表示する

::beforeを使うと、テキストに好きな長さの下線を引くことができる。

image.png
.css
.u-prefix-text{
  position: relative;
}

.u-prefix-text::before {
  content: '';
  position: absolute;
  display: inline-block;
  background: gold;
  width: 70px;
  height: 4px;
  bottom: 0;
}

画面ではなく親要素に対して下線を引くため、親要素をposition: relative;にする。

親要素の一番下に線を引きたいため、::beforeposition: absolute;bottom: 0;を指定。あとは色や長さ高さを指定すればOK。


1-5. 上線を表示する

下線でbottom: 0としたところを、top: 0とすればOK。

.css
.u-prefix-text{
  position: relative;
}

.u-prefix-text::before {
  content: '';
  position: absolute;
  display: inline-block;
  background: gold;
  width: 70px;
  height: 4px;
  top: 0;
}
image.png


1-6. 左に線を表示する

image.png

考え方は下線(上線)と同じ。
::beforeで追加した要素のheightを文字サイズと同じにする。線の幅はwidthで指定。

このままだと文字と重なってしまうので、lefttopで線を設置する位置を微調整すればOK。

.css
.u-prefix-text{
  position: relative;
}

.u-prefix-text::before {
  content: '';
  position: absolute;
  display: inline-block;
  background: gold;
  width: 3px;
  height: 20px;
  top: 2px;


注意点

(1) htmlに::beforeの記述は不要

NG
<div class="u-prefix-hello::before">元のテキスト</div>

::beforeも記述するとcssに何も適用されなくなる。

▼ブラウザの表示
image.png
image.png


(2) ::beforeで追加した要素はコピーできない

image.png

ブラウザにはテキストではなく::beforeと表示されている。
値はcssで渡されているため。

image.png


(3) 対象要素のcssは::beforeにも引き継がれる

::beforeをつける前の要素に適用してあるcssは::beforeで追加した要素にも適用される。ただし、同じプロパティを指定した場合は上書きとなる。

.css
.u-prefix-hello{
  font-weight: bold;
  font-size: 24px;
  color:blue;
}

.u-prefix-hello::before{
  content: 'こんにちは';
  color: red;
}
image.png

font-weightやfont-sizeは元の要素の数値が適用される。
一方、colorは::beforeで指定した色で上書きされる。(元の要素はそのまま)



これらの注意点は::afterも同じ。


(補足)yahooニュースの例

image.png

yahooニュースの見出しに、::before::afterが使われている。

▼クラスjeCptP::before::after

image.png


2. ::after

適用の仕方や注意点は::beforeと同じ。
指定した要素の後方を修飾する。

.css
.u-suffix-hello {
  font-weight: bold;
}
.u-suffix-hello::after {
  content: "こんにちは";
  color: red;
}
image.png


3. ::first-letter

指定した要素の一文字めのcssを調整する。

image.png
.css
.u-first-emphasis::first-letter {
  font-size: 20px;
  font-weight: bold;
  color: red;
}
.html
<div class="u-first-emphasis">元のテキスト</div>



▼spanタグを使った場合
spanタグで同じ処理ができるが、::first-letterの方が記述および使い回しが簡単。

.html
<div><span class="u-emphasis"></span>のテキスト</div>
.css
.u-emphasis {
  font-size: 20px;
  font-weight: bold;
  color: red;
}


4. ::first-line

<br>で改行された文章の1行目のcssを変更する。

image.png
.css
.u-line-emphasis::first-line {
  color: blue;
  font-size: 18px;
  font-weight: bold;
}
.html
<div class="u-line-emphasis">
Lorem ipsum dolor sit amet,<br>
consectetur adipisicing elit,<br>
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>


擬似クラス

擬似クラスの一覧

image.png

・(参考)MDN 擬似クラス


主な擬似クラス

既存の要素にcssを追加する擬似クラス。

aタグのテキストを訪問状態によって色を変えたりする:linkvisitedやホバーしたときにcssを適用する:hoverなどがある。

1. :hover

hover処理がcssのみで簡単に適用できる。

hover.gif
.css
.u-hover-yellow:hover {
  color: rgb(219, 219, 9);
  font-size: 32px;
  font-weight: bold;
}
.html
<div class="u-hover-yellow">元のテキスト</div>


2. :active

:activeを使うと、クリック中のcssを指定することができる。

active.gif
.css
.u-active-red:active {
  color: red;
  font-size: 32px;
  font-weight: bold;
}
.html
<div class="u-active-red">元のテキスト</div>
<a class="u-active-red">aタグのリンク</div>


3. :link, :visited

:link
aタグのクリック前のcssを指定する。

:visited
aタグのクリック後のcssを指定する。

visited.gif
.css
.u-link-green:link {
  color: green;
}

.u-visited-gold:visited {
  color: gold;
}
.html
<a class="u-link-green u-visited-gold" href="/">aタグのリンク</div>


4. :focus

focusを持つ要素に対して、focus時のcssを指定できる。

focus.gif
.css
.u-focus-red:focus{
  background-color:lightyellow;
  color: red;
  font-weight: bold;
}
.html
名前:<input class="u-focus-red" type="text" value="テスト 太郎"><br><br>
メッセージ:<textarea class="u-focus-red" >

▼focusを持つ要素
a, area, button, details, input, iframe, select, textarea


5. タグ名:nth-child(n)

指定したタグn番目の要素にcssを適用する。

  • セレクタはタグ名であること(.や#は不可)
  • 引数は、2nやodd, evenでの指定もできる。
  • 他のタグの兄弟要素もカウントする
image.png
.css
ul li:nth-child(odd){
  color: red;
  font-size: 18;
}

引数でoddを渡したので、1, 3番目のliタグが赤くなる。

.html
  <ul>
    <li>liタグ1</li>
    <li>liタグ2</li>
    <li>liタグ3</li>
    <li>liタグ4</li>
  </ul>



▼注意点

  • 兄弟要素に他の要素があるとそれもカウントする
  • cssが適用されるのは指定した番号の指定したタグのみ

例えば、上記例でulタグの中の一番上にspanタグを挿入すると、カウント1はspanタグになる。

image.png
.css
ul li:nth-child(odd){
  color: red;
  font-size: 18;
}
.html
  <ul>
    <span>spanタグ</span>
    <li>liタグ1</li>
    <li>liタグ2</li>
    <li>liタグ3</li>
    <li>liタグ4</li>
  </ul>

1番目はspanタグ。よって、3番目のliタグ(liタグ3)と、5番目のliタグ(liタグ4)にcssが適用される。


6. :nth-of-type(n)

異なる兄弟要素のタグはカウントしない場合は:nth-of-typeを使う。

.css
ul li:nth-of-type(odd){
  color: red;
  font-size: 18;
}
.html
  <ul>
    <span>spanタグ</span>
    <li>liタグ1</li>
    <li>liタグ2</li>
    <li>liタグ3</li>
    <li>liタグ4</li>
  </ul>
image.png

spanタグはカウントせず、liタグのみカウントしてcssを適用している。


7. :target

:targetクラスを使うとaタグの内部リンクへのジャンプに合わせてリンク先の要素にcssを適用することができる。

target.gif
.css
.hide {
  display: none;
}

.hide:target{
  display: block;
  color: white;
  background: lightgray;
  height: 60px;
  width:70%;
}
.html
<ul>
  <li><a href="#message">:targetクラスを適用</a></li>
  <li><a href="#">他の要素にジャンプ(:targetが外れる)</a></li>
</ul>

<div id="message" class="hide">
  デフォルトdisplay="none"で非表示のメッセージです。
</div>

:targetはページ内のリンク(<a href="#~">)で発火し、リンク先の要素にcssを適用する。

ページトップのリンク(<a href="#">)には要素が存在しないため、:targetのcssが外れる。

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

マイコーディングルーティン

はじめに

制作会社を通して作業前に確認する必要があることを備忘録として簡単にまとめました。

スケジュール・仕様確認

・納期
・サーバーは自社で作成 or 提供か
・サイトマップ,ディレクトリ構造
・新規or既存サイトの有無(記事の流用もあるのか)
・更新の可能性のある場所
・動的、静的、フォームの有無、その他ソース提供
・システム導入(スクラッチ or  WP or その他CMS)
・ブラウザ対応どこまで
・インクルード
・ブレイクポイント(間の調整)
・ディスクリプションなどのメタタグ
・SNS アカウント、ogpタグ
・デザイン校了しているか

デザイン

・画像書き出し(pc,sp用)
・フォント設定(できれば特殊なフォントはなしにしてもらう。)
・可能な限りないフォントはDL。有料だったり、どうしてもない時は相談・もらう。
 ・サイズ、テキスト関連(フォントサイズ、字間、太さ、フォントの種類と有無)
・画像(Img)なのか背景(bg)にする部分と画像の形式
・サイトの動き、アニメーション(ボタンや各セクションのアニメーション)

コーディング

・コーディングルール(インデント、命名規則、レスポンシブ、SEO、アクセシビリティなど)
※READMEを用意しておくと共有が早い
・画像圧縮
・ SEO,アクセスビリティ( role属性入れる)
お客さん側で更新するもの(newsやblog,商品登録系)で文字数が長くなったときのレイアウト調整も視野に入れる。

◎複数で作業することも考えて

・ルール共有(css/FLOCCSS+BEM,gulp)
・FTP接続情報共有
・git ・・・ github/gitrub /backlog
・画像圧縮
・ディレクトリの作成(jsやcss,htmlファイルの作成の方法)
・ボタンのホバー、クリックイベント
・静的と動的
※工数やサイトの規模などによりルール変動あり。

チェック

・デザイン確認(jpgで書き出したものやperfectPixel利用)
 ※できたらデザイン作成者にみてもらう
・レイアウトやアニメーションのチェック
・ソースチェック(html/css検証サイトで確認)
・更新性のあるテキストや画像のレイアウトチェック
・各種リンクチェック
・各ブラウザ、タブレット、スマホでの確認
・アニメーションやjs部分の挙動確認

さいごに

適宜気づいたことや仕様の変更などあれば追記・修正します。

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

基礎学習

未経験からWeb系エンジニアの転職を目指しています。
これまで、Progateを中心にHTML、CSS、JavaScript等の学習、
書籍を用いてRubyの学習、Ruby on Rails チュートリアルを用いてRailsの学習を行ってきました。

今週頭から某プログラミングスクールを受講しましたが、自分の学習スタイルとは合わないと感じ、
3日で退会しました(返金保証あり)。

スクール退会後、雑食系エンジニアサロンに入会しました。
サロンで提供してくださっているロードマップにしたがって、基礎学習(復習なので1週間ほど)、
ポートフォリオの作成、転職活動を行っていきます。

まずは、良質なポートフォリオ作成に向けて、
残りの1月中、1週間程度で基礎学習(復習)を行っていきます。

学習事項は、
・コンピュータサイエンス基礎
・Linux
・HTML/CSS
・JavaScript
・Ruby
・RDBとSQL
・GitとGithub
・Ruby on Rails
です。

このうち
・コンピュータサイエンス基礎
・Ruby on Rails
はそれぞれ、
書籍、Ruby on Railsチュートリアルで学習し、
改めて学習し直す必要は無いと思うので、
残りを学習していきます。

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

HTMLElement.styleではデフォルトのCSSシート記述情報は取れないので別の方法でとる

ちょっとだけハマったので備忘録も兼ねて。
html要素をjsで取得し、キーボードを叩くと対象のheightが10pxずつ増えるとします。

<!--html-->
<div class="box">
</div>

<style>
//css
.box{
    height: 100px;
    width: 100px;
    background-color:blue;
}
</style>

//javascript
let box = document.getElementsByClassName("box").item(0);
let body = document.getElementsByTagName('body').item(0);

//body内でキーボードが押されるとboxの高さが増える
body.addEventListener('keydown',function(){
   let boxheight = box.style.height;//現在の高さ
   box.style.height = boxheight + 10 + 'px';
});

こうすると、反応はしますがなんと多少の高さが10pxになってしまいます。
デフォルトでは100pxなので、 +10つまり110pxになるべきでは?ということで
console.log("現在の高さ" + boxheight);
してみると、何も出ず。情報が取れてません。

調べてみると、

htmlelement.styleでは、デフォルトでcssに記述されている情報は取得できないようです。

(※なお、box.style.height = boxheight + 10 + 'px';でjsで操作した後は、)
htmlelement.style(つまりbox.style.height)でも高さ(10px)が取得できます。
jsで一度取得した後は操作できるようですね。

対応方法

この場合、要素の高さは、
・対象.offsetHeight
・getComputedStyle(対象).style
などでとるとうまくいきます。

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

HTMLElement.styleではデフォルトのCSS記述情報は取れないので別の方法でとる

ちょっとだけハマったので備忘録も兼ねて。
html要素をjsで取得し、キーボードを叩くと対象のheightが10pxずつ増えるとします。

<!--html-->
<div class="box">
</div>

<style>
//css
.box{
    height: 100px;
    width: 100px;
    background-color:blue;
}
</style>

//javascript
let box = document.getElementsByClassName("box").item(0);
let body = document.getElementsByTagName('body').item(0);

//body内でキーボードが押されるとboxの高さが増える
body.addEventListener('keydown',function(){
   let boxheight = box.style.height;//現在の高さ
   box.style.height = boxheight + 10 + 'px';
});

こうすると、反応はしますがなんと高さが10pxになってしまいます。
デフォルトでは100pxなので、 +10つまり110pxになるべきでは?ということで
console.log("現在の高さ" + boxheight);
してみると、何も出ず。高さの情報が取れてません。

調べてみると、

htmlelement.styleでは、デフォルトでcssに記述されている情報は取得できないようです。

(※なお、box.style.height = boxheight + 10 + 'px';でjsで操作した後は、)
htmlelement.style(つまりbox.style.height)でも高さ(10px)が取得できます。
jsで一度取得した後は操作できるようですね。

対応方法

この場合、要素の高さは、
・対象.offsetHeight
・getComputedStyle(対象).style
などでとるとうまくいきます。

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

【初心者でもわかる】条件をつけて、:not()で〇〇以外にだけCSSを当てる方法

どうも7noteです。特定の要素以外にCSSを当てる書き方を解説

条件付きでCSSを当てられたら便利だと思いませんか?
そんな便利な方法(書き方)があります。

:not()で特定の要素以外にだけCSSを当てる

index.html
<p>pタグ</p>
<p>pタグ</p>
<p>pタグ</p>
<p>pタグ</p>
style.css
/* 3番目の要素以外を赤文字にする */
p:not(:nth-child(3)) {
color: #f00;
}

ptag.png

このようにカッコ()の中に特定のセレクタを指定することで、その要素をCSSの適応範囲から除外することができます。

:から始まるような疑似セレクタだけでなく、特定のクラス名がついていないものにだけ指定することもできます。

index.html
<p>pタグ</p>
<p class="check">pタグ</p>
<p>pタグ</p>
<p class="check">pタグ</p>
style.css
/* クラス.check以外を赤文字にする */
p:not(.check) {
color: #f00;
}

class.png

:not([class])で全くクラスがついていない要素にだけ効かせることも可能

複数の種類のクラスがあるが、一切クラスのついていないものにだけCSSを効かせる書き方があります。

index.html
<p class="point">pタグ</p>
<p>pタグ</p>
<p class="crnt">pタグ</p>
<p>pタグ</p>
style.css
/* クラスがついていないものを赤文字にする */
p:not([class]) {
color: #f00;
}

class2.png

まとめ

頻繁に使うことはないですが、知ってるのと知らないのとでは作業スピードも対応幅も変わってくるtipsです。
ぜひ使ってみてほしいです!

参考:https://gotohayato.com/content/451/

おそまつ!

~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ

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

エンジニア未経験がWordPressでWEBアプリを制作する際につまずいたこと

まず初めにどのようなWEBアプリを作ったのか

AboutMyself」という、プロフィール専門SNSを製作しました。
※内容については、こちらの記事を参照。

AboutMyself」を製作する上でつまずいたこと

  1. SNSを製作する上でのプラグインの選択について困った

    →日本語の説明ブログなどもかなり投稿されていますので、これに関しては「BuddyPress」一択で大丈夫だと思います。

  2. ログイン・登録画面で自分のサイトのUIではなく、WordPressのログイン画面に遷移してしまう。

    →これもプラグインがおすすめです。「Theme My Login」を入れることで、自分のサイトのUIにあったログイン・登録画面に遷移されます。

  3. ログアウト後の画面にログインをしないと見れないメニューが表示される

    →以下のスクショのようにログアウト後の画面に、ログインをしなければ見れない画面が出てきてしまいました。(本来「グループ作成」メニューはログアウト後には必要ない)
    こちらもプラグインを導入しました。「If Menu」というログイン後とログアウト後のメニュー画面の表示を分けられる優れものです!

スクリーンショット 2021-01-24 12.18.32.png

今回WordPressを使ってわかったこと

WordPressを使用することで、プログラミング未経験者でも簡単にWEBアプリが作成できます!プラグインというのは本当に便利な機能ですよね。適宜、欲しい機能にあったプラグインを調べて導入することである程度自由なサイトを構築できます!

最後に「AboutMyself」のご利用もお願いいたします!

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

モーダルで画像・動画を表示!「fancybox3」を使ってみた

自身のポートフォリオ作品(画像)を、ページ遷移ではなくモーダル表示にしたかったので、探してみたところ、「Fancybox3」というモバイルも対応している超優れものを見つけたので、さっそく実装してみました。

◆Fancybox3のサイトはこちら
https://fancyapps.com/fancybox/3/

①ダウンロード

まずは「fancyBox3」のサイトから、データをダウンロードします。
ダウンロード後、自身のローカルリポジトリ内へ読み込み。

ちなみに、

HTML
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>

こちらをHTML内に記述しても実装できました。

②HTMLを記述

HTML
<a data-fancybox="gallery" href="big_1.jpg"><img src="small_1.jpg"></a>
<a data-fancybox="gallery" href="big_2.jpg"><img src="small_2.jpg"></a>

こちらをHTML内に記述したら、なんということでしょう、、あっという間に実装されました!

私はモーダルを表示させた後にキャプションをつけたかったので、

HTML
<a data-fancybox="gallery" href="big_1.jpg" data-caption="****"><img src="small_1.jpg"></a>

data-captionをつけてあげたら、表示されました◎

参考サイト様

モーダルで閲覧できるギャラリーを実装するのにfancyBox3が便利過ぎる。

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

手書き風アニメーション(vivus.js)

はじめに

vivus.jsという素晴らしい、プラグイン?を使用したのでメモとして残します。
まだ理解し切ってないので、本当にメモ書き程度のまとめです。

完成イメージ

0e9aa538d9f132f8a47f44da50c03897.gif

手順

illustratorで新規作成

・「base」「mask」のレイヤー作成
スクリーンショット 2021-01-23 23.16.39.png

・「base」レイヤーに文字を書く

・文字のオブジェクトの上で「右クリック」→「アウトラインを作成」

・そのまま(選択した状態で)「オブジェクト」→「複合パス」→「作成」

・「base」にロックをかけ、「mask」レイヤーに切り替える

・「ペンツール」で文字をなぞる
※この時、線どうしは被らない様にすると綺麗なアニメーションになる。交差点がある場合は、一旦線を切ってパスギリギリの幅の線を書くといい。

【ペンツールの使用前後の画面】
スクリーンショット 2021-01-23 23.26.38.png
スクリーンショット 2021-01-23 23.22.32.png

・最後にSVGに書き出す。

コーディング

・SVGをエディターで開く
※開いたら、タグ毎に改行すると見やすい

svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 533.98 208.63">
  <defs>
    <style>.cls-1{fill:#f7931e;}.cls-2,.cls-3,.cls-4,.cls-5,.cls-6,.cls-7,.cls-8{fill:none;stroke:#000;stroke-linecap:round;stroke-miterlimit:10;}.cls-2{stroke-width:15px;}.cls-3{stroke-width:14px;}.cls-4{stroke-width:8px;}.cls-5{stroke-width:13px;}.cls-6{stroke-width:5px;}.cls-7{stroke-width:17px;}.cls-8{stroke-width:6px;}</style>
  </defs>
  <g id="base">
    <path class="cls-1" d="M180.64,176.26c30.88,0,43.05,9.81,43.05,19.08,0,16-24.89,23.43-33.79,23.43-2.18,0-3.27-.55-3.27-1.27,0-1.09,1.63-1.82,4.72-2.36,11.81-2.73,27.25-9.27,27.25-19.44,0-7.63-10.72-11.08-33.42-11.08-37.79,0-96.64,25.61-96.64,49.77,0,7.63,4.9,9.63,17.07,9.63,15.08,0,35.79-6.18,53.23-6.18,18.53-.18,33.24,5.27,33.24,20.53,0,35.42-56.31,69.94-112.45,69.94-23.79,0-37.42-9.81-37.42-21.62,0-18.35,32.88-31.61,56-31.61,2.73,0,4.36.55,4.36,1.64s-1.63,2.36-5.63,2.9c-37.78,5.27-48.14,16.54-48.14,25.62,0,8.17,12.36,11.8,32,11.8C127.23,317,185.9,292,185.9,261.28c0-10.54-13.26-12.72-30.51-12.72-13.81,0-30.16,1.45-44.51,1.45C92.53,250,78,246.93,78,232.76,78,203.33,139.58,176.26,180.64,176.26ZM206.42,300.7c0-13.63,13.08-32,27.43-47.6a7.41,7.41,0,0,1,5.64-2.54c2.9,0,5.45,1.82,5.45,4.18a5.29,5.29,0,0,1-1.46,3.09c-10.72,12.35-25.25,29.06-25.25,45.23,0,3.81,1.27,6,4.91,6,9.08,0,20.52-9.26,32.88-27.61a2.27,2.27,0,0,1,1.81-1.27,1.87,1.87,0,0,1,1.82,2c0,2.72-19.8,32.51-39.42,32.51C211.69,314.68,206.42,310,206.42,300.7Zm65.22-95.92c3.27,0,4.54,1.82,4.54,3.82,0,5.26-8.72,14.71-15.26,14.71-3.27,0-4.36-2-4.36-4C256.56,214.23,264.55,204.78,271.64,204.78Zm31.61,109.9c-8.54,0-14.9-4.9-14.9-14.71,0-13.26,12.17-30.34,19.8-40.87-8.36,5.63-16.53,14-24.16,22.52-14.35,16.35-26,33.06-33.06,33.06-4.18,0-6.9-2.36-6.9-7.44,0-9.09,13.8-30.7,28.33-47.42a9.26,9.26,0,0,1,7.09-3.27c2.91,0,5.09,1.28,5.09,3.64a5.31,5.31,0,0,1-1.64,3.63c-15.08,16.89-23.61,31.79-23.61,36,0,.91.36,1.27.9,1.27,2,0,10.36-11.26,20.89-23.25,10.9-12.54,25.25-26.89,35.43-26.89,4.17,0,7.08,1.82,7.08,4.36a4.21,4.21,0,0,1-.91,2.36c-6.54,8.72-22.52,28.52-22.52,44.69,0,4.18,1.45,7.09,5.81,7.09,10.36,0,20.71-9.63,33.06-28a2.28,2.28,0,0,1,1.82-1.27,1.87,1.87,0,0,1,1.82,2C342.67,284.89,322.87,314.68,303.25,314.68ZM335.76,377c-11.63,0-23.62-7.45-23.62-18.35,0-20.16,26.53-21.07,56.5-33.42,2.36-7.45,5.27-15.26,8.54-23.25-7.81,8.35-16.35,14.53-24.53,14.53-11.08,0-17.25-7.81-17.25-19.44,0-22,24.34-47.41,47.77-47.41,10.9,0,15.62,4,19.44,8.36,4.18-4.91,8.35-8.36,11.81-8.36,2,0,2.9,1.45,2.9,3.82,0,8.72-20.53,30.88-32.51,42.14a106.63,106.63,0,0,0-5.45,24.71c1.81-1.09,3.81-2,5.63-3.09a116.41,116.41,0,0,0,38.51-35.79,2.51,2.51,0,0,1,2-1.27c1.09,0,1.63.91,1.63,2,0,2.18-4.9,9.62-14,18.53a143.74,143.74,0,0,1-26.88,20.52c-2.54,1.46-4.91,2.73-7.45,4-1.27,10.9-2.36,21.25-8.17,32.88C363.73,371.72,348.47,377,335.76,377Zm0-3.27c7.63,0,14.89-5.27,20.53-15.62,3.63-6.72,6.72-16.35,10.53-27.61C341.94,340.12,322.13,341,322.13,359,322.13,368.27,327.58,373.72,335.76,373.72Zm20-62.31c8,0,18-10.53,27.07-22.34a170.54,170.54,0,0,1,14.53-24.52c-1.63-5.82-5.81-11.45-14-11.45-17.25,0-35.24,26.16-35.24,44.87C348.11,307.42,350.29,311.41,355.74,311.41Zm97,5.82c-21.07,0-31.79-9.81-31.79-23.8,0-21.07,24.16-43.78,49.59-43.78,11.63,0,18,5.27,18,13.81,0,12.35-18.17,27.25-42.51,27.25a40.86,40.86,0,0,1-11.63-1.46,38.73,38.73,0,0,0-.36,4.54c0,11.27,6.9,18.71,20,18.71,20.53,0,34-11.62,47.05-31.06a2.28,2.28,0,0,1,1.82-1.27,1.86,1.86,0,0,1,1.81,2c0,2.9-10.17,15.08-16.89,21.43C478.17,312.69,466.18,317.23,452.74,317.23ZM435.3,285.07a34.89,34.89,0,0,0,6.18.55c19.8,0,36.51-13.63,36.51-25.25,0-5.09-2.91-6.9-8.54-6.9C456.37,253.47,439.84,268.18,435.3,285.07Zm92.28,29.61c-8.54,0-14-4.54-14-13.26,0-12.89,12.72-23.79,12.72-33.6,0-3.82-3.64-5.27-7.63-6.91-15.08,27.62-32.34,46.87-36.7,46.87-1.27,0-2-.54-2-1.45a2.81,2.81,0,0,1,1.27-2c10.9-8.72,23.07-27.07,33.79-45.05-2.91-1.82-5.45-4.36-5.45-9.08,0-6.36,6.35-12.9,10.71-12.9,2.73,0,4.36,2.36,4.36,6,0,3.27-1.63,7.27-4.36,12,8.36,3.64,17.44,4.36,17.44,13.26,0,10.9-12.9,21.8-12.9,34,0,4.54,1.28,6.72,6,6.72,8.17,0,20.16-9.44,32.52-27.79a2.27,2.27,0,0,1,1.81-1.27,1.87,1.87,0,0,1,1.82,2C567,284.89,547.2,314.68,527.58,314.68Z" transform="translate(-38.71 -173.21)"/>
  </g>
  <g id="mask">
    <path class="cls-2" d="M186.63,217.5s36.87-3,33.87-25-90-12-126,20,8,39,37,33,58-4,57,15-15,31-32,43-68,23-92,19c0,0-21-2-18-21s51-26,55-25" transform="translate(-38.71 -173.21)"/><line class="cls-2" x1="233.79" y1="33.29" x2="221.79" y2="47.29"/><path class="cls-3" d="M240.38,253.1s-38.29,40-26.88,54.4S242,296,242,296" transform="translate(-38.71 -173.21)"/><path class="cls-3" d="M281.57,256.81S250.12,287,251,309" transform="translate(-38.71 -173.21)"/><path class="cls-4" d="M257,308s45.54-52.79,56.27-54.9" transform="translate(-38.71 -173.21)"/><path class="cls-5" d="M318,255s-39.19,49.83-16.5,55.5" transform="translate(-38.71 -173.21)"/><path class="cls-6" d="M306.21,312.43s20.24-6,29.29-22.93" transform="translate(-38.71 -173.21)"/><path class="cls-7" d="M395.15,255s-28.65-12.5-44.65,18.5-8,36-8,36,6,5,10.52,3.82" transform="translate(-38.71 -173.21)"/><path class="cls-8" d="M360,314c-1.3-.73,2.3,2.38,16.5-15.5" transform="translate(-38.71 -173.21)"/><path class="cls-3" d="M413.32,253.47S391,277,382,297s-8,60-29,72-37,5-35-16,43.78-22.49,43.78-22.49" transform="translate(-38.71 -173.21)"/><path class="cls-6" d="M382,322s31.8-20,37.5-32.5" transform="translate(-38.71 -173.21)"/><path class="cls-5" d="M440.5,287.5s27,4.08,39.49-18-11.33-20.41-28.41-12.73" transform="translate(-38.71 -173.21)"/><path class="cls-2" d="M442.5,262.5s-18.74,14-15.37,36,33.08,17.8,43.72,13.4,35.86-30.36,42.65-46.4" transform="translate(-38.71 -173.21)"/><line class="cls-2" x1="480.79" y1="68.29" x2="476.79" y2="79.3"/><path class="cls-2" d="M525.5,260.5s10,4,5,13-20,39.83-4,37.91a46.59,46.59,0,0,0,38.68-31.24" transform="translate(-38.71 -173.21)"/>
  </g>
</svg>

以下雛形をコピペし「3項目」元データのSVGから情報を採取する。
viewBox=""コピペ
<g id="mask">~~~</g>カット&ペースト
xlink:hrefはSVGファイルまでのURIを入力

雛形
<svg xmlns="http://www.w3.org/2000/svg" viewBox="コピペでOK" class="mask" id="move">
    <defs>
        <mask id="clipmask">
            <!-- <g id="mask">~~~</g> をカット&ペースト -->
        </mask>
    </defs>
    <image xlink:href="SVGファイルのURIを入力" width="100%" height="100%" mask="url(#clipMask)"></image>
</svg>

・SVGファイルの<style></style>に書かれている.cls-1{~~~}以外の部分をカット
・CSSファイルにペースト
strokeのプロパティを#fffに変更

css(見やすいよう改行してます)
.cls-2,.cls-3,.cls-4,.cls-5,.cls-6,.cls-7,.cls-8{
    fill:none;
    stroke:#fff;
    stroke-linecap:round;
    stroke-miterlimit:10;
}
.cls-2{
    stroke-width:15px;
}
.cls-3{
    stroke-width:14px;
}
.cls-4{
    stroke-width:8px;
}
.cls-5{
    stroke-width:13px;
}.cls-6{
    stroke-width:5px;
}
.cls-7{
    stroke-width:17px;
}
.cls-8{
    stroke-width:6px;
}

・CDNを読み込み、JSをコピペ

html
<!-- Vivus JS CDN -->
<script src="https://cdn.jsdelivr.net/npm/vivus@latest/dist/vivus.min.js"></script>
<!-- Original JS -->
<script src="./js/main.js"></script>
js
new Vivus('move', {type: 'oneByOne',duration: 100,forceRender: false, animTimingFunction:Vivus.EASE_OUT})

おそらくこれで動くはず。

完成系コード

svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 533.98 208.63">
  <defs>
    <style>.cls-1{fill:#f7931e;}</style>
  </defs>
  <g id="base">
    <path class="cls-1" d="M180.64,176.26c30.88,0,43.05,9.81,43.05,19.08,0,16-24.89,23.43-33.79,23.43-2.18,0-3.27-.55-3.27-1.27,0-1.09,1.63-1.82,4.72-2.36,11.81-2.73,27.25-9.27,27.25-19.44,0-7.63-10.72-11.08-33.42-11.08-37.79,0-96.64,25.61-96.64,49.77,0,7.63,4.9,9.63,17.07,9.63,15.08,0,35.79-6.18,53.23-6.18,18.53-.18,33.24,5.27,33.24,20.53,0,35.42-56.31,69.94-112.45,69.94-23.79,0-37.42-9.81-37.42-21.62,0-18.35,32.88-31.61,56-31.61,2.73,0,4.36.55,4.36,1.64s-1.63,2.36-5.63,2.9c-37.78,5.27-48.14,16.54-48.14,25.62,0,8.17,12.36,11.8,32,11.8C127.23,317,185.9,292,185.9,261.28c0-10.54-13.26-12.72-30.51-12.72-13.81,0-30.16,1.45-44.51,1.45C92.53,250,78,246.93,78,232.76,78,203.33,139.58,176.26,180.64,176.26ZM206.42,300.7c0-13.63,13.08-32,27.43-47.6a7.41,7.41,0,0,1,5.64-2.54c2.9,0,5.45,1.82,5.45,4.18a5.29,5.29,0,0,1-1.46,3.09c-10.72,12.35-25.25,29.06-25.25,45.23,0,3.81,1.27,6,4.91,6,9.08,0,20.52-9.26,32.88-27.61a2.27,2.27,0,0,1,1.81-1.27,1.87,1.87,0,0,1,1.82,2c0,2.72-19.8,32.51-39.42,32.51C211.69,314.68,206.42,310,206.42,300.7Zm65.22-95.92c3.27,0,4.54,1.82,4.54,3.82,0,5.26-8.72,14.71-15.26,14.71-3.27,0-4.36-2-4.36-4C256.56,214.23,264.55,204.78,271.64,204.78Zm31.61,109.9c-8.54,0-14.9-4.9-14.9-14.71,0-13.26,12.17-30.34,19.8-40.87-8.36,5.63-16.53,14-24.16,22.52-14.35,16.35-26,33.06-33.06,33.06-4.18,0-6.9-2.36-6.9-7.44,0-9.09,13.8-30.7,28.33-47.42a9.26,9.26,0,0,1,7.09-3.27c2.91,0,5.09,1.28,5.09,3.64a5.31,5.31,0,0,1-1.64,3.63c-15.08,16.89-23.61,31.79-23.61,36,0,.91.36,1.27.9,1.27,2,0,10.36-11.26,20.89-23.25,10.9-12.54,25.25-26.89,35.43-26.89,4.17,0,7.08,1.82,7.08,4.36a4.21,4.21,0,0,1-.91,2.36c-6.54,8.72-22.52,28.52-22.52,44.69,0,4.18,1.45,7.09,5.81,7.09,10.36,0,20.71-9.63,33.06-28a2.28,2.28,0,0,1,1.82-1.27,1.87,1.87,0,0,1,1.82,2C342.67,284.89,322.87,314.68,303.25,314.68ZM335.76,377c-11.63,0-23.62-7.45-23.62-18.35,0-20.16,26.53-21.07,56.5-33.42,2.36-7.45,5.27-15.26,8.54-23.25-7.81,8.35-16.35,14.53-24.53,14.53-11.08,0-17.25-7.81-17.25-19.44,0-22,24.34-47.41,47.77-47.41,10.9,0,15.62,4,19.44,8.36,4.18-4.91,8.35-8.36,11.81-8.36,2,0,2.9,1.45,2.9,3.82,0,8.72-20.53,30.88-32.51,42.14a106.63,106.63,0,0,0-5.45,24.71c1.81-1.09,3.81-2,5.63-3.09a116.41,116.41,0,0,0,38.51-35.79,2.51,2.51,0,0,1,2-1.27c1.09,0,1.63.91,1.63,2,0,2.18-4.9,9.62-14,18.53a143.74,143.74,0,0,1-26.88,20.52c-2.54,1.46-4.91,2.73-7.45,4-1.27,10.9-2.36,21.25-8.17,32.88C363.73,371.72,348.47,377,335.76,377Zm0-3.27c7.63,0,14.89-5.27,20.53-15.62,3.63-6.72,6.72-16.35,10.53-27.61C341.94,340.12,322.13,341,322.13,359,322.13,368.27,327.58,373.72,335.76,373.72Zm20-62.31c8,0,18-10.53,27.07-22.34a170.54,170.54,0,0,1,14.53-24.52c-1.63-5.82-5.81-11.45-14-11.45-17.25,0-35.24,26.16-35.24,44.87C348.11,307.42,350.29,311.41,355.74,311.41Zm97,5.82c-21.07,0-31.79-9.81-31.79-23.8,0-21.07,24.16-43.78,49.59-43.78,11.63,0,18,5.27,18,13.81,0,12.35-18.17,27.25-42.51,27.25a40.86,40.86,0,0,1-11.63-1.46,38.73,38.73,0,0,0-.36,4.54c0,11.27,6.9,18.71,20,18.71,20.53,0,34-11.62,47.05-31.06a2.28,2.28,0,0,1,1.82-1.27,1.86,1.86,0,0,1,1.81,2c0,2.9-10.17,15.08-16.89,21.43C478.17,312.69,466.18,317.23,452.74,317.23ZM435.3,285.07a34.89,34.89,0,0,0,6.18.55c19.8,0,36.51-13.63,36.51-25.25,0-5.09-2.91-6.9-8.54-6.9C456.37,253.47,439.84,268.18,435.3,285.07Zm92.28,29.61c-8.54,0-14-4.54-14-13.26,0-12.89,12.72-23.79,12.72-33.6,0-3.82-3.64-5.27-7.63-6.91-15.08,27.62-32.34,46.87-36.7,46.87-1.27,0-2-.54-2-1.45a2.81,2.81,0,0,1,1.27-2c10.9-8.72,23.07-27.07,33.79-45.05-2.91-1.82-5.45-4.36-5.45-9.08,0-6.36,6.35-12.9,10.71-12.9,2.73,0,4.36,2.36,4.36,6,0,3.27-1.63,7.27-4.36,12,8.36,3.64,17.44,4.36,17.44,13.26,0,10.9-12.9,21.8-12.9,34,0,4.54,1.28,6.72,6,6.72,8.17,0,20.16-9.44,32.52-27.79a2.27,2.27,0,0,1,1.81-1.27,1.87,1.87,0,0,1,1.82,2C567,284.89,547.2,314.68,527.58,314.68Z" transform="translate(-38.71 -173.21)"/>
  </g>
</svg>
html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Google font -->
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
    <!-- FontAwesome -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" integrity="sha384-vp86vTRFVJgpjF9jiIGPEEqYqlDwgyBgEF109VFjmqGmIY/Y4HV4d3Gp2irVfcrp" crossorigin="anonymous">
    <!-- Original CSS -->
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <svg viewBox="0 0 533.98 208.63" class="mask" id="move" >
        <!-- アニメーション画像 -->
        <defs>
            <mask id="clipMask">
                <!--マスクのpath-->
                <g id="mask"><path class="cls-2" d="M186.63,217.5s36.87-3,33.87-25-90-12-126,20,8,39,37,33,58-4,57,15-15,31-32,43-68,23-92,19c0,0-21-2-18-21s51-26,55-25" transform="translate(-38.71 -173.21)"/><line class="cls-2" x1="233.79" y1="33.29" x2="221.79" y2="47.29"/><path class="cls-3" d="M240.38,253.1s-38.29,40-26.88,54.4S242,296,242,296" transform="translate(-38.71 -173.21)"/><path class="cls-3" d="M281.57,256.81S250.12,287,251,309" transform="translate(-38.71 -173.21)"/><path class="cls-4" d="M257,308s45.54-52.79,56.27-54.9" transform="translate(-38.71 -173.21)"/><path class="cls-5" d="M318,255s-39.19,49.83-16.5,55.5" transform="translate(-38.71 -173.21)"/><path class="cls-6" d="M306.21,312.43s20.24-6,29.29-22.93" transform="translate(-38.71 -173.21)"/><path class="cls-7" d="M395.15,255s-28.65-12.5-44.65,18.5-8,36-8,36,6,5,10.52,3.82" transform="translate(-38.71 -173.21)"/><path class="cls-8" d="M360,314c-1.3-.73,2.3,2.38,16.5-15.5" transform="translate(-38.71 -173.21)"/><path class="cls-3" d="M413.32,253.47S391,277,382,297s-8,60-29,72-37,5-35-16,43.78-22.49,43.78-22.49" transform="translate(-38.71 -173.21)"/><path class="cls-6" d="M382,322s31.8-20,37.5-32.5" transform="translate(-38.71 -173.21)"/><path class="cls-5" d="M440.5,287.5s27,4.08,39.49-18-11.33-20.41-28.41-12.73" transform="translate(-38.71 -173.21)"/><path class="cls-2" d="M442.5,262.5s-18.74,14-15.37,36,33.08,17.8,43.72,13.4,35.86-30.36,42.65-46.4" transform="translate(-38.71 -173.21)"/><line class="cls-2" x1="480.79" y1="68.29" x2="476.79" y2="79.3"/><path class="cls-2" d="M525.5,260.5s10,4,5,13-20,39.83-4,37.91a46.59,46.59,0,0,0,38.68-31.24" transform="translate(-38.71 -173.21)"/></g>
            </mask>
        </defs>
        <!-- ベース画像URI -->
        <image xlink:href="./img/test.svg" width="100%" height="100%" mask="url(#clipMask)"></image>
    </svg>
    <!-- Vivus JS CDN -->
    <script src="https://cdn.jsdelivr.net/npm/vivus@latest/dist/vivus.min.js"></script>
    <!-- Original JS -->
    <script src="./js/main.js"></script>
</body>
</html>
css
.cls-2,.cls-3,.cls-4,.cls-5,.cls-6,.cls-7,.cls-8{
    fill:none;
    stroke:#fff;
    stroke-linecap:round;
    stroke-miterlimit:10;
}
.cls-2{
    stroke-width:15px;
}
.cls-3{
    stroke-width:14px;
}
.cls-4{
    stroke-width:8px;
}
.cls-5{
    stroke-width:13px;
}.cls-6{
    stroke-width:5px;
}
.cls-7{
    stroke-width:17px;
}
.cls-8{
    stroke-width:6px;
}
js
new Vivus('move', {type: 'oneByOne',duration: 100,forceRender: false, animTimingFunction:Vivus.EASE_OUT})

最後に

線のアニメーションも出来るらしい。自分で出来る様になったらまた書きます。

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

エンジニア未経験がWordPressを使ってWEBアプリを作ってみた

今回製作したWEBアプリについて

今回作成したWEBアプリは「AboutMyself」。プロフィールを質問形式で記載していくSNSのようなものです。15年程前に流行った「前略プロフ」をイメージしていただければ良いかと思います。IMG_7162.PNG

1. 開発経緯

インターンのテレワークをするなかで、新しく入ってきた人のこと(趣味や経歴)についてわからずなかなかコミュニケーションが取りづらいと思った。また、気難しいと思っていた上司の趣味がわかった途端、急に親近感が沸いた。これらのことから、ある程度事前に相手のことをわかっていればコミュニケーションが円滑になるのではないかと考え、「AboutMyself」を作ることになった。

2. 「AboutMyself」の想定利用ケース

人と深く関わりたい人の場合
* 人と会う機会が減ったなかで、ユニークなプロフィールを通して親交を深めたい。
* プロフィールを通して相手のことを知りたい。
* プロフィールを通して初対面の人と仲良くなるきっかけを作りたい。

そんなに深く関わりたくない人の場合
* プライベートで利用しているLINEやFacebookなどを教え合う仲ではないけど連絡は取りたい。
* グループも作成できるので、何かについてざっくばらんに議論や質問などをしたい。

スクリーンショット 2021-01-24 0.04.35.png
スクリーンショット 2021-01-24 0.04.44.png

3. 開発工程

  1. お名前.comからドメインを取得し、同時にレンタルサーバーも申し込み。
  2. レンタルサーバーのコントロールパネルからWordPressをインストール
  3. SNS作成にはもってこいのプラグイン「BuddyPress」を使用。テーマは「GeneratePress」を使用。
  4. その他ログイン、ログアウトに関するプラグインを使用。
  5. ある程度機能が備わったらデザインの微調整をし、自分でパソコン3台、スマホ2台を使いテスト。
  6. テストに問題がなければ、友人に使用してもらいフィードバックをもらう
  7. フィードバックを元に完成段階まで完了。 ここまで5日ほど。

4. 今後の「AboutMyself」について

今後は、多くの人に利用してもらうようマーケティングに重きを置き、フィードバックを元に改善していく予定。この記事をみた方もぜひ、アクセス、ユーザー登録していただきたいです!お願いします!

5. 最後に

今はユーザー0ですが、何か進捗があればGoogle Analyticsの画像と共に報告できればなと思います。
初めての執筆なので、めちゃくちゃな文章でしたが最後までご覧いただきありがとうございました!

AboutMyself

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

開発未経験がWordPressを使ってWEBアプリを作ってみた

今回製作したWEBアプリについて

今回作成したWEBアプリは「AboutMyself」。プロフィールを質問形式で記載していくSNSのようなものです。15年程前に流行った「前略プロフ」をイメージしていただければ良いかと思います。IMG_7162.PNG

1. 開発経緯

インターンのテレワークをするなかで、新しく入ってきた人のこと(趣味や経歴)についてわからずなかなかコミュニケーションが取りづらいと思った。また、気難しいと思っていた上司の趣味がわかった途端、急に親近感が沸いた。これらのことから、ある程度事前に相手のことをわかっていればコミュニケーションが円滑になるのではないかと考え、「AboutMyself」を作ることになった。

2. 「AboutMyself」の想定利用ケース

人と深く関わりたい人の場合
* 人と会う機会が減ったなかで、ユニークなプロフィールを通して親交を深めたい。
* プロフィールを通して相手のことを知りたい。
* プロフィールを通して初対面の人と仲良くなるきっかけを作りたい。

そんなに深く関わりたくない人の場合
* プライベートで利用しているLINEやFacebookなどを教え合う仲ではないけど連絡は取りたい。
* グループも作成できるので、何かについてざっくばらんに議論や質問などをしたい。

スクリーンショット 2021-01-24 0.04.35.png
スクリーンショット 2021-01-24 0.04.44.png

3. 開発工程

  1. お名前.comからドメインを取得し、同時にレンタルサーバーも申し込み。
  2. レンタルサーバーのコントロールパネルからWordPressをインストール
  3. SNS作成にはもってこいのプラグイン「BuddyPress」を使用。テーマは「GeneratePress」を使用。
  4. その他ログイン、ログアウトに関するプラグインを使用。
  5. ある程度機能が備わったらデザインの微調整をし、自分でパソコン3台、スマホ2台を使いテスト。
  6. テストに問題がなければ、友人に使用してもらいフィードバックをもらう
  7. フィードバックを元に完成段階まで完了。 ここまで5日ほど。

4. 今後の「AboutMyself」について

今後は、多くの人に利用してもらうようマーケティングに重きを置き、フィードバックを元に改善していく予定。この記事をみた方もぜひ、アクセス、ユーザー登録していただきたいです!お願いします!

5. 最後に

今はユーザー0ですが、何か進捗があればGoogle Analyticsの画像と共に報告できればなと思います。
初めての執筆なので、めちゃくちゃな文章でしたが最後までご覧いただきありがとうございました!

AboutMyself

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