カテゴリー: CSS

sass<->scssを変換する

こんにちはここでできます。便利！https://www.sassmeister.com/

Posted Date 6月 29th, 2019

Category in CSS

【CSS】heightを親要素いっぱいになるようにしたい

heightはめんどくさい。前提知識widthの100%の場合、横いっぱいになるようになるが、heightの場 […]

Posted Date 6月 22nd, 2019

Category in CSS

【CSS】backround imageの backgroundプロパティによる一括指定

一括指定しましょうbackgroundのcssはbackgroundプロパティで一括指定できます。具体的には一 […]

Posted Date 5月 27th, 2019

Category in CSS

【CSS】 imgタグにbefore & afterつけても動かない件。

はじめに微妙にハマりました・・・答え残念ながらほとんどのブラウザでサポートされていません。おとなしく諦めましょ […]

Posted Date 4月 13th, 2019

Category in CSS, はまった所

【CSS】テキストを親要素の中央に配置する

正解だけさっさとくれいこんなかんじでいけるはずです。.parents { position: re […]

Posted Date 4月 6th, 2019

Category in CSS

display:noneからdisplay:blockのときにアニメーションさせたい

概要何がしたいか？なんとなくただdisplay:blockでポンと表示されるだけなのは味気ないのでなんかいい感 […]

Posted Date 3月 19th, 2019

Category in CSS, JavaScript, jQuery

BEM入門「Introduction」を読む

IntroductiontodoMethodologiestodoWhy BEM over the other […]

Posted Date 2月 12th, 2019

Category in CSS, 設計思想

CSSのボタンを縦横の中央寄せにする

縦の中央寄せはいつも軽くハマる・・・こんな感じで。ポイントとしてはline-heightでボタンの高さと同じに […]

Posted Date 2月 10th, 2019

Category in CSS

CSSフレームワーク比較2018

CSSのフレームワークを比較していくよー！😆Bootstrap言わずとしれたCSSフレームワーク界の巨人。知名 […]

Posted Date 11月 25th, 2018

Category in CSS

CSSでbackgrondにグラデーションをかける方法

linear-gradient一つの線上(開始位置と終了位置の方向が一方)にグラデーションをかけていきます。書 […]

Posted Date 8月 4th, 2018

Category in Basic, CSS

しばらく見ない間にdesplay:blockじゃなくてdesplay:flexが誕生していて失神しそうになった話

はじめに失神は嘘です。自分が初めてCSS触ったときにはよくわからんけどdisplay:none は消えるdis […]

Posted Date 7月 31st, 2018

Category in Basic, CSS

紛らわしい画像のトリミングメモ

background-size:coverこれはbackground-imageようです。imgタグとかの話で […]

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)することが […]

Posted Date 2月 18th, 2018

Category in BULMA, CSS

【CSS】スマホだけメディアクエリーが効かない

はじめにむむむ。。ふつーにブラウザで縮小するぶんには効くんだけどなー。。なんだこれ。できた参考https:// […]

Posted Date 6月 29th, 2019

Category in CSS

メディアクエリーどうするのがいい感じかな問題

いきさつSP対応サイトを作らないといけないことになったが、メディアクエリーってどういう感じでやるのがいい感じな […]

Posted Date 6月 29th, 2019

Category in CSS, 設計思想

【CSS】CSSでborderを透過(Opacity)させる

いきさつあれ？これってできないんですね・・汗border: 1px solid rgba(255, 0, 0, […]

Posted Date 6月 3rd, 2019

Category in CSS

【CSS】なんかコンテンツが100vhを超えると横スクロールバーが出てきてしまう。

経緯あれ？謎の横スクロールバーが表示されている・・・どういうことだ・・・・？ということで調べてました・・・どこ […]

Posted Date 4月 28th, 2019

Category in CSS, 未分類

【CSS】aタグのリンクの色が変わるのを無効にする

はじめに状況aタグに設定した色があるのに、遷移済みのリンクの色が別の色になってしまう。余計なおせっかいってやつ […]

Posted Date 4月 7th, 2019

Category in CSS

【CSS】親要素からはみ出して画面いっぱいに要素を広げる方法。

はじめにいつも忘れるので書いておきます。こうやる.子供{ width: 100vw;//画面いっぱ […]

Posted Date 3月 30th, 2019

Category in CSS

BEM入門「Naming」を読む

はじめにBEMアプローチは、Webサイトの開発に参加するすべての人が単一のコードベースで機能し、同じ言語を話す […]

Posted Date 2月 12th, 2019

Category in CSS, 設計思想

BEM入門

はじめにBEMとは？BEM – Block Element Modifierは、フロントエンド開発 […]

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 プロパディは要素を変形させるためのものです。たとえば […]

Posted Date 8月 4th, 2018

Category in Basic, CSS

CSS Flexbox 入門

Flexとは？flexible(フレキシブル)のFlexです。囲ったやつをflaxコンテナに設定することでその […]

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にはいくつか種 […]

Posted Date 7月 29th, 2018

Category in Basic, CSS

【CSS】font-familyとかいう宗教論争

font-familyってなんだっけ？と思って少し調べたら思い出しました。あ〜フォントを指定するやつねー。。こ […]

Posted Date 2月 18th, 2018

Category in CSS

Devsway

日々の記録とか記憶とか。

CSS 記事一覧