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

なんで PC 画面がワイド化してんのに、ブコメ表示部がこんなに幅狭いんだよ..

なんで PC 画面がワイド化してんのに、ブコメ表示部がこんなに幅狭いんだよ……。というわけで、お気に入りページのサイドバーとサムネイル消して表示幅を広げるユーザースタイルシート。 .wrapper-container-inner { width: 90%; } #center-container { width: 100%; } #left-container, #right-container, .entry-image-block { display: none; } .wrapper-container-inner.left-column-line { background-image: none; } .entry-title, .entry-block blockquote, .entry-data, .user-comment-meta, .starContainer { di

spodophyllum 2017/07/04

リンク

Web制作者は使わないと損！Chrome 59でアップデートされたデベロッパーツールの便利な新機能

5日にリリースされたChrome 59で、ブラウザと共にアップデートされたデベロッパーツールの新機能を紹介します。 What's New In DevTools (Chrome 59) Chrome 59 - What's New in DevTools -YouTube ページの軽量化: 未使用のCSSとJavaScriptを見つけるフルサイズのスクリーンショットをキャプチャリソースのロードをブロック非同期コードの検証コマンドメニューの統一ページの軽量化: 未使用のCSSとJavaScriptを見つける新機能の一つ目は「Coverage tab」。ページで使用されていないCSSとJavaScriptを見つけることができます。 command + shift + P で、「Show Coverage」を入力して選択。 ※「cov」まで入力すれば、上位に表示されます。 Show

spodophyllum 2017/07/03

リンク

CSSリセットはこれで決まり！モダンブラウザによる相違を吸収するようカスタマイズされたスタイルシート -ress

ブラウザごとに異なるHTMLの各要素のスタイルの相違を吸収し、各要素のデフォルトのスタイルが定義されたCSSリセット用のスタイルシートを紹介します。 normalize.cssを最近のWeb制作にあうようカスタマイズされたもので、対応ブラウザはすべてのモダンブラウザ、IEは8+対応です。 ress -GitHub 参考: normalize.cssの特徴とコード 2015年、Web制作者が押さえておきたいCSSの各種リセット ressの特徴 ress: html, グローバルセレクタの定義 ress: 一般的な要素の定義 ress: フォーム要素の定義 ress: メディア要素の定義 ress: アクセシビリティ用の定義 ress: ::selectionの定義 ressの特徴 ressは「normalize.css」をカスタマイズしたもので、スタイルシートを始める時のしっかりしたベースな

spodophyllum 2016/07/05

リンク

まだ中央寄せで消耗してるの？ - @yoshiko_pg

spodophyllum 2015/12/16

リンク

[CSS]スニペットに登録しておくべし！繊細で美しいグラデーションをコピペで利用できる -GRADIENTS

aqua .bg-aqua-gradient { background: rgba(127,219,255,1); background: -webkit-linear-gradient(top, rgba(127,219,255,1) 0%, rgba(82,140,163,1) 100%); background: linear-gradient(to bottom, rgba(127,219,255,1) 0%, rgba(82,140,163,1) 100%); } blue .bg-blue-gradient { background: rgba(0,116,217,1); background: -webkit-linear-gradient(top, rgba(0,116,217,1) 0%, rgba(0,65,122,1) 100%); background: linea

spodophyllum 2015/09/30

リンク

素早く制作できた！Web制作に役立つトレンドのツール一覧

作成：2014/12/22 Web制作 > 2014年、WPテーマやコーポレートサイト作成時にお世話になったツールと2015年に使いたいツール。素早くコーディングを行うために知っておきたいツールをメモ。エンジニア速報は Twitter の@commteで配信しています。もくじ CSS ツール１．CSS スニペット２．CSSアニメーションサンプル３．背景を様々な形に切り抜くジェネレーター４．SCSS/CSSに変換するツール５．CSS フレームワークとチートシート６．CSS3 アイコン７．CSS / JS / HTML コード整形８．レスポンシブモックアップ作成９．ブラウザ対応表 SVG / ロングシャドー / ポリゴン作成１０．SVG ブラウザサポート状況確認表１１．SVG ローディングアニメ作成１２．SVG 背景作成ジェネレーター１３．SVG パターン背景

spodophyllum 2015/06/25

リンク

かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技

2015年3月18日 CSS 2011年に「少しのコードで実装可能な20のjQuery小技集」という記事で数々の便利な制作技を紹介したのですが、時は流れ、今ではCSSのみで表現できるものが多くなってきました。という事で今回はその記事内で紹介した技を中心に、かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる小技を紹介します。 ↑私が10年以上利用している会計ソフト！目次 Div全体をクリックできるようにするテーブルの偶数・奇数の行の色を変えるフォームにテキストを入れておき、フォーカスで消す（文字色も変更）ラジオボタンとチェックボックスを装飾するスライドパネルアコーディオンツールチップ言語によってスタイルを変更横並びのdivの高さ揃えるボックスを上下左右中央に配置するそれでは実際にどんな事ができるのか見てみましょう！サンプルも作ったのでコードと

spodophyllum 2015/03/18

リンク

もうCSS設計で悩まない！「CSSコーディングガイドライン」策定のための参考記事・スライド 7選 / SQUEEZE - Web Design Studio -

構造やクラス名、プロパティの記述方法などをルール付ける「CSSコーディングガイドライン」策定のための参考記事を紹介します。チームでの共有、コーディング効率やメンテナンス性などの改善のためにも、これを機会にガイドラインを導入してみてはいかがでしょうか。コーディング規約を作ろう"制作チームの規模が大きくなればなるほど、コードの統一性は大切" ▶ コーディング規約を作ろう Webクリエイターボックスコーディング規約を見直すうえで抑えておくべきポイントを紹介。チェックポイントコーディング規約に含むべき項目・ディレクトリやファイルの階層・名前・記述順やインデント、単位などのフォーマット・ID,classなどの命名規則・対応ブラウザー CSSガイドラインを翻訳してみた"多くの開発者が関わる場合、メンテナンス可能、コード見通し良く、拡張可能にするために統一された方法を用いることが重要"