クリエイティブHTML・CSSDreamWeaverコーディングWEB制作現場シェアTweetこんにちは、Maromaroのfutaです。入社してからデザイン業務が主でしたが、最近デザインとコーディング両方させてもらう案件がありました。前職でもデザイナーメインでコーディングはそこまで頻繁ではなかったので、勉強不足な点は多々あり、産育休はさんでいるので2年ぐらい日々発展するHTML全般に触れていなかったという事になり...(デザインは日常生活でも触れられますが)。頑張って勉強したいと思います。今回自分がデザインしたものの、コーディング時に調べてもすぐに解決できなかった問題の一つが、透過グラデーションでした。忘備録として書き留めておきたいと思います。透過の指定は、transparentではなくrgba()で透明0は何色にする?本文テキストにグラデーションをつけたいやりたいこと...本文の冒頭をグラデーションで一部だけにして、ボタンをクリックすると全文が表示されるデザインを作る(背景は青色、テキストはデバイスフォントで白色)。スマホで長文の時に高さを節約したい時や、続きは会員登録して見てくださいってシチュエーションで見かけますね。↓Photoshopで作った理想図photoshopでのデザイン段階では、5秒ほどで処理できたグラデーションですが...お手本が紹介されているサイトをいくつか参考にして、CSSだけで全部作ってみました。ボタン等の配置はそれなりにデザイン通りになり、次はテキストに縦にグラデーションをかけて消えてもらう処理。これには、CSSのlinear-gradientを使いました。CSSのlinear-gradientの書き方CSSで線形にグラデーションを作る方法は、backgroundの値にlinear-gradientを指定します。開始色は文字に使った白色、下に向かって背景になじませるので終了色は全体背景に使った青系色のコードをひとまず指定してみました。これでは単なる白と青の背景になってしまったので、色の指定は片方は白ではなくて透明にしなければ。Photoshopでは文字自体にグラデーションマスクをかけただけでしたが、逆の発想でした。透明から下方向に青になるbackgroundプロパティを持ったボックスを文字に被せる処理となりますので、背景の値にtransparentを指定してみると、上手くいきました。90%);}↓白色を透明に記述し直して完成しかし...safariでの現象なんと、大きな落とし穴が...!私のマシンはMacなので、ブラウザ確認は主にChrome、Firefox、Safariです。Chrome、firefoxで見ても問題ありませんでしたが、Safari(iOS含む)ではおかしな事になっていました。調べてみると、原因は透過部分に指定しているtransparentでした。Safariではtransparentが「透明な黒」として解釈されるということです(元来、transparentは透明な黒rgba(0,0,0,0)の省略形なので、ストレートに解釈したってことですかね)。透過の指定は、transparentではなくrgba()で対応としては、transparentは使わず、カラーコード(rgba(x,x,x,0))でしっかり透明を指定すれば解決するようです。白?透明0の色は、グラデーションに使用しているものを指定するというのがチェックポイントです。今回の場合、transparent(開始色)を片方に使った青の0%の記述に差し替えます。指定方法は変わりましたが、Safari以外のブラウザでも変わりなく正常に表示されます。0))で指定してみましたが、先ほどと同様Safariだけやはり白くなってしまいました。以上、futaでした。postsよく読まれている記事です。1MBは何GB?データ容量の単位を整理してみた!決定!2020年の流行色Photoshopで画像の書き出しができない時の対処法!Photoshopで書き出したjpg画像の色が変わる時の原因と対処Webデザインで使用できるフォント徹底解説。posts1MBは何GB?データ容量の単位を整理してみた!決定!2020年の流行色Photoshopで画像の書き出しができない時の対処法!Photoshopで書き出したjpg画像の色が変わる時の原因と対処Webデザインで使用できるフォント徹底解説。XDイラストお知らせ運用Fireworksクリエーターフォントまとめ初心者サーバ用語PHPスマホアプリjQuery息抜きDreamWeaverWebディレクターJavaScriptプログラミング仕事効率PhotoshopAdobeWordPress作業効率コーディング便利ツールHTML・CSSWEB制作現場デザイン。