タグ

cssに関するSnO2WMaNのブックマーク (3)

  • CSSでメディアクエリ(Media Queries)の基本的な書き方、記述の意味を理解し、「何となく使う」を卒業する。 | WEMO

    CSSでメディアクエリ(Media Queries)の基的な書き方、記述の意味を理解し、「何となく使う」を卒業する。 2019 8/15 今回は、レスポンシブで絶対にお世話になるCSSの メディアクエリ(Media Queries)について。基的な書き方や記述の意味についてまとめていきます。 なんとなく @medeia screen and ... とか書いているけど、 screenってどういう意味?とか、そんなレベルの話です。メディアタイプ・メディア特性・区切り方やそのキーワードの意味など...。 先日、 @media only screen...という書き方を目にした時に onlyの意味がわからず、それだけを調べるつもりが、結構知らないことがあってびっくりしました。 今までがいかに「何となく」だったかを痛感し、せめて基的なことくらい分かっておこうと思った次第です。 はじめに 今回

    CSSでメディアクエリ(Media Queries)の基本的な書き方、記述の意味を理解し、「何となく使う」を卒業する。 | WEMO
    SnO2WMaN
    SnO2WMaN 2019/06/09
    @media (width < 768px){}が出来るの、人類の希望っぽい
  • <css-doodle />

    There's an alternative way to set up the grid by using the @grid property. <css-doodle> :doodle { @grid: 5 / 8em; } background: #60569e; transform: scale(@rand(.2, .9)); </css-doodle> :doodle { @grid: 5; @size: 8em; } background: #60569e; transform: scale(@r(.2, .9)); use Import rules from CSS custom properties (CSS variables). <css-doodle use="var(--rule)"></css-doodle> It's highly recommended to

    SnO2WMaN
    SnO2WMaN 2019/05/05
     楽しそう
  • HTMLでコピペできそうでできない要素を作る - mizchi's blog

    歌詞サイト内で湘南乃風の睡蓮花の歌詞がだんだん大きくなっていた「作詞XSSとか楽しすぎるものをみたけど…」 - Togetter うたまっぷといえばコピペ禁止、コピペ禁止といえば最近こういう嫌がらせを考えていたので、やってみました。 UOHYO--TNPC-XC-AEITYSOTNT ↑をマウスで選択してコピペしてみてください。うまく範囲選択できないし、できたとしても無意味な文字列になります 仕組み テキストをランダムに並び替える ランダムに並び替えた文字を, 元の位置に来るように flex の order 属性を指定 フレックスアイテムの並べ替え - CSS: カスケーディングスタイルシート | MDN コード React でさっくり書いた function Text() { const text = "YOU-CANNOT-COPY-THIS-TEXT"; const chars =

    HTMLでコピペできそうでできない要素を作る - mizchi's blog
    SnO2WMaN
    SnO2WMaN 2019/03/10
    flexのorderでこういう事するの、最悪っぽくていい
  • 1