[B! CSS] kenjiro_nのブックマーク

上下中央揃えのCSSまとめ。Gridだと2行、Flexboxだと3行で実現可能 - ICS MEDIA

CSSでブロック要素を上下中央揃え（天地左右の中央に配置）する方法はいくつかありますが、CSS Gridを使う方法が現在では一番手軽です。CSS Gridレイアウトを使うと、たった2行で上下中央揃えができます。 ▼ CSS .container { display: grid; place-it ems: center; } デモを別ウインドウで再生するソースコードを確認する Flexboxだと3行対して、Flexboxでも上下中央は実現できます。Flexboxの場合、中央揃えしたい要素の親に対してたった3行記述するだけです。すべてのモダンブラウザでベンダープレフィックスなしで動作します。 ▼ CSS .container { display: flex; justify-content: center; align-it ems: center; } ▼ 画像をウインドウの上下中央に配置

kenjiro_n 2022/08/27

リンク

色々書き比べた結果Tailwind CSSにしたという話 - Qiita

Twitterでこういう発言を見かけまして Tailwind CSSはデザインに凝ってるサイトでは使えないこだわりが無い場合に向いているは？何いってんの？って思ったので、自分がいろいろ試した結果、Tailwind CSSを選んだ話を書きます。はじめに以前、Tailwind CSSは結構いいぞって話を書いたんですが、この記事の立ち位置的にはその続きみたいなものなので、以下の記事を始めにご参照いただけるとより分かりやすいかもしれないです。この記事では、前回記事を書いた後、個人仕事でWebサイトをGatsbyで作り、その中で、どうやってCSSを書くのが良いのか模索した結果、自分はこれを選んだっていうのを、同じUIを色々な方法で書き比べたコードを並べつつ、どうのこうの筆者の考えを述べていきます。その仕事はほとんど筆者が「まかせてくださいよーいい感じに作りますよー。デザインそろってない

kenjiro_n 2021/06/10

リンク

枠の上に文字を乗せるやり方 - Qiita

