- 投稿日:2021-01-24T23:43:18+09:00
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 configurationmodule.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: [], }
- 投稿日:2021-01-24T22:43:16+09:00
【CSS】セレクタの記号の意味を実例で理解する。 スペース、>(大なり)、+(プラス)、,(カンマ)、.(ドット)
CSSのセレクタで使われているスペースや
>
(大なり)、+
(プラス)、,
(カンマ)、.
(ドット)などの機能の確認。目次
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タグに赤色を適用する。
▼ブラウザの表示
▼例2.css.parent .grand-child { color: red; }クラス属性parent配下のクラス属性grand-childに適用する。
指定した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タグにのみ適用する。
▼例2.css.parent > p { color: red; }クラス属性parent直下にpタグが存在しないので、何も変化しない。
▼例3.cssdiv > p { color: red; }divタグ直下のpタグに適用する。この関係が成り立つのは1箇所ある。
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>.cssdiv + p { color: red; }divタグと隣接する(同じ深さにある)pタグにのみ適用する。
▼例2.css.parent + p { color: red; }クラス属性parentと同じ深さにpタグが存在しないので、何も変化しない。
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タグに適用する。
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>.cssp.great-grandchild { color: red; }pタグの中でクラス属性great-grandchildを持つものに適用する。
▼例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; }すべての要素に適用する。
▼例2.css.grand-child *{ color: red; }クラス属性.grand-childの配下の要素すべてに適用する。
▼例3.css.child + *{ color: red; }クラス属性.childと隣接するすべての要素に適用する。
- 投稿日:2021-01-24T22:43:16+09:00
【CSS】セレクタの記号の意味を実例で理解する。 スペース、>(大なり)、*(アスタリスク)+(プラス)、,(カンマ)、.(ドット)
CSSのセレクタで使われているスペースや
>
(大なり)、+
(プラス)、,
(カンマ)、.
(ドット)などの機能の確認。目次
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タグに赤色を適用する。
▼ブラウザの表示
▼例2.css.parent .grand-child { color: red; }クラス属性parent配下のクラス属性grand-childに適用する。
指定した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タグにのみ適用する。
▼例2.css.parent > p { color: red; }クラス属性parent直下にpタグが存在しないので、何も変化しない。
▼例3.cssdiv > p { color: red; }divタグ直下のpタグに適用する。この関係が成り立つのは1箇所ある。
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>.cssdiv + p { color: red; }divタグと隣接する(同じ深さにある)pタグにのみ適用する。
▼例2.css.parent + p { color: red; }クラス属性parentと同じ深さにpタグが存在しないので、何も変化しない。
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タグに適用する。
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>.cssp.great-grandchild { color: red; }pタグの中でクラス属性great-grandchildを持つものに適用する。
▼例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; }すべての要素に適用する。
▼例2.css.grand-child *{ color: red; }クラス属性.grand-childの配下の要素すべてに適用する。
▼例3.css.child + *{ color: red; }クラス属性.childと隣接するすべての要素に適用する。
- 投稿日:2021-01-24T20:52:16+09:00
デベロッパーツールで他人のサイトの見た目を変更したまま更新しても維持する方法
先に述べますが、表題そのままの解決ができたわけではありません。真っ赤な嘘となります。
発生した課題の解決自体はできています。やりたかったこと
-Chromeのデベロッパーツールで他者のサイトのスタイルシートを好みの状態にイジった後、更新したり再度訪問してもその状態を維持したい
-Twitter Webの右側にあるトレンドを消し去りたかった。タイムラインで情報は追いかけたいが、トレンドは嫌でも目について気が散ってしまう通常の検索でわかったこと
-「デベロッパーツール」を軸にしたキーワードで検索
-デベロッパーツールでsave overrideをすることで、更新・再訪問しても、デベロッパーツールを開けば変更した状態を維持できるが、デベロッパーツールを開いていない状態では変更は反映されない検索方法を変えてわかったこと
-拡張機能も検討したが、「デベロッパーツールの固定」といったキーワードではやはり見当たらない
-そもそも直で「twitter トレンドエリアを消す デベロッパーツール」と検索したところ、こちらのサイトがヒット使った拡張機能
学んだこと
-実は当初は拡張機能も探していたが、思いつく限りの検索ワードでは「過去に使えていたXXXという拡張機能が今は使えない」というような記事しかHitしなくて諦めていた
-今回のように「ツイッターのトレンドエリアを消す」といったような、全く別の検索アプローチ--ユーザーの多いコンテンツを軸に何らかの状況を限定した想定--で目当てのものが見つかることもある。今回はもともとの目的のキーワードでHitしたからよかったものの、情報自体はネットに転がっているが、そのキーワードおよび存在自体を知らない場合もあるので、やはり幅広い知識を持つことは重要であるさいごに
-参考先ページにもあるが、ChromeだけでなくFireFoxでも利用可能 Stylus(FF版)
-ググり方の上手さが大事だというが、ここまで斜めだとは思わなかった
- 投稿日:2021-01-24T19:39:26+09:00
【CSS】htmlとcssでモーダルを作成する方法。(擬似要素と擬似クラスの活用)
擬似要素と擬似クラスを使うとモーダルを簡単に作成することができる。
擬似要素の
::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
のみだと、当初の位置のままなので、top
とleft
で場所を指定する。親要素に
relative
、fixed
、absolute
がない場合はbody
タグ(ここでは画面)が基準となる。これで、元ある要素の上に被せて画面いっぱいに表示することができる。
・中身の要素の位置を整えるdisplay: flex; justify-content: center; align-items: center;柔軟なレイアウト指定ができるflexboxを指定する(
flex
)これで、justify-content
とalign-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;擬似要素
::after
はcontent
プロパティを指定することで、そのテキスト(や画像)を表示できる。文字色、枠線、背景色を定義。大きさを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
- 投稿日:2021-01-24T19:35:51+09:00
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が動いてない時の解決法
- 投稿日:2021-01-24T16:25:08+09:00
【CSS】コロン2つ::とコロン1つ:の違い。(擬似要素と擬似クラスの違いとそれぞれの使い方)
CSSでコロン2つ(::beforeなど)やコロン1つ(:hoverなど)がついたプロパティの違いについて。
コロン2つ::とコロン1つ:の違い
- コロン2つ(::)は擬似要素
- コロン1つ(:)は擬似クラス
▼例外
コロン2つがつくべき擬似要素でも、コロン1つが使われている場合がある。(例 ::before ⇄ :before)
擬似要素にコロン2つが公式に使われるようになったのはCSS3(2011年以降から)。なので、昔の名残で擬似要素にコロン1つが使われている場合もある。
擬似要素と擬似クラスの違い
- 要素は適用対象の一部に変化を加えるもの。
- 擬似クラスは適用対象全体に変化を加えるもの。
▼名前の考え方
どちらも本来のcssではなく、後から処理を追加したり、JSで適用する処理をcssで実現したりする処理なので、擬似がつく。cssなので適用対象はタグになる。あるタグ全体にcssを適用するときclass属性を使うため、擬似クラスと呼ぶ。
一方で、タグの中の一部の要素にのみ変化を加えるため擬似要素という。
例えば、テキストの文字全体にcssを追加する場合は擬似クラス(:)を使い、テキストの一文字目だけにcssを追加する場合は擬似要素(::)を使う。
擬似要素
擬似要素の一覧
・(参考)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
が記述してあれば自動的に反映される。▼ブラウザの表示とソースコード
ソースコードの要素を追加した箇所に
::before
と表示される。(※指定したテキストは表示されていない)
1-2. 前方に画像を追加する
content
プロパティの値にurlメソッドでパスを指定する。.css.u-prefix-hello::before { content: url(/images/small-cat.jpg); display: inline-block; vertical-align: middle; }
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:
はあえて""
と記述する。
・
background-size: contain;
縦横比は保持して、枠に収まる最大サイズになるように背景画像を拡大縮小する。他にも、
auto
の場合は自動で画像を繰り返す。cover
の場合は枠に収まる最少サイズになるよう拡大縮小する。
1-4. 下線を表示する
::before
を使うと、テキストに好きな長さの下線を引くことができる。
.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;
にする。親要素の一番下に線を引きたいため、
::before
にposition: 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; }
1-6. 左に線を表示する
考え方は下線(上線)と同じ。
::before
で追加した要素のheight
を文字サイズと同じにする。線の幅はwidth
で指定。このままだと文字と重なってしまうので、
left
とtop
で線を設置する位置を微調整すれば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に何も適用されなくなる。
▼ブラウザの表示
(2)
::before
で追加した要素はコピーできない
ブラウザにはテキストではなく
::before
と表示されている。
値はcssで渡されているため。
(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; }
font-weightやfont-sizeは元の要素の数値が適用される。
一方、colorは::before
で指定した色で上書きされる。(元の要素はそのまま)
これらの注意点は::after
も同じ。
(補足)yahooニュースの例
yahooニュースの見出しに、
::before
と::after
が使われている。▼クラス
jeCptP
の::before
と::after
2.
::after
適用の仕方や注意点は
::before
と同じ。
指定した要素の後方を修飾する。.css.u-suffix-hello { font-weight: bold; } .u-suffix-hello::after { content: "こんにちは"; color: red; }
3.
::first-letter
指定した要素の一文字めのcssを調整する。
.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を変更する。
.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>
擬似クラス
擬似クラスの一覧
・(参考)MDN 擬似クラス
主な擬似クラス
既存の要素にcssを追加する擬似クラス。
aタグのテキストを訪問状態によって色を変えたりする
:link
、visited
やホバーしたときにcssを適用する:hover
などがある。1.
:hover
hover処理がcssのみで簡単に適用できる。
.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を指定することができる。
.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を指定する。
.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を指定できる。
.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での指定もできる。
- 他のタグの兄弟要素もカウントする
.cssul 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タグになる。
.cssul 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
を使う。.cssul 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>
spanタグはカウントせず、liタグのみカウントしてcssを適用している。
7.
:target
:target
クラスを使うとaタグの内部リンクへのジャンプに合わせてリンク先の要素にcssを適用することができる。
.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が外れる。
- 投稿日:2021-01-24T16:24:23+09:00
マイコーディングルーティン
はじめに
制作会社を通して作業前に確認する必要があることを備忘録として簡単にまとめました。
スケジュール・仕様確認
・納期
・サーバーは自社で作成 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部分の挙動確認さいごに
適宜気づいたことや仕様の変更などあれば追記・修正します。
- 投稿日:2021-01-24T15:35:51+09:00
基礎学習
未経験から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チュートリアルで学習し、
改めて学習し直す必要は無いと思うので、
残りを学習していきます。
- 投稿日:2021-01-24T13:49:26+09:00
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
などでとるとうまくいきます。
- 投稿日:2021-01-24T13:49:26+09:00
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
などでとるとうまくいきます。
- 投稿日:2021-01-24T13:18:13+09:00
【初心者でもわかる】条件をつけて、: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; }このようにカッコ()の中に特定のセレクタを指定することで、その要素を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; }
: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; }まとめ
頻繁に使うことはないですが、知ってるのと知らないのとでは作業スピードも対応幅も変わってくるtipsです。
ぜひ使ってみてほしいです!参考:https://gotohayato.com/content/451/
おそまつ!
~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ
- 投稿日:2021-01-24T12:29:33+09:00
エンジニア未経験がWordPressでWEBアプリを制作する際につまずいたこと
まず初めにどのようなWEBアプリを作ったのか
「AboutMyself」という、プロフィール専門SNSを製作しました。
※内容については、こちらの記事を参照。「AboutMyself」を製作する上でつまずいたこと
SNSを製作する上でのプラグインの選択について困った
→日本語の説明ブログなどもかなり投稿されていますので、これに関しては「BuddyPress」一択で大丈夫だと思います。ログイン・登録画面で自分のサイトのUIではなく、WordPressのログイン画面に遷移してしまう。
→これもプラグインがおすすめです。「Theme My Login」を入れることで、自分のサイトのUIにあったログイン・登録画面に遷移されます。ログアウト後の画面にログインをしないと見れないメニューが表示される
→以下のスクショのようにログアウト後の画面に、ログインをしなければ見れない画面が出てきてしまいました。(本来「グループ作成」メニューはログアウト後には必要ない)
こちらもプラグインを導入しました。「If Menu」というログイン後とログアウト後のメニュー画面の表示を分けられる優れものです!今回WordPressを使ってわかったこと
WordPressを使用することで、プログラミング未経験者でも簡単にWEBアプリが作成できます!プラグインというのは本当に便利な機能ですよね。適宜、欲しい機能にあったプラグインを調べて導入することである程度自由なサイトを構築できます!
最後に「AboutMyself」のご利用もお願いいたします!
- 投稿日:2021-01-24T02:31:28+09:00
モーダルで画像・動画を表示!「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
をつけてあげたら、表示されました◎参考サイト様
- 投稿日:2021-01-24T01:46:52+09:00
手書き風アニメーション(vivus.js)
はじめに
vivus.js
という素晴らしい、プラグイン?を使用したのでメモとして残します。
まだ理解し切ってないので、本当にメモ書き程度のまとめです。完成イメージ
手順
illustratorで新規作成
・「base」レイヤーに文字を書く
・文字のオブジェクトの上で「右クリック」→「アウトラインを作成」
・そのまま(選択した状態で)「オブジェクト」→「複合パス」→「作成」
・「base」にロックをかけ、「mask」レイヤーに切り替える
・「ペンツール」で文字をなぞる
※この時、線どうしは被らない様にすると綺麗なアニメーションになる。交差点がある場合は、一旦線を切ってパスギリギリの幅の線を書くといい。・最後に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>jsnew 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; }jsnew Vivus('move', {type: 'oneByOne',duration: 100,forceRender: false, animTimingFunction:Vivus.EASE_OUT})最後に
線のアニメーションも出来るらしい。自分で出来る様になったらまた書きます。
- 投稿日:2021-01-24T00:08:16+09:00
エンジニア未経験がWordPressを使ってWEBアプリを作ってみた
今回製作したWEBアプリについて
今回作成したWEBアプリは「AboutMyself」。プロフィールを質問形式で記載していくSNSのようなものです。15年程前に流行った「前略プロフ」をイメージしていただければ良いかと思います。
1. 開発経緯
インターンのテレワークをするなかで、新しく入ってきた人のこと(趣味や経歴)についてわからずなかなかコミュニケーションが取りづらいと思った。また、気難しいと思っていた上司の趣味がわかった途端、急に親近感が沸いた。これらのことから、ある程度事前に相手のことをわかっていればコミュニケーションが円滑になるのではないかと考え、「AboutMyself」を作ることになった。
2. 「AboutMyself」の想定利用ケース
人と深く関わりたい人の場合
* 人と会う機会が減ったなかで、ユニークなプロフィールを通して親交を深めたい。
* プロフィールを通して相手のことを知りたい。
* プロフィールを通して初対面の人と仲良くなるきっかけを作りたい。そんなに深く関わりたくない人の場合
* プライベートで利用しているLINEやFacebookなどを教え合う仲ではないけど連絡は取りたい。
* グループも作成できるので、何かについてざっくばらんに議論や質問などをしたい。3. 開発工程
- お名前.comからドメインを取得し、同時にレンタルサーバーも申し込み。
- レンタルサーバーのコントロールパネルからWordPressをインストール
- SNS作成にはもってこいのプラグイン「BuddyPress」を使用。テーマは「GeneratePress」を使用。
- その他ログイン、ログアウトに関するプラグインを使用。
- ある程度機能が備わったらデザインの微調整をし、自分でパソコン3台、スマホ2台を使いテスト。
- テストに問題がなければ、友人に使用してもらいフィードバックをもらう
- フィードバックを元に完成段階まで完了。 ここまで5日ほど。
4. 今後の「AboutMyself」について
今後は、多くの人に利用してもらうようマーケティングに重きを置き、フィードバックを元に改善していく予定。この記事をみた方もぜひ、アクセス、ユーザー登録していただきたいです!お願いします!
5. 最後に
今はユーザー0ですが、何か進捗があればGoogle Analyticsの画像と共に報告できればなと思います。
初めての執筆なので、めちゃくちゃな文章でしたが最後までご覧いただきありがとうございました!
- 投稿日:2021-01-24T00:08:16+09:00
開発未経験がWordPressを使ってWEBアプリを作ってみた
今回製作したWEBアプリについて
今回作成したWEBアプリは「AboutMyself」。プロフィールを質問形式で記載していくSNSのようなものです。15年程前に流行った「前略プロフ」をイメージしていただければ良いかと思います。
1. 開発経緯
インターンのテレワークをするなかで、新しく入ってきた人のこと(趣味や経歴)についてわからずなかなかコミュニケーションが取りづらいと思った。また、気難しいと思っていた上司の趣味がわかった途端、急に親近感が沸いた。これらのことから、ある程度事前に相手のことをわかっていればコミュニケーションが円滑になるのではないかと考え、「AboutMyself」を作ることになった。
2. 「AboutMyself」の想定利用ケース
人と深く関わりたい人の場合
* 人と会う機会が減ったなかで、ユニークなプロフィールを通して親交を深めたい。
* プロフィールを通して相手のことを知りたい。
* プロフィールを通して初対面の人と仲良くなるきっかけを作りたい。そんなに深く関わりたくない人の場合
* プライベートで利用しているLINEやFacebookなどを教え合う仲ではないけど連絡は取りたい。
* グループも作成できるので、何かについてざっくばらんに議論や質問などをしたい。3. 開発工程
- お名前.comからドメインを取得し、同時にレンタルサーバーも申し込み。
- レンタルサーバーのコントロールパネルからWordPressをインストール
- SNS作成にはもってこいのプラグイン「BuddyPress」を使用。テーマは「GeneratePress」を使用。
- その他ログイン、ログアウトに関するプラグインを使用。
- ある程度機能が備わったらデザインの微調整をし、自分でパソコン3台、スマホ2台を使いテスト。
- テストに問題がなければ、友人に使用してもらいフィードバックをもらう
- フィードバックを元に完成段階まで完了。 ここまで5日ほど。
4. 今後の「AboutMyself」について
今後は、多くの人に利用してもらうようマーケティングに重きを置き、フィードバックを元に改善していく予定。この記事をみた方もぜひ、アクセス、ユーザー登録していただきたいです!お願いします!
5. 最後に
今はユーザー0ですが、何か進捗があればGoogle Analyticsの画像と共に報告できればなと思います。
初めての執筆なので、めちゃくちゃな文章でしたが最後までご覧いただきありがとうございました!