What's New Qiita

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

  • 投稿日：2020-07-21T23:48:00+09:00

CSS(Flexbox)だけでフッターを最下部に固定する方法

コンテンツ量が少ない時でもフッターを最下部に固定する方法です。
以下がHTML・CSSの内容です。

index.html
<body>
    <header>
        ヘッダー
    </header>

    <main>
        コンテンツ
    </main>

    <footer>
        フッター
    </footer>
</body>
style.css
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
main {
    flex: 1;
}

"min-height: 100vh;"とすることで、bodyの表示領域が確保されます。
そして"flex: 1;"により、bodyタグ内のheaderタグとfooterタグの高さを除いた部分が、mainタグで埋まるようになります。
これだけでフッターを最下部に固定できます。

補足 - IE11対策

上記の方法だと、IE11環境でコンテンツ内の画像をレスポンシブ対応した場合、フッターの上部に高さが残り余白が生まれてしまいます。
以下のように、mainタグに"min-height: 1px"を指定すると解消されます。

style.css
main {
    flex: 1;
    min-height: 1px;
}

参考記事
https://503dg.jp/blog/design/sticky-footer.html

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-07-21T22:12:30+09:00

[CSS単位系] vh, vw に潜む甘い罠[widthとheightに使うときの注意]

cssの大きさを示す単位、いくつ知っていますか？
px, %, rem, em, pt...
%以外は要素そのものの値を基準に決まりますね。

その中でも vh, vw の２つは画面（Viewport）の大きさでサイズが変わるという特異な性質を持っています。
これは便利！ width: 100vw; とかしたくなりませんか？

ところがこの vh と vw 、気をつけて使わないと罠があります。

vh, vw とは

Viewportに対する100分率で指定できます。
vhは画面の高さ、vwは画面の幅を基準にします。

100vhなら高さ画面いっぱい、100vwなら幅画面いっぱい、ですね。

甘い罠

さて、使いたくなるところを考えてみましょう。
親のBoxに左右されず100%っぽく指定できるので、 width: 100vw とかしたくなりますね！
あとは１画面分のファーストビュー前面に出すための height: 100vh とかでしょうか？

ところがですよ、主にPCでの vw, SPでの vh には罠があります。

vh, vw が認識とずれやすいもの

端末 （おそらく）開発者が意図しないもの
PC スクロールバー
SP アドレスバー

PCのvw

QiitaのHeaderを開発者ツールで開いて、div.st-HeaderContainerを選択しましょう。
スクリーンショット_2020-07-21_21_56_31.png

横スクロールバーが出てしまいました。
実はこれ、100vwには縦スクロールバー分の横幅を含めた範囲なのでレンダリングの範囲より大きいのです。
証拠に、画面の要素をどんどん消していって、スクロールバーを消せばピッタリ収まります。
中に要素が増えていったら発覚するので性質が悪いと言えるでしょう。

SPのvh

SPのvhはもっとひどいです。vhはデバイスの高さによってきまります。
しかしレンダリングされる高さは アドレスバーを除きます。

PCのレスポンシブビューを使ってSPサイトを開発していると気づかないことがあるので注意してください。

この記事の解説図がめちゃくちゃわかりやすいので是非見てください。
【CSS】100vhは「一画面」ではないという罠 | JavaScriptに関するお知らせ

本当の使い所

  • 親要素に左右されず高さと幅が決定したい
  • （スクロールバーが現れないように） 90vw とかの指定にできる

上記を考えると、SP向けモーダルウィンドウ（ポップアップウィンドウ）の実装なんかには便利なのではないでしょうか。
PC向けを考えると max-width や max-height に固定値pxを指定するといった運用も考えられます。

まとめ

vhやvwはあとになって問題が発覚することがあります。
vh, vw のいずれも使わずに済むようにコーディングできるならそれに越したことはないでしょう。
（ position: absolute を うまく使えば親boxに左右されず、100% = 画面幅 のboxを作れると思います）

おまけ：それでも100vh的なことがしたいとき

スマホサイトのコーディングでハマりがちな３つのポイント | Web制作の株式会社クライマークス
この記事によると、このようにすると良いんだそうです。

/* style設定例（body直下にメインビジュアルの要素がある場合） */
html,body {
  height: 100%;
}
/* メインビジュアルスタイルのスタイル */
.hoge {
  height: 100%;
}

コーディングのテクニック

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-07-21T22:10:53+09:00

マークダウン記法でDB設計【残り55日】

