読者です 読者をやめる 読者になる 読者になる

わすれた.log

忘れては検索して、そしてまた忘れるその過ちを繰り返さない為に…

CSS

ざっくりとした コンポーネント思考の覚書

コンポーネント思考とはパーツのこと。・ボタンなど小さいパーツを作っていく。 パズルに似ているかも? それをひとつのCSS(SASS)セットでまとめる。・小→大 小さいパーツを組み合わせて、大きいものを作る。・いいこと 使い回しができる わかりやすい・動き…

コンポーネント思考のBEMとやらをメモ

コンポーネント指向 commpone コンポーネント 直訳:コンポーネントとは、部品、成分、構成要素などの意味を持つ英単語 物、ブロック <header>,<footer>,<section>,<content>と同じ 大カテゴリーコンポーネント指向とは部品ごとに分けて、動くCSSのこと。 Classを当てはめるだけで適用される、C</content></section></footer></header>…

CSS3アニメとjQueryによるシンプルなスライドナビ

See the Pen CSS3アニメとjQueryによるスライドナビ by yachiru (@yachiru) on CodePen.なぜそうなるのかはよくわからない。css3のtransitionで動きを指定、動きの終わりはjqueryに切り替える。むーcss3でtransitionで動きを指定して、hoverで動きの終わりを…

cssを書く注意点

最近の注意されたことメモ・スマホなどでの画面の拡大率指定するかしないか把握する。 google的には拡大縮小できた方が良い。・ブレイクポイントは3〜4個くらいにする。 ・ブレイクポイントはsassの変数で管理する。

inline-blockの隙間を消す

CSS

inline-blockで横並びしたときに隙間が開くのでそれを消す方法 親要素に font-size:0; を入れる。 原因は改行コードが表示され隙間が開くそうです。 See the Pen inline-blockの隙間を消す by yachiru (@yachiru) on CodePen.

:notの使い方の例

CSS

css3の擬似セレクタ:notの使い方 ナビなどでボーダーを引くときに「一番最初以外にボーダーを適用」という条件を入れられる。 nav ul li:not(:first-child) a{ See the Pen css:notの使い方 by yachiru (@yachiru) on CodePen.

IE11でCSSのアニメーションが動かなかった対策

@media クエリの中にkeyframes を入れたら反応しなかったです。 外に出したら動きました。(´-`)

IE11のFlexにした時にbasisがおかしくなる

Flexboxで組んでいて、IE11でおかしかったのでメモ flex-basisだけだと横幅がIE11でずれるのでその時は↓を入れる。 /*IE用*/ max-whidth: 50%; See the Pen Float-basis IE by yachiru (@yachiru) on CodePen. 今回、記事を書いて おかしくなったのを再現し…

htmlとcss

CSS

今日は仕事のメモ CSS クラス名の付け方 ×left ○section 編集のしやすさの為要素にとって意味のある文字を入れる flex-basis flexだけセットして 要素が50%と50%になってちゃんと2等分できた 次に、50%の要素の片方にpaddingとmarginセットしたら要素が50%か…