[B! css] griefworkerのブックマーク

縦横スクロールつきのテーブルを Web で使いたい - かずきのBlog@hatena

むか～～しむかし、Flash や Silverlight みたいなブラウザープラグイン系のリッチクライアントアプリケーションのプラットフォームと HTML 5 が覇権を争ってた時代がありました。私はブラウザープラグイン寄りの人で「DataGrid コントロールがあるだけでプラグイン系のほう使うわ」って思ってました。やりたかったことは表形式でデータを表示したい表を縦横スクロールしたいスクロールしても固定列や固定行はスクロールしないで欲しい JavaScript で頑張ることで当時でもできてましたが、結構しんどかったら重めだったりと何かと問題がおきがちだった気がするので例えば <DataGrid It emsSource="{Binding People}"> <DataGrid.Columns> <DataGrid TextColumn Header="ID" Binding="{Bin

griefworker 2019/07/22

リンク

一休.comスマホサイトのパフォーマンス改善（CSS・その他細かいチューニング編） - 一休.com Developers Blog

こんにちは。一休.comの開発基盤を担当しています、akasakasです。今回は、一休.comスマートフォンホテルページリニューアルをリリースし、パフォーマンスが改善したお話をさせて頂きます。概要編とJavaScriptパフォーマンス改善編はこちらになります。 user-first.ikyu.co.jp user-first.ikyu.co.jp この記事ではスマートフォンホテルページリニューアルで実施したCSS・その他細かいチューニングについてお話しします。ここでお話しする内容 CSS再設計＆チューニング編リニューアル前のスマートフォンホテルページのCSSの現状整理と抱えていた課題リニューアルをするにあたり、CSS再設計 CSS Modules FLOCSS パフォーマンスインライン展開非同期読み込みドキュメント整備その他細かいチューニング編 resource hin

griefworker 2018/09/25

リンク

Re:VIEW+CSS組版の執筆環境を簡単に構築できるようにしました - 圧倒亭グランパのブログ

【追記（2019/02/10 9:53）】現在開いているこの記事は技術書典５に向けての記事です。技術書典６に向けての最新記事は以下をご参照ください。使いやすくなったり、Re:VIEWなどのバージョンが更新されています。 at-grandpa.hatena blog.jp 【追記おわり】 Re:VIEW+CSS組版の環境は、わかめさんの vvakame/review-css-typesetting で整いつつあります。今回は、個人的に欲しい機能を追加した、という話です。いい感じに回っているのでブログにまとめることにしました。目次目次 Re:VIEWとは CSS組版とは Re:VIEW+CSS組版環境構築使い方やってることデザインの変更 CSSを編集する htmlを編集する完成したPDFは印刷所で印刷可能か（確認完了）まとめ Re:VIEWとは Re:VIEW形式で書かれた

griefworker 2018/08/22

ebook
css

リンク

Photon

The fastest way to build beautiful Electron apps using simple HTML and CSS Powered by Electron Underneath it all is Electron. Originally built for GitHub's Atom text editor, Electron is the easiest way to build cross-platform desktop applications. If you can write a bit of HTML, CSS, and JS, you can build full featured applications. Companies like Microsoft, Facebook, and Slack are using it – why

griefworker 2018/02/01

リンク

Twemoji Awesome | Like Font Awesome, but for Twitter Emoji.

Notes The emoji styles are defined in twemoji-awesome.css. Like Font Awesome which uses fa-*, Twemoji Awesome uses twa-* for class names. Twemoji Awesome uses Emoji Cheat Sheet for the class names. You must replace underscores with hyphens, as shown in the :hatching_chick: example. Like Font Awesome, you can change emoji sizes via twa-lg, twa-2x, twa-3x, twa-4x and twa-5x. Twemoji Awesome uses SVG

griefworker 2017/09/09

emoji
css

リンク

TypeScript + React JSX + CSS Modules で実現するタイプセーフなWeb開発 - Qiita

