targetSdkVersion 28 + Android 9.0からはWebView内にRGBAのカラーコードが書けるようになった話 - Qiita
targetSdkVersion 28 + Android 9.0からはWebView内にRGBAのカラーコードが書けるようになった話Android 2019年8月になったので、Google Playに新規アプリをリリースする際のtargetSdkVersionを28以上にしないといけないやつが始まりました。既存アプリのアップデートも、11月から同様の措置が入るので、そろそろ対策しておきたいですね。 そんなわけで、API Level 28って新しく何が入ったんだっけ、と確認してみました。 動作の変更点: API レベル 28+ をターゲットとするアプリ | Android Developers フォアグラウンドサービスにパーミッションが必要になったり、Apache HTTPクライアントのサポートが本格的に終了したりと、既存の実装次第ではアレしそうなものもいくつか見当たります。 WebV
フロントエンドのプロ直伝！ CSS余白設定の三原則（＋線の引き方） - Qiita
前置き CSSでの余白の取り方について、後輩に「margin-topとmargin-bottomどっち派ですか？」と聞かれたので、 回答内容を記事として残します。 昔、会社のOJTで学んだことの共有となります。 1. 基本的にmargin-topを使う 理由としては、そちらの方が後々調節しやすいからです。 また、後述の優先度で設定していけば、margin-bottomの出番はほぼなくなります。 2. どうしても無理な場合にbottomを使う margin-bottomは他の方法ではどうしても設定が無理なケースのみ使いましょう。 3. 隣接セレクタをうまく使うとトルツメしやすい 特定の要素同士が並んだ時だけマージンを取る＝余白の打ち消し設定が不要になります。 設定の優先度 要素がいくらネストしても下記の優先度は変わりません。 この優先度で余白を設定していけば、margin-bottomの出番
【CSS/Javascript】手書き風の文字を錬成して時代錯誤に立ち向かえ - Qiita
TL;DR 手書き文化は滅べ それっぽく対抗してみた 実運用は自己責任で… intro わし「ES提出したるで～、OpenES(※)でいくらでも出したるわ」 企業「手書きね＾＾」 わし「」 こういう非効率の塊みたいな企業が死滅することを祈りながら、技術的に解決することを試みる。 ※OpenES: Web上で書いてそのまま提出できるES。ガクチカ(学生時代に力を入れていたこと)という9割の人間はろくに書けない質問などを提供してくれる 目標 ぱっとみ手書きっぽくないようなフォントの組み合わせとかを錬成。 使用フォント ダーツフォント http://www.p-darts.jp/font/dartsfont/ ボールペンで書いたような細いフォント(公式ページより) 見てもらうとわかるが、字が綺麗 font-weight: boldじゃないとめっちゃ細い Kalam https://fonts.g
ウェブサイトに適用する游ゴシックフォントを見直しまくった最終解 - Corredor
拙作のノーマライズ CSS ライブラリ、「Neo's Normalize」を見直していたところ、Windows の Chrome ブラウザで適用されている游ゴシックフォントがかすれていた。 「あれ？@font-face で游ゴシック Medium を指定してるのにな？」と思い、設定を見直したところ、コレが効かなくなっていた。 当時 Neo's Normalize を作る際、それなりに調査しまくった結果だったのだが、どうも仕様が変わっていたようなので、OS・ブラウザごとに挙動を見直すことにした。今回はその研究結果をまとめる。 游ゴシックフォントに関する基礎知識のおさらい Chrome で効かなくなっていた @font-face font-weight: 500 は効いたが、副作用が避けられない Chrome で游ゴシック Medium を使うのは諦める 別解 : 潔く Regular フォン
何番目系の便利なCSSまとめ - Qiita
最初 :first-child 最初の要素（親要素から見て、子要素すべての最初） デモ :first-of-type ある要素の最初（親要素から見て、ある子要素の最初） デモ 最後 :last-child 最後の要素（親要素から見て、子要素すべての最後） デモ :last-of-type ある要素の最後（親要素から見て、ある子要素の最後） デモ 1個だけ :only-child 1個だけ子要素がある（親要素から見て、子要素が1個だけある） デモ :only-of-type 1個だけある子要素がある（親要素から見て、ある子要素が1個だけある） デモ X番目 :nth-child(X) X番目 デモ：５番目 :nth-of-type(X) ある要素のX番目 デモ：５番目 :nth-child(Xn) Xの倍数 デモ：2の倍数 :nth-of-type(Xn) ある要素のXの倍数 デモ：2の倍数
CSSのborder-radiusは実はすごかった！あまり知られていない機能を使用して、かっこいいレイアウトを作る方法
border-radiusプロパティは角丸を定義しますが、カードなどの矩形の角を丸くするために使用するだけでなく、さまざまな形を作成することができます。 矩形や角丸だけのレイアウトではなく、さまざまな形を使用できるスタイルシートのテクニックを紹介します。 CSS border-radius can do that? 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに border-radiusの基礎知識 流れに逆らう（わないで） はじめに 今年開催されたFrontend Conferenceにて、Rachel AndrewはCSS Gridのレイアウトについて講演しました。中でも私が注目したのは、彼女の話の終わりにあったCSSの古いプロパティについてです。 イメージはborder-radiusプロパティを使用するだけで、用
CSSの優先順位を理解しよう（!importantの使い方も）
「CSSの指示が効かない。どうして?」 「CSSが効かなかった。修正に時間がかかりすぎる。」 正しいCSSの設定が効かないことがよくありますし、「効かない」ことをどうにかしようとして、更に設定が複雑になり、収集がつかなくなったことはありませんか？ この経験は初学者が必ず通る道です。ただ、この苦痛はできるだけ避けたいものです。そこで、この記事では知っておいて欲しい「優先順位」の考え方と「!important」の使い方をご紹介します。この知識があれば、CSSの書き方が変わりますし、問題が発生した時の解を自分で導き、必要以上に解決に時間がかることがなくなるはずです。 この記事は、CSSの初学者向けに書いていいます。経験者を想定した記事ではありません。 CSSが効かない状況 まず、どのような時にCSSの指示が効かなくなるかを知っておきましょう。CSSの記載ミスを除き、一般的には以下のパターンがあり
スクロールバーの幅に依存しないスタイル指定 - Qiita
問題 CSSで overflow: scroll; を指定した要素はスクロールバーが表示されます。 ...と、思っていた時期がぼくにもありました。 Yosemite 以降の Mac(OS X 10.10~) では、OS のデフォルト設定でスクロールバーを非表示にしている為、overflow: scroll;を指定してもスクロールバーは表示されません。 その為、スクロールバーが表示される前提でスタイル指定していると表示が崩れてしまいます。 「え？同じブラウザを使っているのに表示崩れが起きるだと！？」 「OSも影響するよー」「▂▅▇█▓▒░(’ω’)░▒▓█▇▅▂」 そもそもスクロールバーの幅はOSやブラウザによって異なるはずで、本来はこれに依存しないスタイル指定をするのが良いはずです。 とはいっても、面倒であったり難しかったりで一般的なスクロールバーの幅(15pxぐらい)を width の計
【css】floatとvertical-alignを併用しようとしてがっつりハマった話 - tanihiro.log
先日書いたブログに、先輩がこんな風にコメントしてくれたにもかかわらず、がっつりハマったので戒めのためにもメモしておきます。 なにが起きたか 要件としては、高さの違う2つのボックスを横並びにして、上下中央寄せにする、というものでした。 <div class="wrapper"> <div class="left">左は<br>二行</div> <div class="right">右は一行</div> </div> .wrapper div { float: left; } とりあえず、横並びだからfloatを指定して、上下中央寄せはvertical-alignを使えばいっかと思っていたら、全然そんなことなかった。（ちゃんと仕様を理解しないでなんとなく使っているからこうなる） .right { display: table-cell; vertical-align: middle; } とか
意外と知らないCSSのvh/vw
こんにちは、モンゴロイドのデザイナーです。 今回のテーマはCSSのvh/vwについてです。 CSSで主に使われるpxと%はおなじみですが、レスポンシブのサイトを制作する上では、Viewport単位であるvh/vwがとても便利です。 ちなみに、モンゴロイドのトップページでも使用しています！ Viewportの単位と意味の解説 Viewportの単位として、vh/vw/vmin/vmaxの4つがあります。 vh：Viewportの高さの1/100。 vw：Viewportの幅の1/100 vmin：Viewportの幅と高さの小さい方の1/100。 vmax：Viewportの幅と高さの大きい方の1/100。 この4つの単位から、今回は使い勝手の良いvh/vwを紹介します。 vh/vwの使い所 フルスクリーン 最近よく目にするファーストビューのフルスクリーンがありますが、 以前までは、jQue
CSSで縦位置中央に配置する方法 - Qiita
-webkit-box-align: center; /* safari, Chrome対応 */ -moz-box-align: center; /* Firefox対応 */ -o-box-align: center; /* Opera対応 */ -ms-box-align: center; /* IE対応 */ box-align: center; /* ベンダープレフィックス無しも併記する */ が使える。 liタグの中にaタグがある場合（←本題） これには手間取った。 liタグ：ブロック属性 aタグ：インライン属性 であり、どうやらブロック属性の中にインライン属性があるときそのままだと縦位置中央揃えができないらしい。 結論、以下のような操作をすることで縦位置中央にすることができた。 まず、li要素（ブロック属性）をボックス属性に変換 li { display: -webkit-b
知らなきゃ損！CSSのmaskとSVGを駆使して画像を自在に切り抜く方法
CSSで画像をマスクしたり切り抜いたりする方法にはborder-radius、clip、clip-pathなどがありますが、maskプロパティとSVGのmask要素を使った方法なら、もっと自由な形にマスクができます。 ※本記事は2016年6月17日に掲載した記事を再編集したものです。執筆時点の情報をベースにしており、最新ではない可能性があります。 マスクは、画像または要素の不要な部分を隠し、見せたい部分のみを表示するテクニックです。Webデベロッパーは、CSSのmaskプロパティとSVGのmask要素を使うことで、画像編集ソフトを使わずにブラウザー上でマスクをかけられます。 この記事では、ブラウザーのサポート問題も含め、CSSとSVGを実際に試してみましょう。 記事を執筆している時点では、ほとんどのサンプルコードはWebKit系ブラウザーでのみ動きます。ただし、SVGベースのマスクは、より
CSS Gridの実装で必要な基礎知識、主要なプロパティと用語をくわしく解説
CSS Gridでは、多くの新しいコンセプトが導入されています。新しいプロパティは17個、新しい用語も数多くあります。これらは今まで使ってきたものとは大きく異なるため、CSS Gridを始めるのを難しく感じさせるかもしれません。 CSS Gridの実装に役立つ基礎知識、コンセプト、主要なプロパティと用語をくわしく解説します。 CSS Grid Layout Terminology, Explained 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 CSS Gridの仕様 「グリッドコンテナ」と「グリッドアイテム」とは 「グリッドライン」とは 「グリッドカラム」「グリッドロウ」「グリッドトラック」とは 「グリッドセル」とは 「グリッドエリア」とは 「グリッド」とは CSS Gridの仕様 CSS Gridの仕様では、グリッドは次
CSS Grid Layout について - Qiita
先日の macOS と iOS のアップデートに CSS Grid Layout Module が実装された Safari のバージョンが入り、とうとう全てのモダンブラウザで使用可能となりました。非常に柔軟に、直感的にグリッドを表現することができます。 Can I Use Grid の定義 ある要素をグリッドレイアウトしたいとき、その親要素に display: grid もしくは display: inline-grid を指定します。この親要素のことをグリッドコンテナ、グリッドレイアウトされる子要素のことをグリッドアイテムと言います。 グリッドコンテナには grid-template-column と grid-template-row というプロパティを指定することができます。それぞれ、列と行のグリッドのサイズをその数だけ指定します。 例: 3行5列のグリッド .container {
CSSグリッドレイアウトで、サイズが違う複数のボックスをタイル状に配置する
2021年12月28日 CSS 大きさの異なる複数のボックスを隙間なく並べてタイル状に表示したい！そんな時もありますよね。モザイクレイアウト、Masonryレイアウト、Windows 8 Metroスタイルレイアウト…などなど、さまざまな呼び方のあるこのレイアウト。今回は display: grid という新しい配置方法を使ってレイアウトを組んでみますよ！もちろんレスポンシブにも対応させたいと思います！ ↑私が10年以上利用している会計ソフト！ CSSグリッドの基本の書き方は動画で確認！ 基本的な記述方法は動画でも紹介しています。初めてCSSグリッドに挑戦するよという方はまずはこちらで基礎を覚えておきましょう！ 1. どんなレイアウトにするか書き出す グリッドレイアウトは少し複雑で、何も考えず組んでいくとどこの要素がどうなっているのか…こんがらがってきちゃいます。ご利用は計画的に！慣れるま
✨安い！！お得！！激安CSS！！✨ - Qiita
<span class='price'> <span class='price1'>19</span><span class='price2'>,800</span> <span class='yen'>円</span> </span> @import url(https://fonts.googleapis.com/css?family=Poppins:700); .price { color: #c70506; text-shadow: 2px 0 0 #fff, 0 2px 0 #fff, -2px 0 0 #fff, 0 -2px 0 #fff, 5px 4px 3px rgba(0,0,0,0.5); font-weight: bold; font-family: Poppins; letter-spacing: -3px; } .price1 { font-size: 78px
Androidしか出来なくて辛いのでHTMLの初歩からWebフロントエンド技術に入門し直した - みんからきりまで
最近ずっとJavaScriptをやってた。 JavaScriptをやってる理由は色々ある。 僕は仕事ではずっとJavaとAndroidで、他の言語やプラットフォームは入門的な事は色々やって来たが、ちゃんと出来ると言えるものが他にないので単純にもっといろんな事が出来るようになりたい。 JavaScriptが出来ればWebでちょっとしたサイトやサービスを作ったりしやすくなるし、ElectronやReactNativeなどWebの技術を他の分野で使用する流れがあるので色々と便利そうだ。 はてブやQiitaでよく読むフロントエンド関連の記事をもっと楽しめるようになりたいというのもある。 あと、Androidの世界でも日々いろいろな思想や技術が入ってきていて、そういうものに触れた時にAndroidだけやっていてはもっと広い視点で技術の動向を追っている人にはキャッチアップの速度でも理解度でも敵わないな
【CSS】margin paddingの違いと使い方を紹介
こんにちは、WEBマーケティング部の杉尾です。 今回は、CSSを学ぶ上で、そして使いこなすのに必要なmarginとpaddingを紹介したいと思います。 WEBデザインをしていて目にしない日はないというくらい使う頻度の高いプロパティです。 どっちがどっち？ margin・・・・・要素の外側の余白 padding・・・・・要素の内側の余白 慣れれば、そんなこともなくなるんですが、初めの頃ってmarginとpaddingのどっちがどっちかわからなくなりますよね。 僕は初心者の頃、padding（パディング）を服に入れる『パッド』と同じ語源だと理解して覚えました。 中に入れるものだから、『要素の中の余白』だということですね。 その逆だから、marginは『要素の外側の余白』。 これでスッキリ覚えられると思います。（多分） 参考画像内を少し解説します。 Contentと書いている部分は、たとえばd
そろそろ真面目に、HTMLで帳票を描く話をしようか - Qiita
帳票といえばPDFとして生成するのが一般的でしょうか? でも、2015年の今、あえてHTMLで描くのがホットです(個人的に)。ミリ単位で設定された高度な帳票も、CSSを駆使して簡単に作ることができます。業務システムでもモダンブラウザを選択することが増え、@pageなども積極的に使えるようになったこと、SPA(Single Page Application)の台頭、いろいろと条件が揃ってきました。 書いてたら結構長くなっちゃったので、さくっとコードだけ見たい方は、Paper CSSリポジトリをどうぞ。 はじめに HTML帳票のメリット 2015年現在、HTML帳票を選択する幾つかのメリットがあります。 ライブリロードで、リアルタイムなスタイル調整 バックエンドではなくフロントエンドで生成できる 前者は、gulpやGruntの普及で、CSSにしろHTMLにしろ、リアルタイムにプレビューできる環
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSの便利なセレクタ · GitHub