<div class="area"> <div class="area__label">ラベル</div> <div class="area__content">コンテンツ</div> </div> .area { position: relative; width: 300px; height: 100px; border: solid 1px #f00; border-radius: 5px; background-color: #fee; &__label { position: absolute; top: 0; left: 20px; font-weight: 600; padding: 0 10px; // paddingを左右にいれて消す線の長さを延ばす transf orm: translateY(-50%); &::before { position: absolute;

kenjiro_n 2021/03/30

リンク

Web制作者必見！ VS Codeのおすすめ機能拡張のまとめ、HTMLやCSSやJavaScriptのコードを書く時に便利

Visual Studio Code（以下、VS Code）が素晴らしいエディタである理由の一つは、デベロッパーの生産性を向上させるVS Codeの機能拡張の巨大なライブラリがあることです。その中から、HTMLやCSSやJavaScriptのコードを書く時に便利なVS Codeの機能拡張を紹介します。 My 12 Favorite VSCode Extensions by Katherine Peterson 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 VS Codeとは VS Codeの機能拡張 VS Codeのおすすめ機能拡張 VS Codeとは VS Code(Visual Studio Code)は、Microsoftが提供する統合ツールを備えた強力で軽量なコードエディタです。MITライセンスで、商用でも完全に無料

kenjiro_n 2021/03/04

リンク

input=textタグの幅を自動で最大に設定

kenjiro_n 2020/08/18

リンク

スクロールで動的にWebサイトのナビゲーションバー・Android版Chromeのアドレスバーの色を変更する!! - Qiita

スクロールで動的にWebサイトのナビゲーションバー・Android版Chromeのアドレスバーの色を変更する!!HTML CSS JavaScript AndroidjQuery 背景 Webサイトをデザインするときに、スクロールしたときにナビゲーションバーの色を変えたくなったので実装してみました。実装には、jQueryを使用しました。ついでに、Android版Chromeのアドレスバーの色(theme-colorを使って変更)もスクロールで変えられるようにしています。今回の実装にあまり関係ないですが、CSSフレームワークには cirrus を使っています。デモ Android端末 pic.twitter.com/pu1zHpcaDx — jong (@fashioncrazy66) 2018年9月29日 PC pic.twitter.com/boDoeo0FqY — jong (@fa

kenjiro_n 2020/07/29

リンク

若い世代が知らない2000年代のHTMLコーディングの地獄 - ICS MEDIA

ウェブの黎明期である2000年頃と比べてはるかにHTMLはコーディングしやすくなりました。10〜20年前のHTMLコーディングはどのようなものだったのでしょうか。この記事では、NetscapeとIEのブラウザ戦争に決着がついた後の、IE6が全盛期となった2000年代のウェブサイト制作を振り返ります。懐かさに浸たり、現代のウェブの成り立ちに通じる温故知新な情報として参照ください。テーブルレイアウト / spacer.gif XHTML・CSSが普及するまではテーブルレイアウトが一般的でした。テーブルレイアウトとはtableタグを使い、格子状にレイアウトしていく手法です。テーブルレイアウトは、デザインファイル（Image ReadyやFireworks）から画像を切り出す「スライス機能」と相性のいい方法でした。 <table border="0" cellspacing="0" cellp

kenjiro_n 2020/06/11

その若い世代にそういうものだと思わせてしまっている年長者としてすまない思いをさせているという現状を噛み締めつつ読みました。

リンク

君は真に理解しているか？z-indexとスタッキングコンテキストの関係 - ICS MEDIA

CSSで要素の重なりを表現する時はスタッキングコンテキストによって決められています。スタッキングコンテキスト（Stacking Context）はウェブページ上の仮想的な奥・手前方向の概念であり、「重ね合わせコンテキスト」、あるいは「スタック文脈」とも言います。 z-indexによる重なり位置の指定もこのスタッキングコンテキストのうちの一つです。今回はz-indexより広い概念のスタッキングコンテキストの深淵を覗いてみます。 z-index:5がz-index:53万に勝つ方法重なりといえば、z-indexです。z-indexはWeb初心者キラーなプロパティで、その値が必ずしも重なりの順序になりません。例えば次のようなz-indexが53万と5の要素があったとします。この場合、53万の要素が上にきます。 <div class="wrapper wrapper-freeza"> <div

kenjiro_n 2020/06/11

リンク

あなたはPCスマホ使いですね？上の文字はスマホかPCかによって変わります ..

あなたはPCスマホ使いですね？上の文字はスマホかPCかによって変わります ※PCの人はウィンドウの横幅を縮めてみると文字が変わるぞ！確かめてみよう！

kenjiro_n 2020/03/10

リンク

2019年総まとめ: Pocketにたくさん登録されたWeb制作に役立つ記事のまとめ

2019年、当サイトで公開した記事の中からPocketにたくさん登録された記事やツイートされた記事をジャンル別にまとめました。今年を振り返りつつ、来年のWeb制作にも役立つオススメです。

kenjiro_n 2020/01/07

リンク

font-familyについて本気で考えてみた - Qiita

今年はmacOSのアップデートによりヒラギノが動かなくなったり、来年初頭にはWindows7がサポート終了、Edgeのブラウザエンジン変更など、エンドユーザーの環境を考えなければならない節目の時です。そこでいつもコピペで済ましているfont-familyについて1から考え直してみます。全部読もうとしている人はスクロールバーを見てから考えてください。結果コピペユーザーのために先に結果を記載します。ブログ等に転載する場合はこのページのURLぐらい貼ってください。 @font-face { font-family: "Original Yu Gothic"; src: local("Yu Gothic Medium"); font-weight: 100; } @font-face { font-family: "Original Yu Gothic"; src: local("Y

kenjiro_n 2020/01/07

font
css

リンク

表示するブラウザごとに違う見え方をする「コードで描かれた絵」とは？

「Pure.CSS」はYahoo!が開発したCSSフレームワークであり、ファイルが軽量なことやレスポンシブデザインが可能なことで人気です。そんなPure.CSSを使って描かれた「絵画」は、表示するブラウザごとに異なった見え方をすると話題になっています。 This Amazing Image Made of Code Looks Different Based on Your Browser - VICE https://www.vice.com/en_us/article/a359vz/purecss-amazing-image-made-of-code-looks-different-based-on-your-browser デジタルアーティストのダイアナ・スミス氏は、バロック絵画に触発された作品を描くことで知られています。そんなスミス氏の大きな特徴として挙げられているのが、絵画を描く

kenjiro_n 2019/11/07

browser
css

リンク

ダイエー

A

kenjiro_n 2019/10/24

熊本大江のイオンにはダイエーの怨念がおんねん、という写真がtwitterでバズってたので俺も撮ったのでした。 https://f.hatena.ne.jp/kenjiro_n/20181231162126 以前の主語がでかい id:entry:230987109 を思うとそんなにでかくない。

リンク

Amino: Live CSS Editor

Customize any website in seconds with CSS. Amino is a compact and powerful browser extension that allows you to customize any website with CSS that persists. Use the editor to create your own website themes and skins.

kenjiro_n 2019/09/24

Chrome
css

リンク

ウェブページに簡単にカスタムCSSを適用できる拡張機能「Amino」

CSSはウェブページにおいてレイアウトやスタイルを決めるための言語ですが、「Amino」はそのCSSを簡単に書き加えることができ、サイトを自由にカスタマイズできるというChromeの拡張機能です。 Amino: Live CSS Editor for Chrome https://aminoeditor.com/ Amino: Live CSS Editor - Chrome ウェブストア https://chrome.google.com/webstore/detail/amino-live-css-editor/pbcpfbcibpcbfbmddogfhcijfpboeaaf Chromeウェブストアのページを開き、右の「Chromeに追加」ボタンをクリックします。アクセスするウェブサイトへの権限を求められます。確認して「拡張機能を追加」をクリック。これでインストールは完了です。 C

kenjiro_n 2019/09/24

Chrome
css

リンク

Chrome系のブラウザなら、Custom.cssでプレビューを消せる :: Firefox Fan Club + More Browsers

Chrome系のブラウザ（ChromePlusや、SRWare Iron等）なら、Custom.cssにユーザースタイルシートを記述してやれば、Google検索のインスタントプレビューを消せる。（Windows 7/Vista) C:\Users\<ユーザー名>\AppData（隠しフォルダ）\Local\Google\Chrome\User Data\Default\User StyleSheets\Custom.css （Windows XP) C:\Documents and Settings\<ユーザー名>\Local Settings（隠しフォルダ）\Application Data\Google\Chrome\User Data\Default\User StyleSheets\Custom.css

kenjiro_n 2019/09/23

LinuxのChromiumだとどこになるんだろうか。

Chrome
css

リンク

[CSSアニメーション]●●●CSSでタピオカ作ってふわふわ浮かせる●●● - Qiita

この記事について CSSアニメーションを使って複数要素をばらばらにふわふわさせる方法を覚えたので記事を書こうと思ったけど、特にふわふわさせたいものもなかったのでタピオカを作って浮かせてみたぞい。タピオカはそんなに好きじゃないけど丸くてかわいいよな・・・(´・ω・`) See the Pen pozEpao by Mayu Mameuda (@mayu-mameuda) on CodePen. カップとかストローとかもCSSで作ってみた。せっかくなのでカップとかのところも解説するぞ。 (アニメーションのやり方だけ知りたい人は「ついにタピオカ」まで飛んでくれ〜〜〜) 全国のタピオカ好きのみんなに見てほしい・・・・カップのCSS カップを構成している要素は大きく全部で5つ。・カップ・カップの蓋・カップの中身・ストロー・タピオカこんな感じにパーツを分けて作ったよ。パーツごとに作