CSS

「CSS」に関する情報が集まっています

人気の投稿

新着の投稿

記事を大幅アップデートしました。 Webページに含まれる操作が可能なすべての要素を取得する方法の模索 - qrunch.net はじめに JavaScriptで画面に表示されているクリッカブルな要素を列挙してみました。 Hit-a-Hintができる拡張機能がどうやって動いているのか気になったので。Vimiumを参考にしまし...

2019-02-09

記事を大幅アップデートしました。 Webページに含まれる操作が可能なすべての要素を取得する方法の模索 - qrunch.net はじめに JavaScriptで画面上のクリッカブルな要素を列挙してみたという記事を書きました。が、もっと良さげな方法を思い付いてしまいました。 何をもってクリック可能であるかを判別するか 上記...

2019-02-14

追記(2019-04-08)最適化しました。詳しくは一番下をご覧ください はじめに Webの役割というものが日に日に増している昨今、いかがお過ごしでしょうか。私は、正しく綺麗なHTMLを書こうとするも途中で我に返り途方に暮れお蔵入りになるという残念な日々を過ごしています。最近のWebページは、HTMLのみならずJavaScriptも盛ん...

2019-04-07

はじめに User Style SheetでのWebページのカスタマイズの秘伝のタレをご紹介。モダンなテイストに仕上げてみました。 いらないものを消し去りたい 素直にdisplay: none;しています。ただ、ものによってはdisplay: block !important;とかなっていて殺意がわきます悩まされます。 場合によってはh...

2018-12-26

CSSだけで作るアラートメッセージデザインが完成したので公開します。 実際の表示 See the Pen Alert Message Design with SCSS by tanaka (@tanakashi) on CodePen. ソースコード fontawasomeをimpo...

2019-03-30

sass(scss)を使用しないFLOCSS設計 CSS設計でFLOCSSを採用する場合はsass(scss)を利用すると思いますが、それらを利用しない場合のディレクトリ構成を考えてみました。 公式のレイヤー構成 まず公式のレイヤー構成は下記のようになっています。 Foundation - リセット、ベースデザインのレイヤー。 ...

2019-03-18

はじめに 最近のアニメの公式ホームページって、すごいおしゃれですよね。なんかもう『技術の粋』って感じです。 そんなアニメの公式ホームページをありがたく拝見し学ばせていただこうというのがこの記事の趣旨です。 なお語彙力不足により説明がわかりにくいので、各自公式ホームページを開きながら読んでください。また、JavaScriptのコードを一つ一...

2019-03-15

追記(2019/01/01 あけましておめでとうございます) Qrunch開発チームから、今回のアップデートについての解説記事が公開されました。qrunch.net/@useridというページがあるんですね。こちらが『ユーザーページ』でした。というわけで、記事タイトル変更などの修正と加筆を行いました。この記事では、userid.qrunch....

2018-12-30

はじめに 「あーこの部分のHTMLがうまく記述されてないなー」 「いいサービスなんだけどデザインがなぁ」 そんなときはユーザースタイルシートやユーザースクリプト!でもそんなに楽ではないのです。 ユーザースタイルシート Stylusなどの拡張機能では、Webページに自らのCSSを適用させることが可能です。が、そんなに楽ではないの...

2019-03-05

はじめに Vue.jsのtransitionには、-moveクラスというのがある。これを使って、要素の並べ替えをアニメーションさせることが可能になっている。例えば、Sudokuのサンプルなど。 このスムーズに入れ替わるアニメーションは、FLIPと呼ばれるテクニックを使用している。 参考公式ドキュメントVue.jsで使われているFLIPアニ...

2019-03-04

はじめに Qrunch、気に入っています。まだβ版で人も少ないですが、アウトプットが気軽にできるのは楽しいです(最近は忙しくしていてサボり気味でしたが)。 この記事では「〇〇だったらいいな」というQrunchへの願望を実現すべく、ユーザースタイルシートなどでカスタマイズを行います。 Qrunchのユーザーブログのカスタマイズについてはこち...

2019-03-04

Qrunch の投稿プレビュー画面でコードを等幅表示する TL;DR Chrome ユーザー対象 Firefox も Stylus あるので多分いける Stylus をインストール Qrunch において <code> タグの内容を等幅フォントを用いて表示する を Stylus で qrunch.io 向けに...

2019-03-01
このエントリーをはてなブックマークに追加