Tips：background-image・ショートハンド・ディレクトリ構造
自分用今日覚えたことbackground-imageどうしても出なくて困った。階層も画像の名前も確認した、要素に高さも指定した。それでも出ない・・・下記の構文エラーが原因だったらしい。background-image: url(images/top.png) no-repeat;no-repeat はショートハンドでしか記述できないとのこと。background:...
View Articletransitioned
transitionedとはHTMLベースのページで、javascriptによってCSSの切り替えが起こったときのことを表す例）key.addEventListener('transitioned', removeTransition)
View ArticleHTMLで押したボタンの色を変える方法
Aタグではできないまず前提としてAタグではできません(正確にはできないと言う訳でではなく探したらやり方があるのかもしれません)。そう言う訳なので、ラジオボタン要素を使います。ラジオボタン要素の書き方ラジオボタン要素の書き方の紹介です。HTML<inputtype="radio"name="yesorno"id="yes"value="yes"><labelfor="yes"clas...
View ArticleCSSトランジション
CSSトランジションとは、 CSS プロパティが変化する際のアニメーションの速度を操作する手段を提供します。プロパティの変更を直ちに有効にするのではなく、プロパティの変更を一定期間にわたって発生させることを可能にします。例えば、ある要素の前景色を白色から黒色に変更した場合、通常は即座に前景色が替わります。 CSS...
View ArticleClik here to view.
今更学ぶ CSS Multi-column Layout の使い所
はじめに横並びのレイアウトは近年では Flexbox や CSS Grid 、少し前でしたら float によるレイアウトなどの手法があります。自分はまず反射的に Flexbox を使用することが頭に浮かびますが、場合によっては CSS Multi-column Layout を使うことで、文書構造に沿った HTML のまま段組レイアウトを実装することができます。MDN web docs...
View ArticleClik here to view.
【超簡単】iframeを使ってYouTubeを埋め込んだ場合に簡単にレイアウトを整える方法
こんにちは、Yuiです。今回はiframeを使ってYouTube動画を埋め込んだ際にものすごく簡単にレイアウトを整える方法をお伝えします。（私はVueで書いてますが、要はCSSを工夫するだけなので、HTML/CSSを使ってwebページを作成しているときにも使えます。）先日Vue.jsでVuetifyを使ってページを作成してたら変に上部のスペースが空いて困った件という記事を書いたのですが、その最後の完...
View ArticleClik here to view.
Vuetifyのpaginationのshadowを無くす
Vuetifyのページネーションのシャドーを消したい！Vuetifyのv-paginationはデフォルトでシャドーが付いています。しかし、マテリアルデザインでシャドーの無いフラットなデザインにしたいのでこいつを消してやりたい…。結論CSS書いて読み込んむ.v-pagination__navigation{box-shadow:none!important;}.v-pagination__item{...
View ArticleCSSのtransform-origin
transform-originとはオブジェクトを回転させる際の軸の位置を表す参考https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin
View Articleよく見る『中央寄せ横並びレイアウト』を3パターンのCSS Flexboxで実装してみる
CSS FlexboxとはCSS 3から導入されたレイアウトモジュールです。正式名称は『CSS Flexible Box...
View ArticleClik here to view.
border-radiusでムニュムニュするだけのページ作成
動機border-radiusってせいぜい使っても50%で球体が書けるねって話で終わってしまっていて、もっといろいろ書きたくなった。実装まあ、何も言わず見てくれいhttps://emptyset.sakura.ne.jp/munu/こんな感じのヤツがひたすらムニュムニュする。動作原理タイマでランダムにborder-radiusを生成してCSSを修正し、transitionさせる。結論transiti...
View Article【初心者でもわかる】一部だけ角丸をつける方法（border-radius）
どうも、7noteです。今回は一部に角丸をつけたいときの方法を全パターン紹介。左上だけborder-radius: 10px 0 0 0 / 10px 0 0 0; /* 水平方向の 左上、右上、右下、左下 / 垂直方向の 左上、右上、右下、左下 */ /*↑もしくは↓*/ border-top-left-radius: 10px; 右上だけborder-radius: 0 10px 0 0 / 0...
View ArticleNuxt.jsでurl('@/assets/xxx.png')がエラーになる時の解決策
Nuxt.jsでurl('@/assets/xxx.png')がエラーになる時の解決策nuxt...
View Article【Bootstrap4】d-flexも使おう、row / colだけがレスポンシブを表現するわけじゃない
Bootstrap4を利用していたときの気づきをご紹介します。こういうデザインにしたいときがあるPC版 [ あなたのお名前：marshmallow88 ▶変更する ] SP版 [ あなたのお名前： ] [ marshmallow88 ] [ ▶変更する ]...
View Articleシンプルなテーブルcss
今回はvue.js バージョン。そのままコピペなので、参考程度にどうぞ。<style> table.simple { border: 1px solid #ededed; width: 99%; margin: auto; } table.simple th { padding: 5px; border-bottom: 1px solid #ededed;...
View ArticleCSS で作ったバルーンがちらついたときの話
概要はてなマークのバルーン（ホバーしたら説明が出てくるあれ）をCSSで実装したのですが、キャッシュを読み込んでから最初のホバーのときになぜかちらついてしまいました。背景会社のアプリケーションのフロントを新しく作り変えるという業務の最中、上記のようなことが起きました。JSを使っているわけでもないので、まったくわかりませんでした。解決法Chromeで検証をしたところ、事前に読み込まれているはずのフォント...
View Article【初心者でもわかる】インライン要素の近くに謎の空白（スペース）ができる原因
どうも7noteです。よく見ると半角スペースみたいなのが入ってる現象を解説私自身悩んだりつまったりしたことがあったので、参考になれば嬉しいです。結論：インライン要素とインライン要素の間に改行を入れてはいけないHTMLを記述する際、このような書き方はNGです。index.html<div><span>あいう</span><span>えお</span...
View Article%とvwとvh
要素の高さや幅を決める際の%とvwとvhの使い分けについて。% は親要素に対しての比率 vwとvh はブラウザ画面に対しての比率.side-bar{width:100vw;height:100vh;}.side-bar{width:100%;height:100%;}widthは%を使うことが多く、...
View ArticleClik here to view.
班決めを考えるのが嫌すぎて「良い感じに班決め君」作ってみた
はじめにコロナ前を想像してみてください。飲み会で居酒屋にいざ着いたとき、みんながみんな「どこの卓に行こう」「先輩に先に席選んでもらわないと」「新人の子はこの席のほうがいいよね」とか考えてﾅｯｶﾅｶ席につかない、壮絶な牽制大会が始まることありませんか？僕は鳥貴族でよくありました。安くてしかも旨いので大人数で行きがちなんですよね。仕事であれば、例えばグループディスカッションをするとなったときに、どんな班...
View Articleコピペで使える＋－トグルアイコン
自分用チートシートです。※JQuery必須HTML<spanclass="icon"></span>これだけ。CSS.icon{display:block;position:relative;width:30px;//正方形推奨height:30px;//正方形推奨}.icon:before,.icon:after{content:'';display:block;posit...
View Article