牌語備忘録 -pygo

あくまでもメモです。なるべくオフィシャルの情報を参照してください。

牌語備忘録 -pygo

CSS

CSSで画像の縦横比を保ったまま同じサイズで表示するメモ

CSS

毎度忘れるのでメモ object-fit: cover; link https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit https://www.webcreatorbox.com/tech/object-fit

css helper 的なやつを Javascript で簡単に生成してみるメモ

Javascript const lineList = [ '.w100 {width: 100%;}', '.text-left {text-align: left;}', '.text-center {text-align: center;}', '.text-right {text-align: right;}', '.text-justify {text-align: justify;}', ]; lineList.forEach(line => { console…

HTMLの<ol>で 1. ではなく (1) とか 2) とか括弧付きで表示したい場合のメモ

通常の タグ <ol> <li>hoge</li> <li>fuga</li> </ol> 表示 1. hoge 2. fuga 括弧付きの数字を表示させる <style> ol.bracket, ol.closing_bracket { list-style-type: none; } ol.bracket > li, ol.closing_bracket > li { counter-increment: cnt; } ol.bracket > li:before { content: "("co…

Emacs の Flycheck で csslint の設定を変えてを使うメモ

(emacs25.1.1) インストール Emacs と flycheck、node.js と npm のインストールは略 $ npm install -g csslint 設定 flycheck のソースコード を見てコマンドの設定を追加してみる (flycheck-define-checker css-csslint "See URL `https://github.com/CSSL…

CSSで星のレーティング評価を0.0〜5.0で表示するメモ

CSS

こんなの html <html lang="ja"> <head> <meta charset="utf-8"> <title>sample</title> <link rel="stylesheet" href="style.css"> </head> <body> <h2>Star Rating</h2> <div class="star-rating"> <div class="star-rating-front" style="width: 50%">★★★★★</div> <div class="star-rating-back">★★★★★</div></div></body></html>

CSS の nth-child で特定の要素を指定するメモ

例:先頭から2番目以降すべての ul で、先頭から3番目までの li 要素 <html lang="ja"> <head> <meta charset="utf-8"> <title>TITLE</title> <style type="text/css"> ul:nth-child(n+2) li:nth-child(-n+3) { background: green; } </style> </head> <body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> <ul>…</ul></body></html>

Twitter Bootstrap3 のテーブル内で長い文章が折り返されない場合のメモ

CSS

css - Bootstrap tables overflowing with long unspaced text - Stack Overflow .the-table { table-layout: fixed; word-wrap: break-word; }

ささっとWebデザインというかコーディングをするのに便利かと思って『html5-scss-coffee-boilerplate』作って GitHub にアップしてみた

HTML と CSS + JS でコーディングするより、HTML + SCSS + CoffeeScript でやりたい でも Grunt とか Yeoman とかインストールしたくない、と思ってたら丁度良く下記エントリー発見。 昨今の自分用Webアプリケーションひな形 - naoyaのはてなダイアリー 昨今…

CSSで日本語の単語の途中で改行させない場合のメモ

CSS

下記サイトから引用 単語の途中で改行させない|新米webデザイナーの備忘録 liではなくて、ulもしくはolに対して指定 ul { word-break: keep-all; }

CSSで長いURLや文章を改行させる場合のメモ

CSS

下記サイトから引用 Wrapping Long URLs and Text Content with CSS | Perishable Press pre { white-space: pre; /* CSS 2.0 */ white-space: pre-wrap; /* CSS 2.1 */ white-space: pre-line; /* CSS 3.0 */ white-space: -pre-wrap; /* Opera 4-6 */ whit…

オブジェクト指向CSSのことなどメモ -- Object-Oriented CSS (OOCSS)

css

What's Object-Oriented CSS (japanese) BASE CLASS NAMES .cf = clear fix .fl = float left .fr = float right .flall = float aplly child selector .il = display inline .ilall = display inline apply child selector BASE .txtl = text align left .txtr = …

Responsive Website Design

examples 60 Examples of Responsive Website Design | inspirationfeed.com Responsive Web Design: 50 Examples and Best Practices - Designmodo how to How to Design a Mobile Responsive Website | UX Booth Responsive web design japanese レスポン…

CSS拡張『Sass/SCSS』とか『LESS』のメモ

CSS

http://blog.goodpatch.co/articles/sass-less/ CSS拡張メタ言語「SCSS(Sass)」と「LESS」の比較 - (DxD)∞ CSS拡張言語SASSとLESSを触ってみる | 69log Sass/SCSS Sass: Syntactically Awesome Style Sheets 『Rails 3.1にはSassの弟分のSCSSが標準で入り...…

Emacsの『scss-mode』

https://github.com/antonj/scss-mode Sass、そしてSassy CSS (SCSS) scss-modeでインデントが効かない場合 前回、試した時は上手く行かなかったのだけど、原因判明。 結論からいうと、Emacs-lispのパスの通ったところにデフォルトのcss-modeではない『css-m…

CSSフレームワークのメモ

CSS

デザイン起こしてから、効率的に高速でコーティングするには何がベターなのかな? 960 grid system 960 Grid System tutorial video なぜかvideoのチュートリアルのソースのリンク切れてるから、下記リンクからダウンロード*1 http://nettuts.s3.amazonaws.c…

続『5分でRails3アプリ』をやってみた - 『Twitter Bootstrap』で見た目をサクッと変えてみた

『5分でRails3アプリ』をやってみたの続き。『twitter-bootstrap-rails』っていうのを見つけたのでやってみた。 http://rubygems.org/gems/twitter-bootstrap-rails http://twitter.github.com/bootstrap/ デザインが苦手なWebサービス開発者に朗報!今風の…

PhoneGap で iPhone アプリをリリースしてみて思ったことなど。

iTunes Store へ接続中です。 シンプルな思考補助タイマーアプリ『ThinkingBreak』for iPhone をリリースしました。開発は PhoneGap で。 - 牌語備忘録 - pygo マルチプラットフォーム。iPhone以外でも。 PhoneGapの売りのひとつなので、一応さまざまな環境…

PhoneGap で表示する画像を iPhone4 の Retina Display に対応させるには

CSS3 Media Queries ってのを使うしかないのかな? 他にもっとスマートなやり方ないのかな。 できればPhoneGap側で自動的に差し替えとか...難しいか(´・ω・`) 素直にObjective-Cで書けということなのかしらん。 参考サイト Targeting the iPhone 4 Retina Disp…

PhoneGapでボタン長押し時にOpen/Copy/Cancelのダイアログが表示されてしまう場合の対処

(環境:MaxOS10.7, XCode4.2, PhoneGap1.1.0) 症状 ボタンを長押しすると、こんなダイアログが表示される場合がある。エラー? Google先生に訊いてみた CSSいじればイイみたい Google グループから引用 *{ /* prevent callout to copy image, etc when tap…

PhoneGap のことなど

PhoneGap PhoneGap | Home PhoneGap Fan - PhoneGap (Cordova) の日本語コミュニティ How to PhoneGapで手軽にiPhone/Androidアプリを作ろう:連載|gihyo.jp … 技術評論社 PhoneGapで始めるWeb→スマホアプリ制作入門(1):PhoneGapでAndroidアプリを作るた…

続『iPhoneアプリケーション開発ガイド――HTML+CSS+JavaScriptによる開発手法』5章 クライアントサイドのストレージ を jQuery Mobile に書き換えてみた。

(main.js若干修正)『4章 アニメーション効果 を jQuery Mobile に書き換えてみた。』の続き サンプルが jQTouch だったので jQuery Mobil でやってみた。 O'Reilly Japan - iPhoneアプリケーション開発ガイド jQuery Mobile ファイル構成 img/button.png j…

jQuery Mobile と jQTouch と Sencha Touch の事など

結果から言うと取り敢えず jQuery Mobile でやって、物足りないなら Sencha Touch でって感じかな jQuery Mobile jQuery Mobile jQuery Mobile の紹介 Good 本家jQueryから公式リリース 将来期待できる(気がする) 比較的導入の敷居が低そう MITライセンス …

『iPhoneアプリケーション開発ガイド――HTML+CSS+JavaScriptによる開発手法』4章 アニメーション効果 を jQuery Mobile に書き換えてみた。

サンプルが jQTouch だったのでjQuery Mobil でやってみた。 O'Reilly Japan - iPhoneアプリケーション開発ガイド jQuery Mobile <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>Kilo</title> <link rel="stylesheet" href="js/jquery.mobile-1.0b3.min.css" />…</link></meta></meta></head></html>

CSS のリアルタイム文法チェックを Emacs の Flymake で Python の cssutils を使ってやってみた

「EmacsのFlymakeでJavascriptとHTMLの構文チェックしてみる - 牌語備忘録 - pygo」の続き (環境: MacOSX10.6, Python2.6 in MacPorts) 「EmacsWiki: Flymake CSS」の下部に書いてある『cssutils』を利用する方法です。 Pythonのパッケージ『cssutils』をイ…

積ん読本を読む『iPhoneアプリケーション開発ガイド ―HTML+CSS+JavaScript による開発手法』

★★★★★ 技術書の翻訳本は読みづらい事が多いけど、これは読みやすく且つ解りやすいと思う。 webサイトやwebアプリを制作してる人が、手軽にiPhoneアプリを作る選択肢の一つとしては良いのかも知れない。 書籍発行時期的にしかたかなったのかもしれないけど jQ…

Emacsのcss-modeが複数ある件

デフォのやつだとプロパティ打ち間違えても色付けされちゃうので、やっぱり2のLars版使うことにした(´・ω・`) css-modeいろいろ Emacs22のcss-mode.el。たぶんデフォではいってるヤツ(あまり使われてないっぽい?) A CSS editing mode for Emacs Lars Mariu…

少しばかり CSS あたりお勉強と『mmm-mode』

少々やってみようかと 崩れないfloatレイアウトのための鉄則 とても参考になった http://adp.daa.jp/archives/000250.html HTML の中の CSS と JS は『mmm-mode』が便利 『キャレット位置によって複数のメジャーモードを切り替えるmmm-mode - ヒルズで働く@r…

CSSのボックスあたりを少々なんやかんやしてみた01

CSS

CSSのボックスあたりがよくわかんないから、少々いじってみた。 基本CSSファイル とりあえずの基本とするCSSファイルを簡単に書いてみた。(XHTMLは最後に) @charset "utf-8"; * { margin: 0; padding: 0; } #wrapper { width: 780px; height: auto; margin…

CSSでデザイン100個できるかな(´・ω・`) 008「位置関係が(||゚Д゚)」

CSS

もくじ「CSSでデザイン100個できるかな」 とりあえず画像をごにょごにょして、XHTMLとCSSを書いてみた。 メモ 位置関係がいまひとつ把握できてない。floatとかpositionとか(´・ω・`) 思ったとおりのイメージにならないなぁ(||゚Д゚) 今現在の製作の流れ イラレで…

CSSでデザイン100個できるかな(´・ω・`) 007「0から書いてみた」

CSS

[訂正]XHTML の DOCTYPE を strictに変更 もくじ「CSSでデザイン100個できるかな」前回、サンプル改造で勉強するのに違和感をおぼえたので0から書いてみた。 デザイン デザインは『dekiteharu.jp』さんのパクリ。をリスペクト。 Pythonのロゴマークは本家…