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

MyController

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

CSS

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>…