Devsway

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

【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のボタンを縦横の中央寄せにする

縦の中央寄せはいつも軽くハマる・・・こんな感じで。ポイントとしてはline-heightでボタンの高さと同じに指定するという方法もあるが、こちらは2行になったときに対応できない、ボタンの高さに変更したときにこちらも変更し […]

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

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

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

【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, はまった所, 日記

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

いきさつ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

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とは?

degの前に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

カテゴリー

オレオレIT用語辞典