MyController

WEB業界素人の僕がまた見返しそうなことのメモです。

CSS

【CSS】スクロールバーの色変更と横スクロールバーを出す方法

CSS

スクロールバーの色変更 最近よくやるやつ。ググればいいんだけどどうもググったやつを適用しても全然反映されない。 下記ならうまくいくので、何も考えずコピペする事にした。という備忘録的記事。 .text_box::-webkit-scrollbar{ /* スクロールバー全体 */…

【CSS】背景に画像を使わずCSSだけでスタイリッシュな斜め背景をつける方法

CSS

実は簡単で、グラデーションの境目をパキっとさせるだけ。つまりこんな感じ。 background-image: linear-gradient(-61deg, #d8d9cf 59%, #fff 55%, #fff); background-position: 54px; background-repeat: no-repeat; 参考 8ステップで完成!CSS3で「斜めの…

font-familyが苦手な人(自分)の為のメモ

CSS

ぜんっぜん難しくないんだろうけどフォントにうとすぎて恥ずかしい。 まとめるとゴシックと明朝体は分けて書いた方がいいらしい。 つまりベースとしてはゴシックで、明朝のところだけクラスを付けてあげる。 もう毎回こんな感じで指定したらいいと思う。 bod…

【CSS】Flexboxで簡単にレイアウト

CSS

まだ使ってないけどこういうのがあるので記録。 参考 CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 | コリス

【CSS】おしゃれな見出しのまとめ

CSS

気になったのでメモ。 コードまで見てないけどつかえそう。 CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選

【デザイン】今後参考にさせて頂くかもなサイトと気になったデザインの実現ヒント

背景の縦グリッドを簡単に実現 http://epoch-inc.jp/http://1st-touch.jp/about/http://norgram.co/http://thefotonaut.com/en/http://www.archi-k.com/ 縦グリッドはCSSでこんな感じのよう。 leftで指定px; transform: matrix(1, 0, 0, 1, 0, 0); ボックス…

【CSS3】JavaScript不要!簡単アニメーション

CSS

意外と簡単。対応ブラウザには注意。 transition(IE10以上対応) transition効果(時間的変化)をまとめて指定する。 つまりゆっくり消えたりするやつのもできる。 イージング ease-in-outとかはマウスオンのボタンとか使えそう。 参考 CSS3プロパティ tran…

background-imageをスマホで高さ自動にする

CSS

こんな感じ。 #flow .tabOuter ul.tab li.instagram { background-image: url(../img/sp/tab_insta_off.png); background-size: contain; padding-bottom: calc(50%*50/300); height: auto;} calcの後ろで画像の高さ/幅を計算してる。 今回は高さ50px、幅300…

CSSでハマったこと

CSS

どうしてもwidthが合わないとき(スマホ) ヘッダーに下記をいれる。 <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> あとたまにやるから忘れるはず。 overflow:hiddenを親要素につけたら幸せになれる。 floatって浮いてるから多様すると大体親要素の高さ自動で認識しない。 つまりはブロックになってる下</meta>…