タグ

cssに関するTomosugiのブックマーク (56)

  • 「Yu Gothic UI」フォントの鍵括弧、繋げるとブラウザ表示で重なる問題を調べてみた - 俵のメモ帳

    Yu Gothic UItext-spacing-trim を適用するとバグる を読んでいて、気になってしまったので、実際にYu Gothic UIのファイルの中身を開いて調べてみました。 発生している問題 回避策 原因 Yu Gothic UI 特有の問題? まとめ 発生している問題 Yu Gothic UIは、Windows 10からプリインストールされているUI表示用フォントです。 手元の環境で確認したところ、Windows 11 23H2 (ビルド 22631.4317) 時点では、「Yu Gothic UI Version 1.93」がインストールされていました。 このフォントChrome系ブラウザで利用すると、鍵括弧表示が崩れる場合があります。具体的には、 「abc」「abc」 のように、閉じ括弧・開き括弧が隣接するケースです。 」「 の部分ですね。この際に、閉じ括弧と開

    「Yu Gothic UI」フォントの鍵括弧、繋げるとブラウザ表示で重なる問題を調べてみた - 俵のメモ帳
  • 「モダンCSS」でCSSの書き方はどう変わる? - itstaffing エンジニアスタイル

    進化したCSSは「モダンCSS」と呼ばれています。Webサイトのデザイン変更には欠かせない言語ですが、Webブラウザの進化とともに、書き方も少しずつ変化しています。今回はモダンCSSの特徴をコードとともに解説。知らなかった便利な書き方があるかも? Webブラウザの変化とCSSの複雑化 パソコンやスマートフォンで使われているWebブラウザにはさまざまな製品があります。WindowsではMicrosoft Edgeが、macOSやiOS、iPadOSではSafariが、AndroidではGoogle Chromeが標準でインストールされていますが、他にもMozilla FirefoxやOpera、などがあり、個人が使いやすいと感じるWebブラウザを導入している人もいるでしょう。 それぞれのWebブラウザによって使用できるHTMLのタグや属性、CSSに指定できる内容が異なっており、同じHTML

    「モダンCSS」でCSSの書き方はどう変わる? - itstaffing エンジニアスタイル
  • 舞い散る桜の花びらアニメーション【HTML/CSS】

    こんにちわ!最近花粉の気配を感じ始めましたね・・・。 なんだかんだでもう3月に入りましたが、もう少しで桜の季節です! ということで、HTMLCSSで桜の花びらが舞い散るアニメーションを作ってみました。 用意するもの ●桜の花びら画像(png) 桜の花びら画像を7枚( 7パターン)用意しました。 出来上がりがこちら See the Pen GRNYVxq by adatype (@adatype) on CodePen. 出来上がったものがこちらになります。 コードの内容については下記をご覧ください。 まず#sakura_blockの中に花びら画像たちをまとめる.sakura_parts_boxを作って、 中に先ほど用意した花びら画像たちを入れて、それぞれクラスを付けます。 用意した画像は7枚ですが、画面幅いっぱいに桜を降らようと配置したら中の画像が19枚になりました。枚数は降らせたい場所

    舞い散る桜の花びらアニメーション【HTML/CSS】
  • 【初心者向け】CSSの擬似要素と擬似クラスを理解しよう! | ビジネスとIT活用に役立つ情報(株式会社アーティス)

    前回の記事【初心者向け】CSSセレクタとは?セレクタの種類や指定方法を解説!(基礎編)ではCSSセレクタの基的な知識と指定方法をご紹介しました。 今回は、よりコーディングの幅が広がる「擬似要素」と「擬似クラス」に関して解説していきます。 擬似要素とは ~擬似要素の適用例~ 擬似要素とは、要素の一部に対してスタイルを適用できる指定方法です。 HTMLの要素を擬似的にCSSで設定するので、コーディングに手を加えることなく装飾を適用することができます。 例として、下図のように見出しの先頭一文字のみ文字の色を変える装飾を実装してみましょう。 擬似要素を使わない場合 擬似要素を使わずにこれを表現すると、HTMLCSSの記述は下記のようになります。 見出し要素のh2の一文字目のみをspanタグで囲い、スタイルを適用しています。 この方法でも装飾は可能ですが、テキストをspanタグで無理やり区切って

    【初心者向け】CSSの擬似要素と擬似クラスを理解しよう! | ビジネスとIT活用に役立つ情報(株式会社アーティス)
    Tomosugi
    Tomosugi 2020/07/10
  • Loading...

    Loading...
    Tomosugi
    Tomosugi 2018/06/04
  • コラム:class名とid名はどうやってつければいい?

    CSSを定義する際に便利なのがclassとid。毎回固有のclass名やid名を考えるのは最初は戸惑うものです。 「何かわかりやすい命名規則はないか…」 「自分でつけているこの名前って問題ないのか…」 「毎回名前を考えるのが時間がかかる…」 といった問題は意外と大きいものです。 何が正解というのはないですがある程度自分の中でルール化しておくと修正や更新をする際にラクだし、他の人が読む時もわかりやすくて時間のロスになります。

    コラム:class名とid名はどうやってつければいい?
  • もう、class名やid名で悩まないんだからっ!!|CSS HappyLife

    class名やid名って付ける時悩みませんか? 今でもボクは結構悩むんですが、そんな悩みを解決する為に、人さまのソース覗きまくってよくあるclass名とid名を拾ってきました。 これで、チョットだけ作業効率アップ!? 2010年6月10日追記: この記事自体、2007年 1月15日に書かれてるんでかなり古いです。 あくまでも参考程度に留めてもらうのが良いかと思います。 今だったら、html5の要素を参考にしたりして付けるのが、今後の事を考えると良いのかなーと思います。 また、善し悪しの判断はせずに公開しているものですが、位置に関するのは仕様変更に弱くなるのでオススメはしません。 全体に使えそうな感じ wrap wrapper top-wrapper wrapperAll frame mframe all-frame container page pagetop all allContent

    もう、class名やid名で悩まないんだからっ!!|CSS HappyLife
  • ID名、クラス名に関して|Tips・コラム|CSS HappyLife ZERO

    ID名やクラス名は、扱える文字さえ守れば任意の文字で付ける事ができます。 いくら任意だからといって、あまりにも適当なID、クラス名を付けてしまうと後々CSSを確認した時に何が何だか分からなくなってしまう可能性もあります。 そのため、どの様なID、クラス名を付けるかは悩める部分でもありますが、特別な理由が無い限り見た目や位置に関するID、クラス名は付けないようにする事が望ましいです。 見た目や位置に関するID、クラス名とは、#left、.rightBox、.red、.font16pxなどが考えられます。 ではなぜ、見た目や位置に関するID、クラス名は付けない方が良いかというのは、そもそも(X)HTMLは文章の構造を表すものでうんたらかんたらといった理由も有りますが、これらのID、クラス名はサイトの仕様が変更された場合に矛盾が生じてしまいます。 例えば、.redと付けたのは良いが、後から太字に

  • CSS「Flexbox」の使い方。グリッドレイアウトを自在に操ろう! | WWWクリエイターズ

    CSSのFlexboxプロパティを使ってグリッドレイアウト(格子)を作成します。 Flexboxに関するプロパティは、なんだかたくさんあって、複雑でよくわからない、もう覚えられない!やっぱまだ Float にしておこう・・、の状態が長く続いているので、まとめました。 Flexboxとは? Flexboxとは、「グリッドレイアウト」と呼ばれる、格子状のレイアウトをより直感的に実現するために導入されました。CSS3で新規追加された比較的新しいプロパティです。 CSSではよくあることですが、ブラウザ(Chrome, Firefox, Microsoft Edge, … )などで、プロパティのサポート状況がまちまちなので、なかなか開発者の間に利用が広まりませんでしたが、近年、ブラウザのバージョンアップが進み、エンドユーザ環境におけるサポート率が高まってきたため、利用しやすくなってきました。特に、問

    Tomosugi
    Tomosugi 2018/04/18
  • 脱Bootstrapガイド 〜フルスクラッチCSS〜 - Qiita

    2021/02/12 追記 この記事を執筆した当時、Bootstrapがどのサイトでも使われていました。 当時のBootstrapはjQueryと密結合していたり、いろいろと剥がす動機があったのですが、 現在のBootstrapは内部的にもflexboxになっていたりと改良されています。 まずは剥がす前に最新版への更新を検討してみてください。 一方で、TailwindやインラインスタイルCSSなど、Bootstrapを採用しづらい場面も増えてきています。 その場合にはやや記述は古いのですが記事が役に立つ場面もあるでしょう。 ポイントは、腹をくくってFlexboxのプロパティについて真剣に学ぶことです。 追記終わり Bootstrapは便利ですし、デフォルトのスタイルもフラットでかっこいいですね。 デザイナーでなくてもそれなりに整った画面が作れるということで、大変便利なBootstrap

    脱Bootstrapガイド 〜フルスクラッチCSS〜 - Qiita
  • bootswatchのインストール手順 - Qiita

    からの bundle install Important:You may need to add a javascript runtime to your Gemfile in order for bootstrap's LESS files to compile to CSS. と、表示されたら gem install execjsとコンソールに打ち込む 2. boostwatchのインストール 下のコマンドを打っていく。 1つめのコマンド:[theme_name]の箇所は適用させたいbootswatchのテーマ 2つめのコマンドは、viewsのlayoutsに[theme_name].html.erbと生成される。 注1※これは、layoutフォルダに生成される、[theme_name].html.erbを、application.html.erbに代わり使用するためで、そのまま既存の

    bootswatchのインストール手順 - Qiita
  • #

    Introducing Typogram Hello friend, I am wentin, creator of CSS ICON. I have been building Typogram — a logo design tool, and it is now launched!

  • CSSにおけるコンポーネント設計 - Qiita

    前提 cssを書いていくうえで、昨今コンポーネントの重要性が言われているので、コンポーネントについてまとめてみました。 コンポーネントとは コンポーネントについてまとめるうえで、深掘りすると非常に深く難しい概念なので、ここではcssを書いていく上で最低限知っておくべき範囲でコンポーネントについてまとめます。 関心の分離 コンポーネントには、前提として「関心の分離」という概念があります。例えば、railsにおいてMVCがあるように、htmlではマークアップ構造、cssではスタイリング構造など、特定の役割・機能・振る舞いなどを厳密にわけることを指します。 カプセル化 そして、分離という機能を実現するうえで、「カプセル化」の概念も重要となってきます。カプセル化とは、外部からの影響を許可したもののみに限定し、また内部の変更等による影響を外部に与えないものとでもいっておきましょう。これをcssで当て

    CSSにおけるコンポーネント設計 - Qiita
  • 良いCSSとは - Qiita

    CSSはスタイルシート言語です。 プログラミング言語のように記述的(imperative)ではなく、宣言的(declarativ)な言語です。 では良いCSSとはどのようなものでしょうか
