固定のヘッダーがアンカー先コンテンツを隠してしまう問題
Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.
Rapidly build modern websites without ever leaving your HTML.A utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup. <figure class="md:flex bg-slate-100 rounded-xl p-8 md:p-0 dark:bg-slate-800"> <img class="w-24 h-24 md:w-48 md:h-auto md:rounded-none rounded-full mx-auto" src="/sarah-dayan.jpg"
CSS書きたくなさすぎ問題2017 - DRYな備忘録
superman00 – Just another WordPress site
Fashion is what you buyStyle is what you do with it Shop Now Showing 1–10 of 39 results 2 Pack Bed Pillows for Sleeping Down Alternative Sleeping Pillows for Side Back Sleepers with Super Soft Plush Fiber Filled Hotel Collection Adjustable Fit and Zipper Removable Pillow $22.00 Add to cart 2-Pack – Queen Size (20×30 inches) Pillow Cases – Satin Pillow Covers with Envelope Closure $22.00 Add to car
フレックスボックスの基本概念 - CSS: カスケーディングスタイルシート | MDN
CSS チュートリアル CSS の基本 CSS の第一歩 CSS の第一歩の概要 CSS とは何か CSS 入門 CSS の全体像 CSS の働き 評価課題: 経歴ページのスタイル設定 CSS の構成要素 CSS の構成要素の概要 CSS セレクター Type, class, and ID selectors Attribute selectors Pseudo-classes and pseudo-elements Combinators カスケードと継承 Cascade layers ボックスモデル 背景と境界 書字方向の操作 内容のはみ出し CSS の値と単位 CSS における大きさの指定 画像、メディア、フォームの要素 表のスタイル付け CSS のデバッグ CSS の整理 評価課題: CSS の基本的な理解度 評価課題: 素敵なレターヘッドの便箋の作成 評価課題: かっこいいボック
CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 | コリス
意外と盲点だったCSS3の役立つ小技まとめ - コムテブログ
TL;DR リニューアルを行った時に、CSS3 で気づいたことや次回もまた使いそうなものなどを備忘録として書いておきます。基本的なものから見慣れないものまで。 CSS3 オートフィルの背景色を解除 chrome にて、テキストボックスのオートコンプリートした際、背景色が黄色になります。これを消したかったので を追記。色指定の箇所に任意の色を指定できますが、とりあえず白色で。 無事消えました。 Coderwall | Change background color for autocompleted inputs in Google Chromeでinputがオートフィルされてると背景色が黄色になるのを回避 – CSS | ごろつきめも backface-visibility で Chrome のチラつきを解決 fadeIn などのアニメーションを取り入れると Chrome でヘッダーやサイ
Hamburgers
Table of Contents Usage Sass Customization Accessibility Browser Support Usage Using Hamburgers for your site is easy (well, that was my intention anyway). Download and include the CSS in the <head> of your site: <link href="dist/hamburgers.css" rel="stylesheet"> Add the base hamburger markup: <button class="hamburger" type="button"> <span class="hamburger-box"> <span class="hamburger-inner"></spa
CSSで実装するグローデザインのボタン - NxWorld
少し発光しているような感じに見えるグロー（グローイング）デザインを適用したボタンのサンプルです。 このデザイン自体は以前からあったと思うのですが、最近DribbbleやBehanceといったデザインのインスピレーションサイトだったり、綺麗なUIデザインを紹介しているようなサイトでよく見かける感じがして、配置や組み合わせももちろん関係はあると思いますが、見た目が綺麗なものやかっこ良いと思うものが多かったので、幾つか再現してみたり思い付いたりしたものを作ってみました。 いずれも面倒な記述などなく簡易的なものばかりですが、もしこのまま使用したいという場合はコピペで実装できると思います。 共通のHTML・CSS 以下で紹介しているボタンスタイルは、全て下記のようなHTMLとベースとなるCSSが指定してあります。 .button { display: block; padding: 1em 3.2e
CSS4 :matches の使い方とブラウザ対応状況 | q-Az
【複数行にも対応】長過ぎる文字列を省略して末尾を三点リーダー（…）にする方法いろいろ | PSYENCE:MEDIA
ランディングページといったコンテンツもレイアウトも全て決め打ちで成立するようなものはさておき、多くの Web サイトおよびアプリケーションは、いかなる分量のコンテンツであろうと柔軟に受け入れて表示出来るように設計・デザインされなくてはなりません。 しかし、全ての文字列を表示するには長過ぎてレイアウトが崩れてしまうといった場合には、何らかの方法で文字列を省略する必要があります。一昔であれば Ruby や PHP、Java などサーバーサイドで文字列を切り捨てるなどの加工をしてからフロントエンドに返すという方法が常套手段として用いられていました。しかし、これでは昨今のワンソースによるレスポンシブデザインといったスクリーンサイズに応じて動的に表示領域が変わるようなデザインに対応しきる事が出来ません。PCサイズの表示領域に適した文字数を返したとしてもモバイルサイズの表示領域がそれと同じとは限りませ
WebKit CSS JIT Internals - Constellation Scorpius
Recently, I’ve been contributing to WebKit CSS Selector JIT compiler. There’s a nice overview about it written by Benjamin Poulain, he leads the CSS JIT project. Yesterday, I gave a presentation about WebKit CSS Selector Compiler. In this slide, I show the details of CSS JIT, mainly focusing on backtracking and code generation. I hope you like it! P.S. I've heard that CSS JIT is shipped in iOS 8 b
Inline SVG vs Icon Fonts [CAGEMATCH] | CSS-Tricks
UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today. If you’re building an icon system for a site, you have some options. If you know the icons need to be raster images, then you’ll likely be using CSS sprites. If the icons will be vector images (much more common these days), you have some options. Two of those options are usi
![Inline SVG vs Icon Fonts [CAGEMATCH] | CSS-Tricks](https://cdn-ak-scissors.b.st-hatena.com/image/square/d3413d27979db9730c62af2cea80b93bff45d129/height=288;version=1;width=512/https%3A%2F%2Fcss-tricks.com%2Fwp-json%2Fsocial-image-generator%2Fv1%2Fimage%2F168417)
WTF, HTML and CSS?
Reasons HTML and CSS might make you say what the fuck. A curated list of commonly frustrating HTML and CSS quandaries, miscues, and dilemmas. Created by @mdo. Contents Declare a doctype Box model math Rem units and Mobile Safari Floats first Floats and clearing Floats and computed height Floated are block level Vertical margins often collapse Styling table rows Firefox and <input> buttons Firefox
より良いWebを作るためのガイド
初学者の方を対象により良いWebを作るためのガイドとしてHTMLやCSSなどのWebサイトを作成するための情報を公開しています。 ここに掲載している情報は、作者自身が勉強してきたことを初学者の方たちにとってわかりやすくお伝えできるようにまとめた内容ですので、作者の知識に偏りがちであり、その内容の有用性、安全性等については、いかなる保証を行うものでもありません。 正確性には万全を期すよう努力してはおりますが、当サイトの利用者が掲載情報に基づいて下した判断および起こした行動により、いかなる結果が発生した場合においても、作者はその責を負いませんのであらかじめご了承ください。掲載情報が生きた情報なのかどうかは、各ページに記されている更新日時などのステータス情報や記述内容から各自で判断してください。常にクリティカル・シンキング（論理的・構造的に考えているかを批判する）のもとに情報を参照されることをお
:visitedと一緒にbackground-imageとかは使えないようになってるよ。プライバシー保護が理由。（CSS おれおれ Advent Calendar 2012 – 15日目） | Ginpen.com
ズルいデザインテクニック2013 + セミフラット version
[大阪] プログラマー向けデザイン勉強会で発表させていただきました。 http://connpass.com/event/3086/ --- [あわせて読みたい] KSSで作るパターンライブラリ by @machida https://speakerdeck.com/machida/kssdezuo-rupatanraiburari 【アイコンを200こ描いた振り返り！】アイコンから知るデザインのヒントby @awayuki http://www.slideshare.net/awayukin/awayuki-pmd01-share ビジュアルデザインまでのデザインワーク by @yokotak0527 http://www.slideshare.net/YokotaKenji/ss-26460108
少ない手間と知識でそれなりに見せる、ズルいデザインテクニック// Speaker Deck
少ない手間と知識でそれなりに見せる、ズルいデザインテクニック with Sass / Compass (English Version) https://speakerdeck.com/ken_c_lo/zurui-design-technique-english-version 第一回 プログラマ向けデザイン勉強会 #design4p http://connpass.com/event/1185/ で発表させていただきました。 （#p4d プログラマ向けデザイン部 主催イベント http://prog4designer.github.io/） @mah_lab さんが ズルいデザインのRails gemを作って下さいました http://blog.mah-lab.com/2012/11/07/zurui-design-for-rails/ (Repository) https://git
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
イマドキのコーダー環境構築2016
una.im | Introducing CSSgram: A CSS Library for Instagram Filters