使用したマークダウン記法
[#]
見出しとして使用
数を増やすとfont-sizeが小さくなっていく
HTMLでいうh1~h6タグ

[|文字列|]
表の作成として使用
コロンを文字列の左、左右、右につけることで左寄せ、中央揃え、右寄せにできる

[-]
箇条書きとして使用
ハイフンの後に半角スペースを入れること

マークダウン記法でDB設計.png

テーブル設計

users テーブル

Column Type Option
name string null: false
email string null: false
password string null: false

Association

  • has_many :room_users
  • has_many :rooms, through :room_users
  • has_many :messages

カラム、アソシエーションが一目瞭然なのでアプリケーション開発には必須の作業。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-07-21T20:29:11+09:00

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

100日チャレンジの377日目

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

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-07-21T20:11:31+09:00

【初心者でもわかる】テキストや文字に影を入れる方法（サンプルコード付き）

どうも7noteです。今回は文字に対して影を入れる方法をやっていきます。

文字に影を入れるcssとして「text-shadow」というcssが用意されています。今回はこの「text-shadow」を導入してみましょう。

text-shadowの使い方

text-shadowには4種類の値が指定できます。

「横方向の位置」・「縦方向の位置」・「ぼかし具合」・「影の色」

実際にcssを書く時は以下のように記述します。

p {
    text-shadow: 1px 1px 2px black; /*左から[横方向の位置・縦方向の位置・ぼかし具合・影の色]*/
}

見た目↓
sample01.png

text-shadow解説

text-shadow: 1px 1px 2px black;

上の例であげた指定ですが、まず一番左の値の1pxから見ていきます。
この1pxはテキストに対して何ピクセル横に影を付けるかという意味です。
そして2つ目の1pxはテキストに対して何ピクセル縦に影を付けるかという意味になるので、
今回であれば右方向に1px、下方向に1pxの位置に影を付けるという意味になります。

そして、3つ目の2pxはぼかし具合の指定になるので、上下左右に2px分広がるように影を付けなさいという意味になります。

最後に影の色を指定して、最終的な意味としてはテキストからみて右に1px、下に1pxの位置から上下左右に2xp分広がるように黒色の影を付けなさい
という意味になります。

デザインでありそうなパターンのサンプルコード

見本ではフォントサイズはどれも24pxを指定してます。

①くっきりした影

p {
    text-shadow: 3px 6px 0px #CCC; /*左から[横方向の位置・縦方向の位置・ぼかし具合・影の色]*/
}

sample02.png

②背景にぼやかしをいれる

p {
    text-shadow: 0px 0px 5px #FCA134; /*左から[横方向の位置・縦方向の位置・ぼかし具合・影の色]*/
}

sample03.png

③背面にぼやけた影

p {
    text-shadow: 0 15px 5px rgba(0,0,0,.5); /*左から[横方向の位置・縦方向の位置・ぼかし具合・影の色]*/
}

sample04.png

さらにたくさんのサンプルがみたい方はこんなサイトを見付けたので参考にしてもいいかもしれません。15個くらいサンプルがあります。
https://www.nxworld.net/tips/text-shadow-styling.html

まとめ

テキストに影をつける方法はこれしかないので、上手に使いこなせるようになりましょう！
ただ影だけ角度を斜めにするとかはできないので、そのような場合は画像にするのが無難でしょう。

おそまつ！

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

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-07-21T19:22:37+09:00

【CSS3】横並びメニューの作り方（FlexBox編）

FlexBox（display: flex;）を使って、横並びのメニューを作る方法です。

スクリーンショット 2020-07-21 19.18.16.png

index.html
    <ul class="nav">
        <li><a href="#">Menu1</a></li>
        <li><a href="#">Menu2</a></li>
        <li><a href="#">Menu3</a></li>
    </ul>
style.css
.nav {
    list-style: none;
    display: flex;
}

.nav li {
    width: 160px;
    height: 48px;
    line-height: 48px;
    text-align: center;
    background-color: #333;
}

.nav li a {
    text-decoration: none;
    color: #fff;
    font-weight: bold;
}
  • list-style: none; 黒丸を消します。
  • display: flex; ボタンを横並びにします。
  • line-height: 48px; テキストをボタンの上下中央に配置します。（heightと同じ値にします）
  • text-align: center; テキストをボタンの左右中央に配置します。
  • text-decoration: none; リンクの下線を消します。

参考リンク

【CSS3】横並びメニューの作り方（float編）
【CSS3】横並びメニューの作り方（inline-block編）

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-07-21T19:12:24+09:00

【CSS3】横並びメニューの作り方（inline-block編）

display: inline-blockを使って、横並びのメニューを作る方法です。

スクリーンショット 2020-07-21 16.10.42.png

index.html
    <ul class="nav">
        <li><a href="#">Menu1</a></li>
        <li><a href="#">Menu2</a></li>
        <li><a href="#">Menu3</a></li>
    </ul>
style.css
.nav {
    list-style: none;
    font-size: 0;
}

.nav li {
    display: inline-block;
    width: 160px;
    height: 48px;
    line-height: 48px;
    text-align: center;
    font-size: 16px;
    background-color: #333;
}

.nav li a {
    text-decoration: none;
    color: #fff;
    font-weight: bold;
}
  • list-style: none; 黒丸を消します。
  • font-size: 0; ボタンの間にできる隙間を消します。（子要素でfont-sizeを指定し直します）
  • display: inline-block; ボタンを横並びにします。
  • line-height: 48px; テキストをボタンの上下中央に配置します。（heightと同じ値にします）
  • text-align: center; テキストをボタンの左右中央に配置します。
  • text-decoration: none; リンクの下線を消します。

参考リンク

【CSS3】横並びメニューの作り方（float編）
【CSS3】横並びメニューの作り方（FlexBox編）

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-07-21T18:19:45+09:00

ウェブカツ!!が業界初のプログラミング漫画「はたらくプログラミング」を作ってしまった話

まえおき

どうも、最近運営しているプログラミングスクール「ウェブカツ!!」を売却しようとして「40億で売れる？」ってIT業界で有名なM&Aエージェントに相談してみたら「25億が現実的な落とし所ですねー。。」と渋い顔で言われてしまった、かずきちです。

一時、ベンチャー経営者やアンチがうちの生徒雇わない発言して物議を醸しましたが、一向にうちの生徒の内定報告いただいている状態で何よりです。
今年の秋口からは、うちの本が続々と出ます。
SNSマーケの口コミのみで、広告やSEOすらやってなかったので、もう
伸び代しかないですね。（ケイスケホンダ選手風）

アクティブで一時期１５００人超える勢いだったんですが、安っぽいアフィリエイターみたいな副業気分で学ぼうとしてる甘っちょろい人間も増えてたので、僕が相当生徒数削りました。事業やってて思うのは、やっぱ費用が安いと意識の安い人間が入りますね。
（安くしちゃえば1万人は超えるし、売り上げも上がるのは分かってますが、その分しょうもないエンジニア増やしてもなという。）

因みにうちで身に付くレベルがどれかというと卒業したばかりの生徒達が作ったものを一部お見せするとこんな感じです。

https://itengineer-scouter.com/
※このサービスは、今は余力がないので運営ほったらかしてますが、スクールや教育が増えれば今後確実に定量評価出来るものが必要になるんでコンテンツちゃんと考えれば伸ばせるやつ。
競合ではpaizaとかあって僕もやりましたが、あれってエンジニアとしてのお仕事で使う技術能力とはかなりかけ離れちゃってるんですよね。技術というより数学テストだし。

うちは他スクールと違って、生徒に「作品」を作らせることはしてません。
だって、仕事としてお金もらってやってるのって
「商品」を作ること
ですから。

趣味レベルのものを作ってもしょうがないんですよね。
「商品」として成り立つレベルが作れなきゃ。

うちの生徒には元医師やらBIG4税理士法人、大手金融機関、大手メーカー勤めの高学歴な人〜中卒、40代主婦まで、地域は北海道から沖縄果てはフィリピン、マレーシア、インド、デンマークといったバリエーション豊かな人達が学んでいます。
（中卒も40代主婦もきちんと内定もらって今はエンジニアとしてバリバリやっているので、これからフリーランスで稼いでくれるのが楽しみです）

余談ですが、最近テック〇〇の面談受けた人がまた入ってきたんですが、営業に
「都内に出てこれない人は本気度が低いから無理だよ」
と言われたそうです。（うちは地方でも内定決まっているというのに。。）
都内が案件多いとはいえ、斡旋して自分らの利益にしたいからとはいえ。ね。
まぁ、正社員の斡旋するだけで、年収の3割もらえるんで、一人100万以上入ってくるものね。
そりゃ、売り上げ主義でいけば都内就職者だけ扱いたいよね。

「はたらくプログラミング」を作りたい！

前置き長くなりましたが、そんな中で今回うちの生徒（今は卒業生）で「ちょっと昔趣味で漫画描いてた」という人に

「はたらく細胞」みたいにプログラミング版を作りたいんだけど出来ない？

とお願いし、それがようやく完成。反響も上々なようで今回その製作の裏側をご紹介したいと思います。

amazonとboothで現在発売中です。
https://www.amazon.co.jp/dp/B087Z6J1RZ/ref=cm_sw_r_tw_dp_x_-qQfFbBE70Y32

「はたらくプログラミング」を作ろうと思った経緯

僕はいわゆる「ガチエンジニア」じゃ決してありません。
技術自体が全く好きではありません。
異業種の営業マンからエンジニアに転向する際の独学で、このITエンジニア業界の
「教育能力なさすぎ」
「伝えるスキルなさすぎ」
「ビジネス、マーケティング能力なさすぎ」
の３拍子にイラッとし、その改革のためにスクールを立ち上げた（昔はただの動画サービスだったけど）わけですが、そんな中でずっと

漫画で学べりゃ楽なのになぁ

と思っていました。
僕は漫画大好きなんですもの。字とか嫌い。
スクールも全て動画で教えているくらいですしね。

が、漫画を書くスキルはもちろんないですし、そもそもどんな漫画にすりゃいいのか思いつかなかったんですね。
そんなある時、出会っちゃったわけですよ、あれに。

「はたらく細胞」

ですよ。
これを読んだ瞬間、降りてきちゃったわけです。

神が。

これだ！って感覚です。

「はたらく細胞」をパインスパイアしよう！

そう思ったわけです。
神の命です。

「はたらく細胞」をパクインスパイアしちゃいなさい。

そういう神の命を頂いたわけです。

何をどういう順序でどういう世界観で伝えるか。それが重要だ。

とはいえ、「プログラミングを擬人化する」というところまではきたんですが（まぁ、調べたらそういう擬人化した漫画ちっくなものはありましたが）、それぞれをどう伝えるか悩みました。
実際、わかばちゃんシリーズであったりコード学園ってのがありましたが、どっちも僕が求めるものとは違ったんです。

スクリーンショット 2020-03-12 05.11.19のコピー.png

ちなみに僕はいわゆる「オタク」が好きそうな萌え系キャラが大嫌いです。
エンジニア界隈では好かれるでしょうが、僕のような一般人からしたら気持ち悪さしかないんですね。（申し訳ないけどそれが本音だよ）
だから、そんな擬人化キャラにはしたくなかったですし、わかばちゃんのような4コマ漫画では、はたらく細胞のように

難解な専門知識を漫画としてストーリー仕立てで各キャラの個性や世界観も感じながら楽しみながら学習したい

という僕の堕落し甘えきった目的には到達できなかったんです。
だって、あれは漫画部分が一部あるだけの「解説本」ですし。
初心者の頃の僕はコードが出てきた段階で拒絶反応ですしね。
一番の初心者ってそっからなわけで。

僕はエンジニアが大嫌いだ

そもそも、僕は異業種の人をエンジニアとして育ててこの業界に送り込みたいんです。
だって僕は

エンジニア大嫌いなんですもの。

でも、

エンジニアは大好きなんです。

言ってること分かります？

営業やってた僕からすれば、エンジニアという職業は指動かしてるだけで金もらえるわ、
リモートも出来るわ、
ヘッドフォンしながら仕事出来るわ、
スマホいじりながら仕事出来るわ、
短期間で一気に報酬上げられるわ、
自動化して自分で金稼げるわ
で「天国」なんですよ。
エンジニアで月100万稼ぐのと営業で月100万稼ぐのじゃ天と地ほどの差な労力です。
女性ならライフステージによっても他の仕事より融通効きやすいだろうしね。
（女っ気なくてむさ苦しい現場が多いのが残念だけども。うちのスクールの女性比率はかなり高いので女性生徒からすると現場出てみて女性が少なすぎる現状にびっくりするみたいです。）

でも、僕のQiitaやらTwitterやらにウジのように湧いてくるキモいエンジニアは嫌いなんですよ。
教え方下手くそなエンジニアも、ビジネスもわからない子供エンジニアも嫌いなんですよ。
商品より作品作りたがったり、顧客課題をすっぽかして技術情報だけで鼻息荒くしてるエンジニアも大嫌いなんですよ。

だから、もうこの業界変えるには既存エンジニアより異業種のコミュケーション能力高い人や素養ある人に営業もビジネスも税務も法務も教えてエンジニアも並より上のスキル教える方が大事だと思っているわけです。
（最近、SNS訴訟に強い弁護士が教えてくれる法務部がうちのスクールに出来ました。営業部も日本で唯一大学で営業を学問として教えている生保で元億プレーヤーの花田敬さんに見てもらってます。）

なので、そもそも

プログラミングって何それ？聞いたことあるくらいだけど

な人たちでも読みたくなるようなものを作りたかったんですね。
売れない営業マンが漫画喫茶で手にとって読めるレベルのやつが。
そんで、あわよくば

「あ、プログラミングって面白そうかも」

と思ってくれりゃあ御の字っていう。

まぁ、とは言え、結構細かな技術部分の違いも入れて作ってるので、プログラミング学習中の人でもためになる内容になってます。
なので、各スクールさんで補助教材の１つとして使えたり、プログラミングが小学校必修となって親御さんなり教師がプログラミングがどんなものか学ぶ第一歩としても役立つと思います。
（実際に今有名な出版社さんから、うちの持ち出しなしで出版依頼も来てます）
image.png

世界観どうしよう

ターゲットも定まったところで世界観どうしようか悩みました。
ちなみにこの漫画は「漫画を読みながらWEBプログラミングの世界を学べる」ようにしたかったので、擬人化は
・HTML言語
・CSS言語
・JavaScript言語
・PHP言語
・SQL言語
を出そうと思ってました。
それぞれの言語の役割がざっくりイメージ出来て、自分たちが普段見ているHPが表示される中ではこんなやり取りが行われているんだという通信の流れもイメージできればいいなと。
（あとあとでRubyも出すことにしました。どんな登場でどんなキャラかは漫画でのお楽しみで）
スクリーンショット 2020-03-12 05.12.03.png
まぁ、キャラの動かし方としては、二郎系インスパイアの感じにしかならんだろうなとは思っていたので、
あとは色々とやり取りを重ねていくうちに世界観が見えてくるようになりました。
スクリーンショット 2020-03-12 05.12.34.png
スクリーンショット 2020-03-12 05.12.45.png
スクリーンショット 2020-03-12 05.13.13.png

HTML言語のキャラをざっくりどうするか

キャラ設定的なのどうするか考えていったんですが、
htmlはwebの根幹みたいなもんでしょう。
建築で言えば「基礎工事」や「家の骨組み」を作る人なわけなので、

熱血漢なてやんでぇ大工職人

という感じになりました
まぁ、ベタですが変に凝ると初心者がそもそも入っていけない世界になっていっちゃうので、ベタな王道で行くことにしました。

css言語のキャラをざっくりどうするか

cssは骨組みだけの簡素な家に外観つけて華やかにしていく美術さん的な感じですね。
ここらへんもベタに行きたかったので、お色気担当を入れることになり、

お色気のある大人な美術担当の女性

にすることになりました。
ストーリー内でも、htmlが土台を作り、cssが装飾を行う。という実際のweb制作の仕組みと同じにしています。
（こんな女性が実際の現場にいて欲しいと切に願ってます）

js言語のキャラをざっくりどうするか

これは、はたプロ（はたらくプログラミング）作りたい！ってちょろってツイートした時に
「言語を女性に全て擬人化したらこんなんだよね」
ってのが生徒からもらってたんで、それが採用されました。

jsはまぁフロントやってる人なら分かりますが、javaなりphpなりといった言語と違って標準のオブジェクトをぶっ壊す事も出来てしまうし、型とか関係なく放り込めるし、

ある意味柔軟で自由奔放、ある意味で大雑把

みたいな言語なので、そのまま
自由奔放でガサツで未熟感のある女性
になりました。
たぶん、B型女性かO型でしょうね。
僕はA型なんで、たぶん合わないです。
（振り回されてみたい願望もあるけど）

また、このjsちゃんをメインキャラに据える事にしました。
まぁ、うちのスクールがそもそも
バックも分かるフロントエンドエンジニア
を創出してるので、自然とjsメインになった感じです。
今後のテクノロジー成長の事も考えるとnodeもあるし、業務システムなどにある様な無機質な「システム」ではなく「サービス」としての価値勝負になっていき、UIリッチ、UXリッチでSPA化が当たり前になり、バックはAPIのみで簡素化されていく事を考えるとフロントエンド案件が今後どんどん増えていくのは必死ですしね。

つづく

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-07-21T15:56:30+09:00

【CSS3】横並びメニューの作り方（float編）

floatプロパティを使って、横並びのメニューを作る方法です。

スクリーンショット 2020-07-21 15.47.42.png

index.html
    <ul class="nav">
        <li><a href="#">Menu1</a></li>
        <li><a href="#">Menu2</a></li>
        <li><a href="#">Menu3</a></li>
    </ul>
style.css
.nav {
    list-style: none;
}

.nav li {
    float: left;
    width: 160px;
    height: 48px;
    line-height: 48px;
    text-align: center;
    background-color: #333;
}

.nav li a {
    text-decoration: none;
    color: #fff;
    font-weight: bold;
}
  • list-style: none; 黒丸を消します。
  • float: left; ボタンを横並びにします。
  • line-height: 48px; テキストをボタンの上下中央に配置します。（heightと同じ値にします）
  • text-align: center; テキストをボタンの左右中央に配置します。
  • text-decoration: none; リンクの下線を消します。

参考リンク

【CSS3】横並びメニューの作り方（inline-block編）
【CSS3】横並びメニューの作り方（FlexBox編）

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-07-21T10:25:06+09:00

vue.js twitter 風 いいねボタンを押したときのアニメーション

Twitter風のいいねボタンを押したときのアニメーションを再現したい。

参考
https://codepen.io/robeen/pen/PbvJjy

上記の通りでコピペでできるんだが、デフォルトがオンという動作の方法がわからない。
コンポーネントにしたい。
使いまわしたい。

ということで自己流にした。

コピペで動く。

app.SCSS
.heart-svg {
  cursor:pointer; overflow:visible; width:60px;//ここのサイズを変更すればサイズが変わる

  #heart{
    fill:#AAB8C2;//ねずみいろ
    transform-origin:center;
    animation:animateHeartOut 0s linear forwards;
  }

  #main-circ{transform-origin:29.5px 29.5px;}
}


