【CSS】vertical-align
はじめにこれよくわからんのよね。。vertical-alignとは？CSS の vertical-align プロパティは、インラインボックス(または表セルボックス)の垂直方向の配置を設定します。 どんな場合に使うの？具 […]
Posted Date 1月 1st, 2020
Category in CSS
CSSで3Dアニメーション作りたい….
いきさつやったことないのにやることになった…キーワード何が必要なのかから調べないと..transformプロパティとりあえずこれ使います。こんなかんじ..transform: rotate(25deg);&# […]
Posted Date 11月 16th, 2019
Category in CSS
sass<->scssを変換する
こんにちはここでできます。便利！https://www.sassmeister.com/
Posted Date 6月 29th, 2019
Category in CSS
【CSS】heightを親要素いっぱいになるようにしたい
heightはめんどくさい。前提知識widthの100%の場合、横いっぱいになるようになるが、heightの場合はそのようにはならない。・・・・なのでどうしようという話。親要素いっぱいに広げるには？flexをうまくつかい […]
Posted Date 6月 22nd, 2019
Category in CSS
【CSS】backround imageの backgroundプロパティによる一括指定
一括指定しましょうbackgroundのcssはbackgroundプロパティで一括指定できます。具体的には一括していできるプロパティは以下の通りです。このプロパティは、一括指定プロパティであり、 background- […]
Posted Date 5月 27th, 2019
Category in CSS
【CSS】 imgタグにbefore & afterつけても動かない件。
はじめに微妙にハマりました・・・答え残念ながらほとんどのブラウザでサポートされていません。おとなしく諦めましょう・・・divとかで兄弟要素作って表現するしかないみたい・・・参考https://lildude.co.uk/ […]
Posted Date 4月 13th, 2019
Category in CSS, はまった所
【CSS】テキストを親要素の中央に配置する
正解だけさっさとくれいこんなかんじでいけるはずです。.parents {
position: relative;
width: 100px;
height: 100px;
[…]
Posted Date 4月 6th, 2019
Category in CSS
display:noneからdisplay:blockのときにアニメーションさせたい
概要何がしたいか？なんとなくただdisplay:blockでポンと表示されるだけなのは味気ないのでなんかいい感じにアニメーションにしたい・・・前提jQueryです。試したけどうまくいかなかったこと普通に$(‘.hoge’ […]
Posted Date 3月 19th, 2019
Category in CSS, JavaScript, jQuery
BEM入門「Introduction」を読む
IntroductiontodoMethodologiestodoWhy BEM over the others?todoBlocks, Elements and Modifiersまずは概念についての説明。実際の命名規 […]
Posted Date 2月 12th, 2019
Category in CSS, 設計思想
CSSのボタンを縦横の中央寄せにする
縦の中央寄せはいつも軽くハマる・・・こんな感じで。ポイントとしてはline-heightでボタンの高さと同じに指定するという方法もあるが、こちらは２行になったときに対応できない、ボタンの高さに変更したときにこちらも変...
Posted Date 2月 10th, 2019
Category in CSS
CSSフレームワーク比較2018
CSSのフレームワークを比較していくよー！😆Bootstrap言わずとしれたCSSフレームワーク界の巨人。知名度、できることの広さは抜群。その一方でややファイル容量が大きく、複雑になりがち。http://getboots […]
Posted Date 11月 25th, 2018
Category in CSS
CSSでbackgrondにグラデーションをかける方法
linear-gradient一つの線上(開始位置と終了位置の方向が一方)にグラデーションをかけていきます。書式linear-gradient(グラデーションの角度または方向, 開始色, 途中色, 終了色);ほぉー途中色 […]
Posted Date 8月 4th, 2018
Category in Basic, CSS
しばらく見ない間にdesplay:blockじゃなくてdesplay:flexが誕生していて失神しそうになった話
はじめに失神は嘘です。自分が初めてCSS触ったときにはよくわからんけどdisplay:none は消えるdisplay:blockはブロック要素にするdisplay:inline-blockはインラインにするくらいの認識 […]
Posted Date 7月 31st, 2018
Category in Basic, CSS
紛らわしい画像のトリミングメモ
background-size:coverこれはbackground-imageようです。imgタグとかの話ではないので注意object-fit:coverこれは100pxのところに300pxの画像を表示するときにどうす […]
Posted Date 7月 30th, 2018
Category in CSS
忘れやすいCSS
line-height文と文の上下間の感覚初期値(noumal)はブラウザによる。
Posted Date 3月 15th, 2018
Category in CSS
bulma.ioをカスタマイズしてbulma臭を爆速で消す方法。
bulmaのsassで変数に値を入れることでsassを自分の好みの感じに変更(てかoverride)することができます。THE POWER OF SASS …!!!参考https://bulma.io/doc […]
Posted Date 2月 18th, 2018
Category in BULMA, CSS
【CSS】white-spaceについて ~preタグのwidthがおかしい~
はじめにむむむ。。white-spaceとは？CSS の white-space プロパティは、要素内のホワイトスペースをどのように扱うかを設定します。“ホワイトスペース”ってなに？普通のスペース […]
Posted Date 1月 3rd, 2020
Category in CSS
CSSアニメーションのつらさ…
CSSアニメーションの弱点やってみてわかりました。CSSのアニメーションって制御ができない(難しい)んですね。何がつらいかたとえばボタンを連打するたびにアニメーションを開始することをやろうとした場合、クリック...
Posted Date 11月 17th, 2019
Category in CSS, はまった所, 日記
【CSS】スマホだけメディアクエリーが効かない
はじめにむむむ。。ふつーにブラウザで縮小するぶんには効くんだけどなー。。なんだこれ。できた参考https://stackoverflow.com/questions/17344339/media-query-not-wo […]
Posted Date 6月 29th, 2019
Category in CSS
メディアクエリーどうするのがいい感じかな問題
いきさつSP対応サイトを作らないといけないことになったが、メディアクエリーってどういう感じでやるのがいい感じなのかなぁ？メディアクエリーとは?デバイスによってCSSを分けるやつです。if文みたいな感じで使えます。設計方針 […]
Posted Date 6月 29th, 2019
Category in CSS, 設計思想
【CSS】CSSでborderを透過(Opacity)させる
いきさつあれ？これってできないんですね・・汗border: 1px solid rgba(255, 0, 0, 0.5);
どうしたらできる？答えbackground-clip: padding-b […]
Posted Date 6月 3rd, 2019
Category in CSS
【CSS】 なんかコンテンツが100vhを超えると横スクロールバーが出てきてしまう。
経緯あれ？謎の横スクロールバーが表示されている・・・どういうことだ・・・・？ということで調べてました・・・どこのCSSが悪さしてるんだろう・・多分無駄に100vwとか書いちゃってるパターンかな・・・？んんー？違...
Posted Date 4月 28th, 2019
Category in CSS, 未分類
【CSS】aタグのリンクの色が変わるのを無効にする
はじめに状況aタグに設定した色があるのに、遷移済みのリンクの色が別の色になってしまう。余計なおせっかいってやつ。こうすればよいa:visited{
color: inherit;
}
&# […]
Posted Date 4月 7th, 2019
Category in CSS
【CSS】親要素からはみ出して画面いっぱいに要素を広げる方法。
はじめにいつも忘れるので書いておきます。こうやる.子供{
width: 100vw;//画面いっぱい
position:relative//通常の位置から移動させる
left: 50% […]
Posted Date 3月 30th, 2019
Category in CSS
BEM入門「Naming」を読む
はじめにBEMアプローチは、Webサイトの開発に参加するすべての人が単一のコードベースで機能し、同じ言語を話すことを保証します。 適切な名前を使用すると、Webサイトのデザインの変更に備えることができます。大前提No t […]
Posted Date 2月 12th, 2019
Category in CSS, 設計思想
BEM入門
はじめにBEMとは？BEM – Block Element Modifierは、フロントエンド開発で再利用可能なコンポーネントとコード共有を作成するのに役立つ方法論です。方法論なんですねー。特徴Easy使うに […]
Posted Date 2月 12th, 2019
Category in CSS, 設計思想
cssの設計思想についてrscss・gem等
そもそもCSSの設計思想とはなんぞやCSSを扱う上でセレクタは欠かせませんが、自分一人ならいざしらず他の人も同時に作業する場合、みんなが「オレオレ」で「いい感じ」してしまった末路として、一つのセレクタが複数箇所で意図しな […]
Posted Date 1月 8th, 2019
Category in CSS, 設計思想
CSSのdegとは？CSS Transformsとは？
deｇの前にTransformsとは？transform プロパディは要素を変形させるためのものです。たとえばこんな感じですtransform: translate(50px, 100px);translateはXY軸で […]
Posted Date 8月 4th, 2018
Category in Basic, CSS
CSS Flexbox 入門
Flexとは？flexible(フレキシブル)のFlexです。囲ったやつをflaxコンテナに設定することでその中のやつがflax-itemとなり、フレキシブルになります。flex-wrap参考https://www.w3 […]
Posted Date 8月 1st, 2018
Category in Basic, CSS
CSSフレームワークを使う際の注意点・コツ
はじまり備忘録として書いておきます。。imgに対してwidthとhightのを当てようとしたのだが、なぜかうまくいかない。。自分の書き方が悪いのか…と思っていろいろやっていたのですが、うまくいかない。。。結局 […]
Posted Date 7月 31st, 2018
Category in CSS, はまった所
positionについて
たまーにCSSやるといつも忘れてるこのposition。。positionの種類positionにはいくつか種類があるよ！static無指定と同じ。つまり初期値ってことかな。relativerelativeとは「関係」あ […]
Posted Date 7月 29th, 2018
Category in Basic, CSS
【CSS】font-familyとかいう宗教論争
font-familyってなんだっけ？と思って少し調べたら思い出しました。あ〜フォントを指定するやつねー。。こんな指定方法だったか。。Syntaxfont-family: family-name|generic-fami […]
Posted Date 2月 18th, 2018
Category in CSS
最近のコメント