チェ・ゲバムラの日記

脱犬の道を目指す男のブログ

CSS

overflow:hidden;にしても画面横スクロールが出てしまうときの確認項目

CSS

サイトを作っていて、画面外に要素を置いてボタンクリックしたらスライドしてきて動画を再生するとかってことはよくある。 久々にフロントを触っていて恥ずかしながらハマったのでメモしておく。・html,body両方にoverflow-x:hidden;をかく htmlの方にも書か…

Adobe MAX Japan - Dreamweaverで学ぶ、「いい感じ」にするための実践CSSテクニックを視聴して、フロントエンドの現場からみて使えそうなものだけメモしたまとめ

CSS

取り急ぎ、かいつまんでメモだけ。■flexboxの使い方 display:flex ボックスで横並びにして、その中のシェアボタンは下に固定する場合、 flexbox内に入れ子で1つのカード自体もflexにしてmargin:auto;にするとうまくいく。 ■Adobeのアセット https://assets.a…

【タスクランナー】もうキャッシュのせいなんて言わせない。CSS・JavaScript・画像・PDFなど全ての読み込みファイルにパラメータをつけてファイル出力する方法

前回の記事でタスクランナーのススメを書いたが、少しアップデートしたので紹介する。前回のタスクランナーの記事 hiromode.hatenablog.com 内容としては ・PUG削除 ・HTMLのパラメータ付与の上出力 を追加した。 理由はPUGの書き方を習得するのが面倒だし、…

CSSアニメーションの参考一覧

CSS

現場で役立つCSSアニメーション オンラインデモ - CSS Nite LP58「Coder’s High 2018」 随時追記

【マウスオーバーイベント】CSS+JSで作るアンダーライン→消えて復活する

言葉だと全く伝わらないと思うが、要するにこういうことがしたい。「初期バー、マウスオンでアンダーライン伸ばし、マウスを離したら消えて初期のバーに戻る」とりあえず結論からSee the Pen XBVLbY by HiroyasuMurayama (@h-murayama-the-reactor) on CodeP…

【node.js】Gulp.js+Sass+PugでWEB制作を自動化する

Web制作では様々な仕事があり、毎回やるのが面倒だから自動化できるところは自動化して楽しちゃいましょうっていう話。ざっくり説明すると下記3つを使う。 Gulp.js(タスクランナー) ・Sass→CSS変換 ・CSS,JS,画像圧縮 などをJSで作成して自動化させる。 Sa…

inputタグとlabelタグをつなげて中身のリンクだけはクリック出来るようにする方法

タイトルがわけわからんと思うが、想定しているのはよくあるフォームの最後にある同意ボタン。こういうの ただの同意ボタンならlabel内にinputタグ書けば文字まで全部クリッカブルになるのでそれでおしまい。けど今回はそうじゃなくて画像のようにチェックボ…

【CSS】個人的Reset.css

CSS

自分はCSSのfloat:left;をよく使うので、いちいち要素ごとにclearするのがめんどい。 ええーい、このあとは回り込ませたくないんだよ!Flat!!ってときに使う手法だったりフォントだったりをまとめておく。てことで下記。 html, body, div, span, applet, obj…

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