.heart-on {
  fill:#E2264D !important;
}


.checkheart{display:none;}

.checkheart:checked + label svg{
  #heart{transform:scale(.2); fill:#E2264D; animation:animateHeart .3s linear forwards .25s;}
  #heart2{transform:scale(.2); fill:#E2264D; animation:animateHeart .3s linear forwards .25s;}

  #main-circ{transition:all 2s; animation:animateCircle .3s linear forwards; opacity:1;}
  #grp1{
    opacity:1; transition:.1s all .3s;
    #oval1{
      transform:scale(0) translate(0, -30px);
      transform-origin:0 0 0;
      transition:.5s transform .3s;}
    #oval2{
      transform:scale(0) translate(10px, -50px);
      transform-origin:0 0 0;
      transition:1.5s transform .3s;}
  }
  #grp2{
    opacity:1; transition:.1s all .3s;
    #oval1{
      transform:scale(0) translate(30px, -15px);
      transform-origin:0 0 0;
      transition:.5s transform .3s;}
    #oval2{
      transform:scale(0) translate(60px, -15px);
      transform-origin:0 0 0;
      transition:1.5s transform .3s;}
  }
  #grp3{
    opacity:1; transition:.1s all .3s;
    #oval1{
      transform:scale(0) translate(30px, 0px);
      transform-origin:0 0 0;
      transition:.5s transform .3s;}
    #oval2{
      transform:scale(0) translate(60px, 10px);
      transform-origin:0 0 0;
      transition:1.5s transform .3s;}
  }
  #grp4{
    opacity:1; transition:.1s all .3s;
    #oval1{
      transform:scale(0) translate(30px, 15px);
      transform-origin:0 0 0;
      transition:.5s transform .3s;}
    #oval2{
      transform:scale(0) translate(40px, 50px);
      transform-origin:0 0 0;
      transition:1.5s transform .3s;}
  }
  #grp5{
    opacity:1; transition:.1s all .3s;
    #oval1{
      transform:scale(0) translate(-10px, 20px);
      transform-origin:0 0 0;
      transition:.5s transform .3s;}
    #oval2{
      transform:scale(0) translate(-60px, 30px);
      transform-origin:0 0 0;
      transition:1.5s transform .3s;}
  }
  #grp6{
    opacity:1; transition:.1s all .3s;
    #oval1{
      transform:scale(0) translate(-30px, 0px);
      transform-origin:0 0 0;
      transition:.5s transform .3s;}
    #oval2{
      transform:scale(0) translate(-60px, -5px);
      transform-origin:0 0 0;
      transition:1.5s transform .3s;}
  }
  #grp7{
    opacity:1; transition:.1s all .3s;
    #oval1{
      transform:scale(0) translate(-30px, -15px);
      transform-origin:0 0 0;
      transition:.5s transform .3s;}
    #oval2{
      transform:scale(0) translate(-55px, -30px);
      transform-origin:0 0 0;
      transition:1.5s transform .3s;}
  }

  #grp2{opacity:1; transition:.1s opacity .3s;}
  #grp3{opacity:1; transition:.1s opacity .3s;}
  #grp4{opacity:1; transition:.1s opacity .3s;}
  #grp5{opacity:1; transition:.1s opacity .3s;}
  #grp6{opacity:1; transition:.1s opacity .3s;}
  #grp7{opacity:1; transition:.1s opacity .3s;}
}