? それはプログラミング言語で良いコード、クリーンコードと言われるものと同じではないかと思います。 クリーンコードは、単純で直接的です。 クリーンコードは、うまく書かれた散文のようにも読めます。 -グラディ・ブーチ CSSはセレクタの命名とその記述方法によってのみ制御されるものです。 その制御はクリーンコードのように「うまく書かれた散文」を目指すべきです。 CSSの原則と設計 CSSHTMLの見た目を制御する宣言が書かれた文書です。 そしてその設計にはHTMLも含まれるべきです。 CSSの仕組みは単純です。 要素を選択し、定義されたスタイル宣言を適応して見た目を変える。 原則も1つしかありません。CSS

    良いCSSとは - Qiita
  • 「出会えたことに感謝したいCSSベスト3」まとめ

    スダ氏 @sudarexyz 出会えたことに感謝したいCSSベスト3 1位 display: flex; 2位 box-sizing: border-box; 3位 height: 100vh; 2018-04-07 21:44:27 スダ氏 @sudarexyz justify-content: space-between; align-items: center; この辺も入れたかったけど全部FlexBox関係になっちゃうし、ランキングは今着手している案件に強く依存してる。 他の人のも見てみたい。 #出会えたことに感謝したいCSSベスト3 2018-04-07 22:02:07

    「出会えたことに感謝したいCSSベスト3」まとめ
  • 極めろ!!Google Chrome Devtools 52の関節技 - Qiita

    Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 転職ナビのフロントエンドを担当しています、@sueshinです。 Livesense - 関 Advent Calendar 2017、22件目をお送りします。 どうぞ宜しくお願いします。 はじめに フロントエンドでよく注目されるJavaScriptではなく、 地味で渋いまるで関節技のような、Google Chrome Devtoolsを使った技術をtipsの形式でまとめました。 免責事項 ショートカットなどは全てMacのキーボード操作にしています。Windowsユーザーは適宜読みかえてください。 Chromeのバージョンは63系に基づ

    極めろ!!Google Chrome Devtools 52の関節技 - Qiita
  • Webpark 

    今年になって仕事でPowePointを使う機会が増えまして、今までまったく使ったことがないので、どのようにすれば見栄えがよくなるのか色々と調べてみました。 久々の投稿なのにブログの筋から外れた内容になりますが、調べるなかで役に立ったものと、個人的な感じることを書いてみます。

    Webpark 
  • おじさんが若者たちにモテるためのモダンなHTML/CSSマークアップ

    タイトルに含まれる語に関する補足 おじさん: 筆者の便宜上、30歳前後のフロントエンドエンジニア、マークアップエンジニア等を指す。性別は問わない。 なぜ「モテ」なければいけないのか 「モテる」とは、最先端の流行を知り取捨選択することで、自由意志を謳歌することで実現する。 PHPとjQueryの時代は廃れ始め、AngularReactに代表されるUIフレームワーク、ES2015やTypeScriptを流暢に扱えることがフロントエンドの責務となり、HTMLCSSも、EJSやPug・SassやPostCSSなどのトランスパイル言語を介すことがほぼ常識になってきた(と思う)。 ところが、HTMLCSSを何の言語で書くか以前に、中身をどうするべきかはあまり議論されていないので、「モテる」ための方法をいくつかかいつまんでまとめてみた。 セマンティックなコーディングは、開発者の課題理解度を図り、意

    おじさんが若者たちにモテるためのモダンなHTML/CSSマークアップ
    Tomosugi
    Tomosugi 2017/06/14
    まずは自分で書いた文章を読み直すことを強くすすめる。例えば、「なぜ「モテ」なければいけないのか」の小見出しのあとの段落に対応する文章が見当たらない、など。
  • フロントエンドエンジニアなら押さえておきたい!最近登場した注目のJavaScript&CSSライブラリ8選

    Webデザイナーやフロントエンドエンジニアにとって、日々登場するフレームワークやライブラリをキャッチアップすることはとても大切です。 なぜなら、そうしたフレームワークやライブラリによって業務が効率化すれば、他の作業に時間を割くことができるからです。 しかし、フレームワークやライブラリが続々と登場するあまり、キャッチアップに追いついていないひともいるのではないでしょうか。 今回は、最近登場した注目のJavaScriptCSSのライブラリを紹介していきます。 中には簡単なコードを挿入するだけで驚くほどの機能を実装できるものもあるので、ぜひ確認してみてください。 最近登場した注目のJavaScriptCSSフレームワーク 1. AOS https://michalsnik.github.io/aos/ AOS(Animate on Scroll)は、スクロールしながら要素をアニメーションでふ

    フロントエンドエンジニアなら押さえておきたい!最近登場した注目のJavaScript&CSSライブラリ8選
  • CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選

    今回は見出し(h1〜h6タグ)のオシャレなデザインサンプルを68つ紹介します。CSSコードをコピペすればそのまま使うことができます。もちろん自分好みにカスタマイズして使って頂いても構いません。

    CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選
    Tomosugi
    Tomosugi 2017/03/08