面倒なpxからemへの変換や、line-heightの計算、レスポンシブを考慮した横幅可変の計算など、コーディング時に計算機が必要になる値の変換をまとめて行えるツールです。
「どうやってコーディングをして組み立てていこうか?」 いくつもの案件を経験しても、いつも悩んでしまうのがCSSの書き方です。「それなら自分なりの考えをまとめてルールを作ってしまおう」と考え、CSS設計に関する情報から自分なりにコーディングルールを作りました。 今回の内容は社内勉強会で発表した「CSSのファイル構成と命名規則」の資料を再編したものです。 すべての案件内容で最適な方法ではないこともあると思いますので、1つの考え方だと捉えていただけるとありがたいです。 詳しいコードやルールはGitHub(個人のアカウント)を参照してください。「使用しているテンプレート」リンク先のstyle.scssで実際の全体の構成が確認できます。 使用しているテンプレート CSSコーディングルール CSSは影響範囲の管理が難しい CSSで難しいことのひとつは「影響範囲」を管理することだと思います。 クラスを追
書籍内に出てきた、7、8章以外のソースコードが掲載されていますので、コピーして使って頂くことができます。 第1章 Sass のキホン まずは Sass って何なのかを知ろう Sass を導入する前の疑問や不安 何はともあれ Sass を触ってみよう 第2章 Sass の利用環境を整えよう Windows 環境に Sass をインストールする Mac 環境に Sass をインストールする Sass を最新版にアップデートしよう Sass コマンドの使い方を覚えよう バッチファイル/シェルスクリプトで簡単にコマンドを実行する GUI(Koala)で Sass を使用する インストールや実行中にエラーが表示された場合の対処法 第3章 これだけはマスターしたいSass の基本機能 ルールのネスト(Nested Roles) 親セレクタの参照 &(アンパサンド) プロパティのネスト(Nested P
高解像度スクリーンに対応できるのは嬉しいですが、普通の解像度しか持たない端末にも大きなファイルをダウンロードさせなければならないのは、3G回線などの遅い回線での表示パフォーマンスを考慮すると、SVGが適していないケースもありそうです。ただ、サーバ上でGZIP圧縮した場合、平均30%ほどサイズを削減できることを考慮すると、数十KBの差がある場合を除いて、表示パフォーマンスと表示クオリティのバランスもとれてくる気がしています。 ちなみに、Illustratorで「圧縮」を選択してsvgzとして保存すると2,395Bになりました。これならPNG8のファイルサイズにだいぶ近くて良い感じですね。Apacheの設定にSVGZが記述されていれば圧縮版を使えるので、このサイズだったら現実的な気がしてきました。ただ、サーバの設定がうまくいかないのか、Illustratorでの書き出しが悪いのか、SVGZを表
こんにちは、「livedoor Blog」を担当している吉沢です。 スマホの登場で、すっかりケータイ (フィーチャーフォン/ケータイ/ガラケー) が日陰に追いやられた感がありますが、ケータイも毎年進化していて、モバイルサイトの開発が行いやすいケータイがユーザへ浸透してきています。 livedoor Blog では、スマートフォン分野に注力しながら、月間15億PV あるケータイ版のUI最適化にも引き続き取り組んでいます。今回は、livedoor Blog で採用した事例を元に、この先1〜2年のケータイ開発・運用に役立てられる、3キャリア共通の CSS から最新のコーディング事情を紹介したいと思います。 アクセスシェア〜ライブドアの場合 まずはどの世代のケータイをメインに開発して表示くずれを起こさないようにするか検討するため、アクセスシェアを把握します。 1年前と比べると、iモードブラウザ2.
完了日: 2024年7月 決済サービス提供会社のコーポレートサイト(200ページ)のリニューアル。テンプレート・パーツのコーディングとPowerCMSの設計・実装を担当。週1回の定例Mtgを開催しながら、長期間のプロジェクトを完遂。 完了日: 2024年7月 大手電機メーカーのコーポレートサイト。様々なWeb制作会社がページ更新時に利用するコーディングテンプレートの全面改修を担当。あわせて、コーディングガイドラインの改定を行ない、サイト運用の基盤整備を行なった。 完了日: 2024年6月 クライアントとサイトの表現方法のイメージ合わせをするために、アニメーションのサンプルをまとめた打ち合わせ用のモックアップを作成。
Zen-codingをインストールしようとしたら、「メニューを更新できません。拡張機能はインストールされません。」と出る問題の解決 いまさらながらですが、Zen-codingをはじめました。 使ってびっくり、これほどまでに作業効率が上がる物だとは思っておらず、なぜ今まで使わなかったのかと後悔しています。 実は、数ヶ月前にも一度インストールを試したのですが、Extension ManagerにZen-Codingをインストールしようとすると、どうしても「メニューを更新できません。拡張機能はインストールされません。」という表示が出てきて、インストールすることができず挫折してしまいました。 今回、この問題でZen-codingの威力を実感できていない人たちのために、この問題の解決方法を記載しておこうと思います。 この警告、実はDreamweaverのショートカットメニューのカスタマイズを行ってい
Posted by kjweb | Posted in Webデザイン, html | Posted on 20-03-2010 twitterで「知らない人は損してる?コーディングが3倍速くなるZen-Codingを導入してみた」という記事のつぶやきがあったので試してみた。 記事では、Apatana Studioを使用していたのですが、Dreamweaver版もあるようなので、それを試しにインストールしてみた。 そのメモです。 Zen-Codingのダウンロード まず、Zen-Codingをダウンロードします。 http://code.google.com/p/zen-coding/downloads/list ちなみに、Zen-Codingは、スタンドアローンのソフトではなく、プラグインという形で提供さています。 Apatana Studio、DreamWeaverの他に、数種
携帯電話内部のメールクライアントソフトを呼び出すものです。 現在、すべての携帯端末で、mailto:〜によるメールクライアント起動・メール送信先初期設定がサポートされています。 subject(メール題名)・body(メール本文)の初期設定に関してはサポートしていない機種がありますが、最近の機種はいずれもサポートしていると考えて良いと思います。 cc(同報)やbcc(匿名同報)をサポートしている端末もあります(下記表参照)。 ただし、これらの指定はあくまでデフォルト指定であり、ユーザー側で編集することができます。 題名等、固定化したいのであれば、フォームメール等のCGIスクリプトを使用する必要があります。 【参考サイト】 EZfactory mailto:の指定方法 http://www.au.kddi.com/ezfactory/tec/spec/wap_tag9.html
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く