@keyframes animateCircle{
  40%{transform:scale(10); opacity:1; fill:#DD4688;}
  55%{transform:scale(11); opacity:1; fill:#D46ABF;}
  65%{transform:scale(12); opacity:1; fill:#CC8EF5;}
  75%{transform:scale(13); opacity:1; fill:transparent; stroke:#CC8EF5; stroke-width:.5;}
  85%{transform:scale(17); opacity:1; fill:transparent; stroke:#CC8EF5; stroke-width:.2;}
  95%{transform:scale(18); opacity:1; fill:transparent; stroke:#CC8EF5; stroke-width:.1;}
  100%{transform:scale(19); opacity:1; fill:transparent; stroke:#CC8EF5; stroke-width:0;}
}

@keyframes animateHeart{
  0%{transform:scale(.2);}
  40%{transform:scale(1.2);}
  100%{transform:scale(1);}
}

Heartのコンポーネント

Heart.vue

<template>

    <div>
        <div>


            このハートのIDは {{id}} です。
            現在の選択状況は {{res}} です。

            <div v-if="selected">


                <svg @click="check" class="heart-svg" viewBox="467 392 58 57" xmlns="http://www.w3.org/2000/svg">
                    <g id="Group" fill="none" fill-rule="evenodd" transform="translate(467 392)">
                        <path class="heart-on" d="M29.144 20.773c-.063-.13-4.227-8.67-11.44-2.59C7.63 28.795 28.94 43.256 29.143 43.394c.204-.138 21.513-14.6 11.44-25.213-7.214-6.08-11.377 2.46-11.44 2.59z" id="heart" fill="#E2264D" />
                        <circle id="main-circ" fill="#E2264D" opacity="0" cx="29.5" cy="29.5" r="1.5"/>
                        <g id="grp7" opacity="0" transform="translate(7 6)">
                            <circle id="oval1" fill="#9CD8C3" cx="2" cy="6" r="2"/>
                            <circle id="oval2" fill="#8CE8C3" cx="5" cy="2" r="2"/>
                        </g>

                        <g id="grp6" opacity="0" transform="translate(0 28)">
                            <circle id="oval1" fill="#CC8EF5" cx="2" cy="7" r="2"/>
                            <circle id="oval2" fill="#91D2FA" cx="3" cy="2" r="2"/>
                        </g>
                        <g id="grp3" opacity="0" transform="translate(52 28)">
                            <circle id="oval2" fill="#9CD8C3" cx="2" cy="7" r="2"/>
                            <circle id="oval1" fill="#8CE8C3" cx="4" cy="2" r="2"/>
                        </g>

                        <g id="grp2" opacity="0" transform="translate(44 6)">
                            <circle id="oval2" fill="#CC8EF5" cx="5" cy="6" r="2"/>
                            <circle id="oval1" fill="#CC8EF5" cx="2" cy="2" r="2"/>
                        </g>

                        <g id="grp5" opacity="0" transform="translate(14 50)">
                            <circle id="oval1" fill="#91D2FA" cx="6" cy="5" r="2"/>
                            <circle id="oval2" fill="#91D2FA" cx="2" cy="2" r="2"/>
                        </g>

                        <g id="grp4" opacity="0" transform="translate(35 50)">
                            <circle id="oval1" fill="#F48EA7" cx="6" cy="5" r="2"/>
                            <circle id="oval2" fill="#F48EA7" cx="2" cy="2" r="2"/>
                        </g>

                        <g id="grp1" opacity="0" transform="translate(24)">
                            <circle id="oval1" fill="#9FC7FA" cx="2.5" cy="3" r="2"/>
                            <circle id="oval2" fill="#9FC7FA" cx="7.5" cy="2" r="2"/>
                        </g>
                    </g>
                </svg>

                                <div style="height: 8px;"></div>

            </div>

            <div v-else>

                <input type="checkbox" class="checkheart" :id="field" @click="check" v-model="msg"/>
                <label :for="field">
                    <svg class="heart-svg" viewBox="467 392 58 57" xmlns="http://www.w3.org/2000/svg">
                        <g id="Group" fill="none" fill-rule="evenodd" transform="translate(467 392)">

                            <path d="M29.144 20.773c-.063-.13-4.227-8.67-11.44-2.59C7.63 28.795 28.94 43.256 29.143 43.394c.204-.138 21.513-14.6 11.44-25.213-7.214-6.08-11.377 2.46-11.44 2.59z" id="heart" fill="#AAB8C2" />

                            <circle id="main-circ" fill="#E2264D" opacity="0" cx="29.5" cy="29.5" r="1.5"/>

                            <g id="grp7" opacity="0" transform="translate(7 6)">
                                <circle id="oval1" fill="#9CD8C3" cx="2" cy="6" r="2"/>
                                <circle id="oval2" fill="#8CE8C3" cx="5" cy="2" r="2"/>
                            </g>

                            <g id="grp6" opacity="0" transform="translate(0 28)">
                                <circle id="oval1" fill="#CC8EF5" cx="2" cy="7" r="2"/>
                                <circle id="oval2" fill="#91D2FA" cx="3" cy="2" r="2"/>
                            </g>

                            <g id="grp3" opacity="0" transform="translate(52 28)">
                                <circle id="oval2" fill="#9CD8C3" cx="2" cy="7" r="2"/>
                                <circle id="oval1" fill="#8CE8C3" cx="4" cy="2" r="2"/>
                            </g>

                            <g id="grp2" opacity="0" transform="translate(44 6)">
                                <circle id="oval2" fill="#CC8EF5" cx="5" cy="6" r="2"/>
                                <circle id="oval1" fill="#CC8EF5" cx="2" cy="2" r="2"/>
                            </g>

                            <g id="grp5" opacity="0" transform="translate(14 50)">
                                <circle id="oval1" fill="#91D2FA" cx="6" cy="5" r="2"/>
                                <circle id="oval2" fill="#91D2FA" cx="2" cy="2" r="2"/>
                            </g>

                            <g id="grp4" opacity="0" transform="translate(35 50)">
                                <circle id="oval1" fill="#F48EA7" cx="6" cy="5" r="2"/>
                                <circle id="oval2" fill="#F48EA7" cx="2" cy="2" r="2"/>
                            </g>

                            <g id="grp1" opacity="0" transform="translate(24)">
                                <circle id="oval1" fill="#9FC7FA" cx="2.5" cy="3" r="2"/>
                                <circle id="oval2" fill="#9FC7FA" cx="7.5" cy="2" r="2"/>
                            </g>
                        </g>
                    </svg>
                </label>
            </div>

        </div>
    </div>

</template>

<script>
    export default {
        props: ['id','firstSelect'],
        data() {
            return {
                res:'',
                field:'',
                msg:false,
            }
        },

        created(){

            this.selected = this.firstSelect;
            this.res = this.firstSelect;

            this.field = 'heart' + this.id;

        },

        methods: {
            check(){


                if(this.selected){
                    this.res = false;
                } else {
                    if(this.msg){
                        this.res = false;
                    } else {
                        this.res = true;
                    }
                }
                this.selected = false;
                this.$emit('heartSelect',this.id,this.res);

            }
        }
    }
</script>

あとは、使うだけ。
非同期読み込みだと、後で値が渡らないので、同期で読み出す。

Top.vue
    import heart from './Heart'
    export default {
        components: {
            heart
        },

        data () {
            return {
//子要素にわたす
                id:'777',


        <heart :id="id" :firstSelect="true" @heartSelect="heartSelect"></heart>
        <heart :id="id" :firstSelect="false" @heartSelect="heartSelect"></heart>



        methods: {


            heartSelect(id,bool){


                console.log(id);//どのIDが
                console.log(bool);//true or false?


            },
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-07-21T08:00:39+09:00

CSSで位置を調整・固定するpositionの指定方法 byウェブカツ

CSSでの位置指定は、webサイト作りの基本中の基本。
見栄えを良くするために、要素の位置を自由に決めたい場面は多い。

だが、HTML/CSSを学習し始めた方には分かりにくい部分でもある。

そこで今回は、CSSで要素の位置を調整するときに使うpositionプロパティについて解説する。

positionとは

positionとは、要素の位置を決めるためのプロパティのこと。

HTMLのブロック要素は基本的に縦並びで、floatやflexboxなどを使う事で横並びにする事ができる。
大まかなレイアウトはこれで対応できるが、細かく要素の位置を指定したいときにはpositionを利用する。

CSSで位置を指定する書き方

positionの書き方

positionプロパティはこう書く。

要素 {
position: 値;
}

 

値の部分には「static」「relative」「absolute」「fixed」のどれかが入る。この値によって「どの様にして位置を決めるのか」を指定することができる。

  • static: positionの初期値。位置を決める方法を指定ない。
  • relative: 今の位置を基準として、相対的な位置を決める。
  • absolute: static以外のpositionが指定された親要素の位置を基準として、絶対的な位置を決める。
  • fixed: ブラウザウィンドウを基準として、絶対的な位置を決める。画面をスクロールしてもその場所に固定されたまま。

位置を調整するtop・bottom・left・rightの使い方

positionの値で指定した位置の決め方に従い、実際にどれだけ動かすのかを決めるのが 「top」「bottom」「left」「right」。

  • top: 指定した位置の「上」からどれだけ動かすかを決める
  • bottom: 指定した位置の「下」からどれだけ動かすかを決める
  • left: 指定した位置の「左」からどれだけ動かすかを決める
  • right: 指定した位置の「右」からどれだけ動かすかを決める

実際に指定するときは、positionと組み合わせて「top, bottomのどちらか」と「left, rightのどちらか」を指定する。

例えば、「sample」というクラスの要素を今の位置を基準として上から10px, 左から20pxのところに要素を移動する場合は、以下の様にCSSを記述。

CSS

.sample {
position: relative; /* 今の位置を基準 */
top: 10px; /* 上から10px */
left: 20px; /* 左から20px */
}

 

この値はposition: staticの時には指定することができないので注意。

positionの値と位置指定の方法

ここからはもう少し詳しく、positionの値によって要素がどう動くのかを説明する。

position:static - CSSで何も記載しないときの初期値

staticはpositionの初期値。CSSで何もしていないときはこの値になっている。

例えば、縦横が300pxの赤い要素と、縦横が100pxの黒い要素（今回はdiv）をstaticを使って配置してみよう。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="style.css" />
<title>sample</title>
</head>
<body>
<div class="red"></div>
<div class="black"></div>
</body>
</html>

 

CSS

.red {
width: 300px;
height: 300px;
background: #d7263d;
position: static; /* staticを指定 */
}

.black {
width: 100px;
height: 100px;
background: #02182b;
position: static; /* staticを指定 */
}

 

結果

この様に、縦にすき間無く並んだ状態になる。

staticは、位置や重なり（z-index）を指定しても反映されない。
例えば黒の要素を右へ10px動かそうと

.black {
width: 100px;
height: 100px;
background: #02182b;
position: static; /* staticを指定 */
left: 10px; /* 左から10px移動する */
}

と書いても移動しないので、要素を移動させたい場合は、relativeやabsoluteにする。

position:relative - 相対的に位置を移動させたい時に利用


relativeは、今の位置を基準として、相対的な位置を決めるときに使う。


まずはrelativeを指定してみよう。
(HTMLはstaticと同じなので省略)

CSS

.red {
width: 300px;
height: 300px;
background: #d7263d;
position: relative; /* relativeを指定 */
}

.black {
width: 100px;
height: 100px;
background: #02182b;
position: relative; /* relativeを指定 */
}

 

結果

見た目はstaticと変わらない。
では、ここから黒い要素を「上から10px」「左から20px」動かしてみよう。

CSS

.red {
width: 300px;
height: 300px;
background: #d7263d;
position: relative; /* relativeを指定 */
}

.black {
width: 100px;
height: 100px;
background: #02182b;
position: relative; /* relativeを指定 */
top: 10px; /* 上から10px移動 */
left: 20px; /* 左から20px移動 */
}

 

結果

赤い要素にピッタリくっついて並んでいた黒い要素が、本来の表示位置から移動したのが分かるだろうか。

この様に、position:relativeはstaticと比較して

  • top・bottom・left・rightを指定しなければstaticと同じ見た目になる
  • top・bottom・left・rightを指定すると、位置を調整できる

という違いがあることを覚えておこう。

position:absolute - 親要素を基準として絶対的な位置を調整

position:absoluteは、親要素の位置を基準として絶対的な位置を決める事ができる。

まずは幅400px、高さ300pxのグレーの親要素の中に、1辺が150pxの赤い箱と1辺が100pxの黒い箱の要素を入れよう。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet"href="style.css" />
<title>sample</title>
</head>
<body>
<div class="parent">
<div class="red"></div>
<div class="black"></div>
</div>
</body>
</html>
 

CSS

.parent {
width: 400px;
height: 300px;
background: #e8e8e8;
}

.red {
width: 150px;
height: 150px;
background: #d7263d;
}

.black {
width: 100px;
height: 100px;
background: #02182b;
}

 

結果

postionを何も指定しないと、グレーの要素の中に、赤い要素と黒い要素が縦に並ぶ形になる。

では、黒い要素の位置をabsoluteにし、左上を基準とするためにtopとleftを0にしよう。
absoluteは「親の要素がstatic以外の時に、親要素を基準とする」ので、親要素であるparentにrelativeを付ける。

CSS

.parent {
width: 400px;
height: 300px;
background: #e8e8e8;
position: relative; /* 親要素にrelativeを指定 */
}

.red {
width: 150px;
height: 150px;
background: #d7263d;
}

.black {
width: 100px;
height: 100px;
background: #02182b;
position: absolute; /* 子要素はabsoluteを指定 */
top: 0; /* 上を基準 */
left: 0; /* 左を基準 */
}

 

結果

黒い要素の左上が、グレーの要素の左上と重なるように移動した。
今回はtopとleftを指定したため、基準が「親要素の左上」になっているが、例えば親要素の左下を基準としたい場合はこのように書く。

CSS

.black {
width: 100px;
height: 100px;
background: #02182b;
position: absolute; /* 子要素はabsoluteを指定 */
bottom: 0; /* 下を基準 */
left: 0; /* 左を基準 */
}

 

結果

この様にabsoluteは他の要素は無視して、親要素を基準とした絶対的な位置を指定することができる。

position:fixed - 位置を固定

position:fixedは、画面を基準とした位置に要素が固定される。
例えばスクロールしても位置が変わらないヘッダーや、縦に長いページでよく見かける「上に戻る」ボタンなどで利用されている。

指定方法はabsoluteと同じだが、基準が親要素では無くブラウザウィンドウである事に注意。

positionを使った位置調整を練習しよう

CSSで思い通りに位置を動かせるようになるためには、実際にコードを書いてみるのが一番である。

ウェブカツでは、HTML/CSSの基礎を練習できる鬼練を無料で公開しているので、チャレンジしてみよう。
https://webukatu.com/wordpress/blog/1833

かずきち

プログラミング学習サイト「ウェブカツ!!」の顧問。
不動産、保険の営業マンから、エンジニアへ転身。
「HTMLって何？」という状態から3ヶ月の独学のみでエンジニアへ転職し、１年で年収１千万を稼ぐエンジニアへ。
独学時代のプログラミング学習の分かりにくさや、「技術しか出来ずに稼げていないエンジニア」の現状を変えるため「ウェブカツ」を立ち上げ運営している。

【ウェブカツ公式WEBサイト】
https://webukatu.com/

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-07-21T00:51:07+09:00

scssでの折り返しについて

最初に

出品機能を実装中、プレビュー画像をlabel-boxと横並びにしたかった。
57eb6db53b4f420228aa7e8d2a956573.png

原因

flex-wrap: wrap;で折り返されていた...
flex-wrap: nowrap;に変更。単一行に押し込むという形で横並びにすることが出来ました。
330fc64d44bf614fb469022224960558.png

flex-wrapプロパティについて

フレックスアイテムを単一行に押し込むか、あるいは複数行に折り返してもよいかを指定するプロパティ。
横並び!横並び!と考え方が凝り固まっていました。
横並びの方法はfloatやinline-blockしか思い当たらず参考アプリの検証ツールで原因に気づくことが出来ました。
思いがけない自分の記述で手間取ってしまったので、コードを修正するときは広い視野を意識していきます。

参考サイト

https://developer.mozilla.org/ja/docs/Web/CSS/flex-wrap

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

日付別

タグ一覧