はじめに以前、React JSX with TypeScript(1.6)にて書いたことがありますが、TypeScript 1.6以降ではReact JSXを直接コンパイルできるオプションが追加されています。一般的にクライアントサイドWebアプリ開発は以下の3言語が土台ですが、 JavaScript HTML CSS TypeScriptのお陰で、1.と2.についてはタイプセーフな世界を手に入れたことになります(HTMLの要素名や属性名まで含めて、コンパイル時のチェックがされる) JavaScript -> TypeScript HTML -> React JSX(.tsx) CSS -> ??? こうなると、3. におけるCSSについても、何とかできんものかと期待するのが人情です。今回のエントリは、CSS ModulesをTypeScript JSX環境に統合することで、タイプセー

griefworker 2016/08/22

CSSの.d.tsファイルを作成して、TypeScriptでスタイルもタイプセーフに扱っている。

リンク

GitHub - slider23/bootstrap-theme-github: Github theme for Twitter Bootstrap

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

griefworker 2016/01/03

リンク

CSSによる組版作業とその効率化 - Qiita

こんにちは、freee でエンジニアをしています @tohashi です。これは世紀末のボストンでモヒカン達と戯れたい欲求に抗いながら書かれた、 freee Engineers Advent Calendar 2015 の21日目の記事です。今日は freee のプロダクトに欠かせない「CSS組版」と呼ばれる作業と、それを効率化するためのツール CSS-Typesetter についてご紹介します。 CSS組版とは「バックオフィス最適化」を掲げる freee では会計 freee、給与計算 freee、会社設立 freee、マイナンバー管理 freeeといったプロダクトを展開しています。その中で欠かせないのが、各種申告や手続きのための書類をブラウザ上で確認したり、PDF形式で出力する機能です。例を挙げると、確定申告書扶養控除申告書登記事項証明書交付申請書といったものがあります。

griefworker 2015/12/25

css
design

リンク

Documentation - Materialize

flash_on Speeds up development We did most of the heavy lifting for you to provide a default stylings that incorporate our custom components. Additionally, we refined animations and transitions to provide a smoother experience for developers. group User Experience Focused By utilizing elements and principles of Material Design, we were able to create a framework that incorporates components and an

griefworker 2015/11/27

リンク

CSS フレームワークとの付き合い方 - ペパボテックブログ

フロントエンド周りの技術は驚異的なスピードで進化し、また多様化しています。それらを全てマスターするのは途方もなく大変なので、ペパボでは、社内のエンジニア・デザイナが「最低限これだけはおさえておこう」というスタンダードを文書化することにいたしました。社内向けを想定した文書ではありますが、社内のみに留めず多くの方に役立てたいと考えたため公開します。この項目の担当 @horaotoko 1. はじめに 2. CSS フレームワークの分類 (1) "レイヤー" で考えてみよう (2) 2つのグループに分類しよう 3. CSS フレームワークの使い分け - フルスタックと単機能 (1) 使い分けの基本方針 (2) フレームワークの種類ごとの用途 1. はじめにこのページでは、身の回りにある多種多様な CSS フレームワークと、私たちはどうやって付き合っていけば幸せになれるのかということについて述

griefworker 2015/10/15

リンク

Bootstrapで最近人気の高いレイアウトやコンポーネントを簡単に実装できるテンプレートのまとめ

上部固定のScrollspy対応ナビゲーション、アニメーションがかっこいいオフキャンバスメニュー、ブラウザの高さいっぱい・半分に画像を配置、複数のコンテンツを配置するレスポンシブ対応のコンポーネントなど、最近よく見かける人気の高いレイアウトやコンポーネントを簡単に実装できるBootstrap用のテンプレートを紹介します。 Bootstrap 実装方法のほとんどは、Bootstrapの最小限の構成に数行のHTMLと外部スタイルシートを記述するだけです。 Bootstrapの基本的な使い方は、下記の記事を参考にどうぞ。参考 Bootstrapのグリッドシステムの基本な使い方 BootstrapのベースのCSSを使ってさまざまな要素を実装してみよう！基本要素とナビゲーションのスタイル以下のテンプレートはApache 2.0ライセンスで、個人でも商用でも無料で利用できます。 Scrolling

griefworker 2015/07/31

リンク

pixiv小説縦書き機能開発の裏側～横のものを縦にする～ - pixiv inside [archive]

