著者:村上
【CSS】object-positionが効かない時の対処法
今回は、CSSのプロパティ object-position について。
object-fit: cover で画像をトリミングした際に、トリミングする位置を画像中央から任意の位置に変更するためのプロパティです。
今までは画像中央の切り抜きで問題なかったのですが、今回は画像の下の方を切り抜きたかったので、使ってみました。
が、img タグにプロパティを追加したのに、反映されず…！
なので、調べてみたところ、下記の記事がヒットしました。
CSS だけで画像の切り抜きをうまくやる – Qiita
https://qiita.com/tmorikawam/items/9947a22e9a5e1183502d
なんでも、object-fit を指定した img に、幅か高さが指定されていないと object-fit:cover が効かないのだそうです。
その場合は、object-fit ではなく、div の overflow で見切れているだけの場合があるようで、そうすると切り抜き位置を変更できないとのこと。
そのため、object-fit を追加したい img タグには、高さもしくは幅を指定すればOKです。
色々いじって追加してしまったので、一旦 CSS を元に戻してから、下記のように img タグに幅・高さを指定したところ、ようやく切り抜き位置を変更できました。
img {
width: 100%;
height: calc(100vh - 30px);
object-fit: cover;
object-position: 50% 100%;
}
なお、上記のコードでは、左右中央で下部分を切り抜いています。
表示したい画像の下の方にメッセージがあったので、下部分が欠けるのはNGだったので、このようにしました。
以上、object-fit と object-position で画像を切り抜いた際、切り抜き位置を変更する方法でした。
意外と見落とすかもしれないので、お気を付けください。
著者:杉浦
色々便利なフロントエンド技術の書いてあるFrontEndHandbook2019の紹介
昨年度までは日本語訳したものがQiitaなどどこかしら分かりやすい場所に上がっていた様なのですが、今年度は見当たらないの本元を検索。githubにありました。
FrontendMasters/front-end-handbook-2019： ［Book］ 2019 edition of our front-end development handbook
Front-end Developer Handbook 2019 – Learn the entire JavaScript, CSS and HTML development practice!
FrontEndHandbookには主にJavaScript、CSS、HTMLに関連するその時々の新しい技術と発行直前の流行り、何が出来れば効率よく品質の良いフロントエンドを作れるかなどが載っています。大体の記事は短めの話とリンク集で、そういったものが集まっています。リンクの先は結構がっつりした話が多いです。
即物的に役立つのはChapter 5. Front-end Dev Toolsです。この章には、これ便利だよ、といった編集者らのおすすめ開発ツールが載っています。有名どころが多いですが、とにかく数が多い為何かしら知らない有益なツールを見つけられます。
著者:杉浦
ある要素のセレクタの取得を簡易にするChrome拡張Get Unique CSS Selectorの紹介
Chromeをはじめとしたwebブラウザの開発者ツールにはHTMLコードからある要素のセレクタを抜き出す機能が備わっています。これだけでも便利なのですが、いちいちHTMLコードの中を探すのは面倒ですし、時には開発者ツールを開くことすら億劫な場合があります。Get Unique CSS Selectorはそういった時の助けになります。
Get Unique CSS Selector – Chrome ウェブストア
AntonLapshin/getselector： Get Selector Browser Extension
使い方は簡単で、右上の拡張アイコンをクリックしてセレクタコピー準備、対象の要素の上にマウスを移動、右クリックからCopy Unique Selector to Clipboardを実行、だけです。一連の動作が次の動画です。
これを合わせるとセレクタを使ったUIテストやwebページの説明書作成などが素の状態よりいくらか楽になります。
著者:村上
【CSS】短いコードで実装できるCSS小技まとめ
とても便利そうなサイトの記事を見つけたので、備忘録としてまとめ。
短いコードで実装できる CSS の小技まとめです。
見つけた記事はこちら。
【第3弾】少しのコードで実装可能な15のCSS小技集 | Webクリエイターボックス
https://www.webcreatorbox.com/tech/css-tips-3
ぬるぬる動くスムーズスクロールの実装方法や、Webフォントの表示遅延を回避する方法などがまとめられています。
以前紹介した CSS で計算式を扱える calc() や、画像をトリミングできる object-fit プロパティも紹介されていました。
確かに、上記 2つには大変お世話になりました…！
記事はこちらから。
【CSS】スタイルシート内で計算式が使えるcalc()が便利
【CSS】CSSのみで画像を簡単にトリミングできる「object-fit」プロパティが便利
で、紹介した記事で個人的に面白いと思ったのが、テキストを円形に回り込ませる方法です。
円形要素、例えば円形の写真に対して shape-outside: circle(); を指定すると、画像の周りにテキストを丸く回り込ませることができるそうです。
サンプルは記事に載っているので、そちらをご参考にしてください。
なお、画像自体が円形である必要はなく、border-radius プロパティで円形したものでもOKみたいです。
以上、CSS の小技集についてのおすすめ記事のご紹介でした。
著者:takahashi
[小ネタ]bootstrapのバージョンを調べる方法
簡単にリッチな画面デザインを表現できるフロントエンドライブラリの一つにBootstrapというのがあります。
BootstrapはTwitterが中心に開発しているデザインフレームワークです。
Bootstrapには機能を拡張できるプラグインが複数存在しているのですが、Bootstrapのバージョンごとに使えるプラグインが異なっていたりすることがあります。
一方Bootstrapは単体での配信だけでなく、Laravelなどのフレームワークにバンドルされて配布されていたりすることもあります。
そういった場合、”一体どのバージョンのBootstrapが入っているのかわからない…”といった場合も出てきます。
Bootstrapには特にcuiツールとかないですし、どうやってバージョン調べるんだろう…と疑問に思い、調べてみました。
すると、簡単に調べられることがわかりました。
Smarty、Bootstrapのバージョンを確認する – misc.log
Bootstrapを構成しているファイルに、”bootstrap.css”というファイルがあるのですが、このファイルの先頭部分に
/*!
* Bootstrap v4.1.0 (https://getbootstrap.com/)
* Copyright 2011-2018 The Bootstrap Authors
* Copyright 2011-2018 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/こんな風にバージョンが書かれていました…w
こんな風にコメントにも大事な情報が載っていることがあるので 、必要ないからと言って削除してしまうのはよろしくありません。
ちなみに動作を変更したい場合は、CSSやオブジェクト指向の言語などであればコードを別ファイルに追記することで動作を上書きすることができますので、なるべくそういった方法を使うようにしたいですね。
著者:村上
【CSS】Androidでボタンをタップした時に表示される枠線を削除する方法
ボタンに限ったことではありませんが、Android 端末でボタンをタップした際に表示されるオレンジの枠線を削除する方法についてです。
ページデザインが全体的に青で統一されていたので、オレンジ色がそぐわなくて消したかったんですよね。
あと、ボタンは円形なのに枠は正方形なので、それも違和感がありました。
ちなみに、Webページではなく、Cordova アプリです。
今回参考にさせていただいた記事はこちらから。
[CSS] Androidでタップ時、オレンジの枠が消えない場合｜metrograph.jp
https://metrograph.jp/css_android_orange/
さて、実装のためのコードは下記のとおりです。
button {
-webkit-tap-highlight-color: rgba(0,0,0,0);
outline: none;
}
記事に乗っていたサンプルコードでは、box-shadow: none; という記述もありましたが、現行のデザインに影響するので、そちらは削除しました。
なお、削除してもオレンジの枠線は消えましたので、問題なし！
記事によると、2行目の -webkit-tap-highlight-color: rgba(0,0,0,0); だけでは消えないらしいので、
outline: none; も重要なのかも？
Android では動作確認できたので、後ほど iOS でも、きちんと動作するか確認する予定です。
以上、Android でボタンタップ時に表示されるオレンジ色の枠線を削除する方法でした。
どなたかのご参考になれば幸いです。
著者:村上
【CSS】Cordovaアプリでスクロールがカクつく時の対処法
現在開発中のアプリで作成してもらったデザインを反映したところ、スクロールした時にガクガクと画面が揺れて、画面上と下にそれぞれ固定してあるヘッダーとフッターも一瞬ズレたりしたのでそれの修正方法についてです。
なお、実行環境は Android でした。
今回参考にさせていただいた記事はこちら。
IEとEdgeのスクロールのガタつきは楽しくカスタマイズしながら直そう！ – More⁺Design – ホームページ制作
https://moreplus-design.com/blog/blog02/
タイトルに、IE とか Edge とありますが、Cordova アプリにも適用できました。
修正方法は、htmlに overflow: hidden;、bodyに overflow: auto; を指定することでした。
CSS で記述すると下記のとおりです。
html {
overflow: hidden;
}
body {
overflow: auto;
}
これを追加して再度アプリを実行したところ、スクロールした時のカクつきが解消され、実にスムーズに動きました！
私の環境では、HTML には特に指定なしで、body に overflow: hidden; が指定されていたので、それが悪さをしていたんですね。
以上、Cordova アプリでスクロールがカクつく時の対処法でした。
どなたかのご参考になれば幸いです。
著者:村上
【CSS】iOSでテキストフォームの内部の影を消す方法
前回に引き続き、CSS での影の取り扱いについて。
さて、iOS で text タイプの input 要素を表示した場合、要素内部に影が表示されていると思います。
今回は、その影を消す方法についてです。
別に影ありでも良かったのですが、Android で見ると影がないのでデザインを統一したい＆input要素に指定した border の色合いが影響して謎の隙間があるように見えるため、削除することにしました。
影を削除するにあたり、参考にさせていただいた記事はこちらから。
CSS：iOSのフォームのボックスシャドウはbox-shadowではなかった件｜PressStocker
http://pressstocker.com/ios-box-shadow/
で、今回初めて知ったのですが、iOS で input 要素に追加される影って、box-shadow プロパティによるではないんですね。
最初、影を消すために box-shadow の記述を探してしまいました…。
では何で指定しているかというと -webkit-gradient というプロパティが使われているとのこと。
なので、影の濃さなどを調節したい場合は、このプロパティの値を変更しましょう。
なお、私の場合のように、影を削除したい場合は -webkit-appearance プロパティを利用します。
影を消したい input 要素に対して下記の CSS を追加すると、サクッと影を削除できました。
-webkit-appearance: none;
以上、iOS で input 要素の影を削除する方法でした。
最初、box-shadow が効かない！どうすれば？となったのですが、無事解消できてよかったです。
著者:村上
【CSS】box-shadowが効かない時の対処法
久しぶりな気がする CSS ネタ！
今回は、div要素 に追加していた box-shadow プロパティが効いたり効かなかったりしたので、その対処法についてです。
参考にさせていただいた記事はこちらから。
box-shadowがうまく適用されない｜memopad
http://memopad.noor.jp/html-css/post-452/
記事によると、コンテンツに指定していた overflow: hidden; が原因とのことで、私の場合も、box-shadow プロパティを指定していた要素の親要素に overflow: hidden; を指定していました。
なお上記の記事では、コンテンツの中にあるサムネイル画像に float を適用していて、それを overflow と position で解除していたのが原因だったとのことです。
なので、overflow: hidden; を親要素から削除したところ、解決しました！
他の記事では、filter: drop-shadow(); を代わりに使うとか、box-shadow の第4引数？の広がり距離を指定するとか、z-index を定義するとか、position:relative; を定義する…などがありましたが、私の環境ではこれでは解決できませんでした。
以上、CSS の box-shadow が効かない時の対処法でした。
これが当てはまらない場合もあるとは思いますが、同じように box-shadow で要素に影がつけられない場合は、とりあえず overflow: hidden; を指定しているかどうかを確認してみることをおすすめします。
著者:asaba
【react】cssでプロパティにハイフンを付けるとエラーになる
reactでのcssの扱い方が少し雑になっていたのでここらで少し復習します・・・。今回はtips of tipsといってもいいくらい小さなこと
ですががっかりしないでくださいまし。
タイトルの通りreactでcssをいじっていたのですが、text-alignを追加しようとしたらcan,t resolve text-alignでエラーを受けました。
通常htmlに書くcssってハイフンって付くよな？と思い上書き保存してもう一回ビルドするもまたも同じエラー・・・。
reactで書く時はなんかの作法があるのかな？と思いながらも試しにtextAlignで書いてみたらなんとビルド成功。なん・・・だと・・・。
もしかしたらハイフンが付くプロパティは全て抜いて書き出す必要があるのかもしれませんね。
これまたなかなか載っていないのでここでこっそり載せておきます。同じ悩みでいらいらしている人の役に立ちますように・・・。
ダメな例↓
</pre>
newsText:{
text-align:"center",
}
<pre>
良い例↓
newsText:{
textAlign:"center",
}
</pre>
<pre>
↓