タグ

cssに関するrooshのブックマーク (32)

  • あなたが教わってるそのCSSテクニックはもう古い – TAKLOG

    Xの初学者のポストにて古の手法を教わっている方をよく見かけるので、2024年現在そのCSSテクニックはもう古いってものをいくつか列挙しました。 ブロックのセンタリングに margin を使うなら margin-inline:auto を使いなさいmarginを使ってブロックのセンタリングを行う際によく教わるのはmargin:0 autoあるいはmargin:autoでしょう。

    あなたが教わってるそのCSSテクニックはもう古い – TAKLOG
  • TABLEでCSSのtext-overflow:ellipsisを効かせたい場合

    通常は折り返されるような長い文字列を途中でカットして三点リーダーを付けてくれるtext-overflow:ellipsisって便利ですよね。 今回、そのellipsisをTABLEタグの中で使おうと思ってハマったので備忘録として解決策を残しておきます。 まずは簡単なPタグの事例から。 Pタグでtext-overflow:ellipsisを指定 通常のPタグでの表示例 こうして普通は折り返されるような長い文章をwhite-space:nowrap;指定した場合、端っこが切り取られるだけだが、text-overflow:ellipsis;を使うと三点リーダーを自動的に入れてくれるのが便利である。 普通はこうして文章が折り返されます。 overflow:hidden;を指定した例 こうして普通は折り返されるような長い文章をwhite-space:nowrap;指定した場合、端っこが切り取られるだ

    TABLEでCSSのtext-overflow:ellipsisを効かせたい場合
    roosh
    roosh 2021/05/14
    ty!
  • JSXのclassNameに複数のクラスを指定する

    <p className={'string' + ' ' + `${style.news}`}>テキスト</p> // or <p className={'string' + ' ' + (style.news)}>テキスト</p> 間に半角スペースを入れて結合するのがポイントっぽい。 にしてもなんかスマートじゃない気がするのは私だけだろか・・・笑 参考 [フロントエンド] React.jsのclassNameに、複数のクラスを簡単に指定する(Classnames利用) 完全に独り言 ググり方が悪いのかなかなか出てこなくて、JSXに慣れてないのでちょっと苦戦w あんまりマルチクラス的なことをReactではやらないのかな? Atomic Componentsでやる場合はそもそも必要ないからか? コンテナ的なコンポーネントとかでやったりしない? みたいな疑問がいっぱい。

    JSXのclassNameに複数のクラスを指定する
    roosh
    roosh 2021/05/03
    ty!
  • Web制作の常識が変わる、便利な最新オンラインツール48個まとめ

    この記事では、Webデザインやグラフィックデザインの制作スピードを短縮し、生産性をアップする、便利な最新オンラインツールをまとめてご紹介します。 「もっと早く知りたかった」と思わせる、面倒な作業をサクサクこなす時短ツールが勢揃いです。カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 コンテンツ目次 1. Web制作便利ツール 2. デザインコレクション 3. イラスト系ライブラリ 4. 配色ツール 5. プロトタイプツール 6. コラボ、リモートワークツール 7. 面白、クリエイティブツール Web制作の常識が変わる、便利な最新オンラインツールまとめ Web制作便利ツール The Hero Generator ウェブサイトの魅力的なヒーローイメージを作成できるオンラインツール。グラデーションオーバーレイやボタンスタイル、見出しタイトルの余白など細かい部分も手

    Web制作の常識が変わる、便利な最新オンラインツール48個まとめ
  • ReactとVueってどう違う?全く同じアプリをReactとVueで作成してみて分かった相違点

    日常的にVueを使用している開発者が、Reactはどうなのだろうと思い、ReactVueで全く同じアプリを作成した時のそれぞれの工程を比較して分かった相違点を紹介します。 I created the exact same app in React and Vue. Here are the differences. 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 隣の家の芝生は青く見える VueReactで作成したアプリの見た目を比較 VueReactはデータをどのように変更させるか アイテムの新規作成 アイテムの削除 イベントリスナーを渡す 子コンポーネントにデータを渡す 親コンポーネントにデータを戻す 終わりに 隣の家の芝生は青く見える 私は現在の職場でVueを使用しており、Vueがどのように機能するかかなり理解してい

    ReactとVueってどう違う?全く同じアプリをReactとVueで作成してみて分かった相違点
  • Responsive web design tool, CMS, and hosting platform | Webflow

    Webflow Conf online, SF, and LDN agendas are live now.

    Responsive web design tool, CMS, and hosting platform | Webflow
  • Modular Scale

    Bases are a scale’s root numbers. For example, the size at which your body text typeface looks best. More → Ratios are multiplied by the base to produce a scale of numbers that is proportionally related. If you know what size you want a heading to be, type the target value @ position on the scale like 36@5 More → How do I use this? Use a scale like you would use a ruler. Many people set heading ty

    Modular Scale
    roosh
    roosh 2018/06/16
    好きなフォントサイズから黄金比のフォントサイズ一覧を生成してくれるサイト
  • Grid 日本語版

    なぜ、レスポンシブに労力を費やすのか? 私達は全てのデバイスにおいて、スクリーンのサイズや縦横の方向といったユーザーの環境に左右されずに、ウェブサイトが利用しやすくなることを目指しています。 断片化された世界 2013年現在、数千種類のデバイスとスクリーンサイズがインターネットにアクセスしています。それら全てに対して、それぞれレイアウトを設計するのはもはや不可能です。そんなことより、デザインにより流動的なアプローチを取り入れるべきでしょう。 モバイルファースト 最近になって「モバイルファースト」という言葉がそこらじゅうで聞かれるようになりました。その言葉は、モバイル向けのスタイルから始めて、必要とされる時に大きなスクリーンに最適化したスタイルを適用するということを意味します。言い換えると、作成したモバイル向けのスタイルがデフォルトになり、それ以降に書き換える必要はないということです。それは

    Grid 日本語版
    roosh
    roosh 2018/04/14
    cssとレスポンシブの基礎
  • dev.toに匹敵する速度を出せるWordPressテーマを開発した話 - Qiita

    日、無料WordPressテーマ Godios. をリリースしました。 公式サイトを見ていただけるとわかると思うのですがページが一瞬で遷移しています。 どうでしょう、dev.toと同じくらい速いんじゃないでしょうか。 この記事ではテーマを高速化するにあたって用いたテクニックを書いていきたいと思います。 圧縮 テーマに含まれている画像・CSS・JSファイルの圧縮。 画像はOptimizilla・TinyPNG、CSSCSS Minifier、JSはJSCompressを使用しました。 CSS・JSファイルの遅延読み込み レンダリングをブロックするファイルが大量にあると表示が遅くなりますので、JSファイルはdeferまたはasync属性を付与し、CSSファイルはインライン、またはJSで非同期に読み込んでいます。 無駄なSQLクエリを減らす データベースへのアクセスが多いと負荷が掛かる上、速

    dev.toに匹敵する速度を出せるWordPressテーマを開発した話 - Qiita
    roosh
    roosh 2018/04/08
    クッソ速くて笑うwwww
  • W3Schools Online Web Tutorials

    W3Schools offers a wide range of services and products for beginners and professionals, helping millions of people everyday to learn and master new skills. Free Tutorials Enjoy our free tutorials like millions of other internet users since 1999

    W3Schools Online Web Tutorials
  • 意外と今っぽくなる、CSSやjQueryで実現するエフェクトまとめ

    作成:2016/02/8 更新:2016/06/29 Web制作 > CSSやjQueryで実現する、今までにないようなエフェクトを実現するために知っておくと便利なエフェクトをまとめました。トレンドをおさえた最近のものを厳選してピックアップ。ファーストビューなどで、一味違った面白さを出したいときに。 エンジニア速報は Twitter の@commteで配信しています。 セグメンテッド コントロール pocketなどに見られる「リスト・タイルビュー」など表示形式の切り替え。コンテンツを切り替えるセグメンテッド コントロール(SegmentedControl)。少し古い記事ですが、他になさそうだったので。 Blueprint: View Mode Switch もうひとつはcodepenから。 See the Pen DropDown2Segment by ActiveCodex (@Acti

    意外と今っぽくなる、CSSやjQueryで実現するエフェクトまとめ
  • !importantはもう使わない!CSSの優先順位をおさらいしよう

    先日の台風で梅雨が明けた気分になっていましたが、全然そんなことなかったです。 こんにちは、フロントエンドエンジニアのあつこです。 HTMLCSSでお仕事をするようになって暫く経つのですが 未だにスタイル効かない、何故だ。。。→優先度が低かった!ってことがたまに起こります。 Sass等メタ言語を使ってると、コンパイル後の形を想像しにくくなるのですね(´・ω:;.:... 今日はそんな「CSSにおけるスタイルの適応の優先順位」についてまとめてみました。 もくじ 0.デモの準備 1.基の優先順位 2.タイプセレクタとclassセレクタ 3.親要素と一緒に指定する 4.idセレクタとclassセレクタ 5.つまりどうゆうこと? 6.最終奥義!important宣言 おまけ.IEのセレクタの限界のはなし 「ある程度なら知ってるよ!」って方は5.つまりどうゆうこと?から読んでもらえれば大丈夫かと思

    !importantはもう使わない!CSSの優先順位をおさらいしよう
  • dfltweb1.onamae.com – このドメインはお名前.comで取得されています。

    このドメインは お名前.com から取得されました。 お名前.com は GMOインターネットグループ(株) が運営する国内シェアNo.1のドメイン登録サービスです。 ※表示価格は、全て税込です。 ※サービス品質維持のため、一時的に対象となる料金へ一定割合の「サービス維持調整費」を加算させていただきます。 ※1 「国内シェア」は、ICANN(インターネットのドメイン名などの資源を管理する非営利団体)の公表数値をもとに集計。gTLDが集計の対象。 日のドメイン登録業者(レジストラ)(「ICANNがレジストラとして認定した企業」一覧(InterNIC提供)内に「Japan」の記載があるもの)を対象。 レジストラ「GMO Internet Group, Inc. d/b/a Onamae.com」のシェア値を集計。 2023年5月時点の調査。

    dfltweb1.onamae.com – このドメインはお名前.comで取得されています。
  • 2/3 CSSのborder-radiusで角丸に表示する方法 [ホームページ作成] All About

    発展編:四隅の角丸サイズを個別に指定する書き方 次に、特定の角だけに限定して丸くしたり、角によって丸くする半径を変えたりする書き方をご紹介いたします。この方法を使えば、ボックスの上側だけ(=左上の角と右上の角だけ)を丸くすることで、タブのように見せる装飾も簡単に作れます。 【四隅の角丸を個別に指定する書き方:このページの目次】 四隅の角を個別に丸くするborder-radius関連プロパティ4つの書き方 ボックスの上だけ(右上の角と左上の角)を丸くしてタブを作る方法 ボックスの対角だけを丸くするデザインを作る方法 1. 四隅の角を個別に丸くするborder-radius関連プロパティ4つの書き方 四隅(左上・右上・左下・右下)の角丸半径を個別に指定するプロパティとして、以下に記した4つのプロパティがあります。 border-top-left-radius: 10px; /* 左上 */ b

    2/3 CSSのborder-radiusで角丸に表示する方法 [ホームページ作成] All About
  • hr要素のデザインサンプル 12 - NxWorld

    hr要素は罫線を表示させるもので、話題を変えるときの目印となる区切り線などとして用いられます。 どのブラウザでも完璧に同じ見栄えをとなると背景画像とかがやはり手っ取り早いし無難なんですが、やろうと思えばCSSだけでも結構いろいろとできるので、備忘録兼ねてhr要素をスタイリングしたものをまとめてみました。 ここで紹介しているものは、ブラウザによっては(特にCSS3を用いているもの)ちゃんと表示されません。 また、多用する人も多いと思う破線や点線もブラウザによっては多少見栄えが違ったりするので、使用する際はあらかじめ注意が必要になります。 はじめに ここで紹介しているものは、すべてHTMLは<hr />のみです。 また、それぞれのhr要素にはデフォルトスタイルとしてあらかじめ下記のようなスタイルを指定してあります。

    hr要素のデザインサンプル 12 - NxWorld
  • 改行削除するくらいなら gzip したらいいじゃない

    CSSJavaScript ファイルなどを gzip 圧縮して転送量の削減や Web サイト表示速度の向上を実現する方法を解説。既存 Web サイトのソースには一切手を加えない方法でまとめています。おまけでキャッシュ関連の記述もあり。 いや、1バイトの無駄もゆるせねぇんだよとか、難読化したいとかなら別にやればいいんですけど、CSSJavaScript ファイルの改行やスペースを削除しただけでファイル容量圧縮、読み込み速ーい的なこという人がいるので今さらですが書いてみます。すでに色々なところで書かれてるのでかぶるのは承知の上で。 改行や無駄なスペースなどを削除すること自体が悪いと言ってるわけではありませんのでその辺は誤解ないようにお願いします。ただ、gzip 使って圧縮するのに比べたら、改行削除して削れるファイルサイズなんて微々たるものです。もちろん、両方やれば最大限ファイルサイ

    改行削除するくらいなら gzip したらいいじゃない
  • ほんとにフリー?というクオリティのXHTML/CSSテンプレート20:phpspot開発日誌

    20 Beautiful Free XHTML/CSS Templates | Creativeoverflow ほんとにフリー?というクオリティのXHTML/CSSテンプレート20が、websitetemplatesonline.com から紹介されています。 Photoshopテンプレートではなく、既にHTMLの形になっているので便利です。 Photoshopのファイルは含まれないようなので、この点は注意したほうがいいかもしれません。 全部見る 関連エントリ シンプルだけど使いやすそうなフリーのXHTML/CSSテンプレート集「Mantis-a templates」 ハイクオリティでフリーなXHTMLテンプレート61 クールなデザイン満載のXHTML/CSSテンプレート40種 プロレベルでハイクオリティなXHTML/CSSテンプレート集

  • 【公式】ハイローオーストラリア|新機能:ジャックポット・キャッシュバックプログラム¦HighLow.com

    ジャックポットについて特別なキャッシュバック取引約定後に、幸運なプレイヤーは最大100,000円のキャッシュバックが当たります。また、Highlowロイヤルティ・ステータスが高いほど当選確率・金額が上昇します。

  • 黄金比にも対応したグリッドレイアウト用のシンプルなCSSのフレームワーク -The Square Grid

    2, 3, 4, 6, 9, 12, 18の均等分割をはじめ、黄金比の分割にも対応したグリッドレイアウト用のCSSのフレームワークを紹介します。 The Square Grid [ad#ad-2] The Square Gridのグリッド設計 グリッドの全幅は994pxで、両端に余白7pxをとり、残りの980pxを均等に35分割したものをベースにしています。 均等分割のカラム

  • ブログアフィリエイトで稼ぐのに役立った「最強ツール」27選【保存版】

    検索キーワードを調べるツールまとめ キーワードを調べる決定版「Google キーワード プランナー」 Googleが運営するキーワードツールで、おおよその月間検索数や競合性が高いかどうかを調べることができます。 キーワードリストをダウンロードしておいて、そこから作る記事を考えるのが効率的。 一定の広告料を使わないと細かな数値は分かりませんが、Googleのデータを元に記事タイトルを決められるので、使ってない人は絶対使っておきましょう。 Googleキーワードプランナー キーワードの組み合わせが分かる「ラッコキーワード」 キーワードの組み合わせを探せるアドバイスツール。 Googleのキーワードプランナーほど細かなデータは分かりませんが、シンプルで使いやすいツールです。 ラッコキーワード 検索順位を調べるツールまとめ 業者も使う順位チェックツール「GRC」 他のツールだと毎回キーワードを入力

    ブログアフィリエイトで稼ぐのに役立った「最強ツール」27選【保存版】