はじめましてこんにちは。pixivでアルバイトをしているhakatashiです。さる6月10日、パソコン版pixiv 小説にて縦書き表示機能がリリースされました。この開発のあらかたを担当したので、今回の縦書き機能開発における裏側を紹介いたします。構想縦書き機能開発にあたり、設計段階からその大部分を一任されました。小説機能開発において自分の中に絶えず理念として存在していたのは、ユーザーに最高の読書体験を提供することです。縦書きによって得られる利益を最大化し、快適な閲覧を支援するために、以下のような構想を置きました。縦書き横書きの組版の差異における違和感を可能な限り軽減すること。スクロールとページングを融合した、柔軟で快適な閲覧インターフェイスを提供すること。この2点について詳しく解説します。縦組版まず、ウェブブラウザで縦書き表示を実現するにあたり、どのような手法をとるかという問

griefworker 2015/06/15

css
html

リンク

IDを使わないCSSの設計 - kojika17

CSSのスタイリングではIDを使用しない、という話をよく聞くようになりました。私も最近は、IDを使わずにコーディングしているので所感を書きます。 CSSでIDを使わない「IDを使わない」ということをHTMLの変化で示すと、以下のようになります。 <div id="header" class="clearfix"> <h1 id="logo"><a href="">logo</a></h1> <ul id="heaeder-info"> <li class="about"><a href="">about</a></li> <li class="sit emap"><a href="">sit emap</a></li> </ul> </div> ↓↓↓↓ <div class="header clearfix"> <h1 class="logo"><a href="">logo</a></

griefworker 2015/06/14

css

リンク

CSS 設計の長い夢 - ペパボのフロントエンドスタンダード

フロントエンド周りの技術は驚異的なスピードで進化し、また多様化しています。それらを全てマスターするのは途方もなく大変なので、ペパボでは、社内のエンジニア・デザイナが「最低限これだけはおさえておこう」というスタンダードを文書化することにいたしました。社内向けを想定した文書ではありますが、社内のみに留めず多くの方に役立てたいと考えたため公開します。スタイルシートの夢 (1) 予測しやすい (2) 再利用しやすい (3) 保守しやすい (4) 拡張しやすい代表的な CSS 設計手法既存プロジェクトの CSS に立ち向かう！ (0) 流れ (1) 既存の CSS ファイルを元に SCSS ファイルに変換する (2) イニシャライズ CSS や共通の箇所のスタイルを分離する (3) CSS Lint を使って、修正しやすいところから整理していく (4) コンパイル (5) スタイルのスコープ（あ

griefworker 2015/06/13

css

リンク

Slideout.js - A touch slideout navigation menu for your mobile web apps.

$ npm install slideout $ bower install https://github.com/mango/slideout.git $ component install mango/slideout 1. First of all, you'll need to have a menu ("#menu") and a main content ("#panel") into your body. <nav id="menu"> <header> <h2>Menu</h2> </header> </nav> <main id="panel"> <header> <h2>Panel</h2> </header> </main> 2. Add the Slideout.js styles (index.css) in your web application. body

griefworker 2015/03/08

リンク

Bootstrap Off-Canvas by iamphill

Bootstrap Offcanvas Super simple, easy to use off-canvas navigation menu for Bootstrap. It uses Bootstrap classes and markup to create an off-canvas menu that not only looks good. But works perfectly. Installation Add the stylehseet from the dist folder to your HTML document. <link rel="stylesheet" href="../dist/css/bootstrap.offcanvas.min.css"/> Add the JavaScript from the dist folder to your HTM

griefworker 2015/03/07

リンク

ブックマークしておきたい、Bootstrapの商用利用無料のテーマがダウンロードできるサイトのまとめ

コーポレートサイトやスモールビジネスから、ランディングページ、プロダクトページ、ポートフォリオやギャラリーなど、BootstrapをベースにしたWebページが簡単に作成できる無料のテーマがダウンロードできるサイトを紹介します。テーマとして利用するだけでなく、制作のインスピレーションにもいいですね。 Peter Finlan 縦長ページにかっこいいスクロールエフェクトやアニメーションを加えた今時のWebページが実装できます。デザインも非常にかっこいいものが揃っています。