css

stylelintでscssのlintを行う

ぱぱっと作るアプリだとscssのlintまでかけようとは思わないのですが、jsのlintツールであるstandardを導入したついでにやってみました。 Installation こちらに記載されています。 Linting CSS-like languages and CSS within containers yarn add --dev st…

Semantic UIをRails + Webpackerで使う

Semantic UI css frameworkで使ったことないものを利用してみようと思って、installしたら少し嵌ってしまったのでメモ。 ちなみに、当初はTailwind CSS を使ってみようと思ったのですが、こっちはどうも慣れないのとclassがhtmlにつきまくってメンテしづらそ…

WEB+DB PRESS Vol.93 [詳解]モダンCSS

WEB+DB PRESS Vol.93作者: 原田騎郎,吉羽龍太郎,松浦隼人,須藤涼介,生沼一公,森下雅章,前島真一,鍛治匠一,伊藤直也,のざきひろふみ,うらがみ,高山温,佐々木健一,わかめまさひろ,ひげぽん,遠藤雅伸,海野弘成,はまちや2,竹原,藤田正訓,WEB+DB PRESS編集部出版…

HTML5/CSS3モダンコーディング 読了

HTML5/CSS3モダンコーディング フロントエンドエンジニアが教える3つの本格レイアウト スタンダード・グリッド・シングルページレイアウトの作り方 (WEB Engineer’s Books)作者: 吉田真麻出版社/メーカー: 翔泳社発売日: 2015/11/03メディア: 大型本この商品…

hatenaのcssをCDN(raw.git)から読み込む

hatena blogのCSSは、github上で管理していますが、 直接raw.githubのファイルをcssでimportすることはできません。 githubにpushした時点でhatena blog上に反映するようにしてみました。 raw.github のファイルをimportすると Content-Type がtext/plainと…

Web Font のライセンス明示方法

css

Web Font 便利ですよね。 Font Awesome は、iOSでも使えてとても重宝しています。 ところで、オトナのたしなみとしてライセンス表記はどのようにすれば良いか というのが気になったので調べてみました。 参考 ・Web フォントとライセンス なるほど、CSSに明…

sublime text2 でcssのsnippetを書く

/* Header ----------------------------------------*/ こんなやつをsublime textで出したくなったのでsnippetを追加。 Packages/User/css/my_comment.sublime-snippet <snippet> <content></content> <tabTrigger>c</tabTrigger> <scope>source.css</scope> <description>ins…</description></snippet>

Google HTML/CSS Style Guide

css

HTML/CSSを書きだした頃は、どうすれば良いか随分迷ったり 本やcss coding rule何か見たりして、最近はだいたい統一できるようになってきたけど こういう指針をgoogleみたいなとこが出してくれると ある程度標準化される気がするので嬉しい。 (プロジェクト…

角丸 curvycorners.js

javascript + css で実現可能な CurvyCorners - Beautiful rounded corners for your HTML boxesを試してみた。 install ダウンロードして curvycorners.js を public/javascripts以下に格納。 設定 javascriptを読み込み、 該当divにrounded をclass指定し…