CSS
サイトを作っていて、画面外に要素を置いてボタンクリックしたらスライドしてきて動画を再生するとかってことはよくある。 久々にフロントを触っていて恥ずかしながらハマったのでメモしておく。・html,body両方にoverflow-x:hidden;をかく htmlの方にも書か…
取り急ぎ、かいつまんでメモだけ。■flexboxの使い方 display:flex ボックスで横並びにして、その中のシェアボタンは下に固定する場合、 flexbox内に入れ子で1つのカード自体もflexにしてmargin:auto;にするとうまくいく。 ■Adobeのアセット https://assets.a…
前回の記事でタスクランナーのススメを書いたが、少しアップデートしたので紹介する。前回のタスクランナーの記事 hiromode.hatenablog.com 内容としては ・PUG削除 ・HTMLのパラメータ付与の上出力 を追加した。 理由はPUGの書き方を習得するのが面倒だし、…
現場で役立つCSSアニメーション オンラインデモ - CSS Nite LP58「Coder’s High 2018」 随時追記
言葉だと全く伝わらないと思うが、要するにこういうことがしたい。「初期バー、マウスオンでアンダーライン伸ばし、マウスを離したら消えて初期のバーに戻る」とりあえず結論からSee the Pen XBVLbY by HiroyasuMurayama (@h-murayama-the-reactor) on CodeP…
Web制作では様々な仕事があり、毎回やるのが面倒だから自動化できるところは自動化して楽しちゃいましょうっていう話。ざっくり説明すると下記3つを使う。 Gulp.js(タスクランナー) ・Sass→CSS変換 ・CSS,JS,画像圧縮 などをJSで作成して自動化させる。 Sa…
タイトルがわけわからんと思うが、想定しているのはよくあるフォームの最後にある同意ボタン。こういうの ただの同意ボタンならlabel内にinputタグ書けば文字まで全部クリッカブルになるのでそれでおしまい。けど今回はそうじゃなくて画像のようにチェックボ…
自分はCSSのfloat:left;をよく使うので、いちいち要素ごとにclearするのがめんどい。 ええーい、このあとは回り込ませたくないんだよ!Flat!!ってときに使う手法だったりフォントだったりをまとめておく。てことで下記。 html, body, div, span, applet, obj…
スクロールバーの色変更 最近よくやるやつ。ググればいいんだけどどうもググったやつを適用しても全然反映されない。 下記ならうまくいくので、何も考えずコピペする事にした。という備忘録的記事。 .text_box::-webkit-scrollbar{ /* スクロールバー全体 */…
実は簡単で、グラデーションの境目をパキっとさせるだけ。つまりこんな感じ。 background-image: linear-gradient(-61deg, #d8d9cf 59%, #fff 55%, #fff); background-position: 54px; background-repeat: no-repeat; 参考 8ステップで完成!CSS3で「斜めの…
ぜんっぜん難しくないんだろうけどフォントにうとすぎて恥ずかしい。 まとめるとゴシックと明朝体は分けて書いた方がいいらしい。 つまりベースとしてはゴシックで、明朝のところだけクラスを付けてあげる。 もう毎回こんな感じで指定したらいいと思う。 bod…
まだ使ってないけどこういうのがあるので記録。 参考 CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 | コリス
気になったのでメモ。 コードまで見てないけどつかえそう。 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); ボックス…
意外と簡単。対応ブラウザには注意。 transition(IE10以上対応) transition効果(時間的変化)をまとめて指定する。 つまりゆっくり消えたりするやつのもできる。 イージング ease-in-outとかはマウスオンのボタンとか使えそう。 参考 CSS3プロパティ tran…
こんな感じ。 #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…
どうしても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>…