HTML5 Boilerplate helps you build fast, robust, and adaptable web apps or sites. Kick-start your project with the combined knowledge and effort of 100s of developers, all in one little package.
![HTML5 Boilerplate: The web’s most popular front-end template](https://cdn-ak-scissors.b.st-hatena.com/image/square/5c7cddb5c7297329fb676490ebc00d9310365545/height=288;version=1;width=512/https%3A%2F%2Fhtml5boilerplate.com%2Ficon.png)
撮影: 田中舘 一久 10月19日、CSS Nite in SENDAI, Vol.7 が仙台で開催されました。今までありそうでなかった こもり まさあきさんと一緒に講演できました。私と彼の切り口も話し方も異なりますが、共通のメッセージが含まれているなと、勝手に親近感を抱いております。 無言語の言語化 今回は、Webサイトの核をデザインするための最初の一歩 と題して、ニュアンスがなんとなく伝わっているだけのコンセプトを、共有できるように言語化してデザインに繋げていこうという話をしました。最近コンテンツ設計の話が多かったですが、今回はその前にやらなければならないことを中心に掘り下げて解説しました。 誰もが企業・団体の良さを引き出した Web サイトを作りたいと思っています。しかし、「企業・団体の良さ」や「良い Web サイト」の定義があやふやのまま、制作フェイズに入っている場面を見かけること
はじめに Yeoman用の独自のgenerator作りたいなーと思っていたら丁度WRITING CUSTOM YEOMAN APP GENERATORSていうドキュメントがあったので訳します。適当に端折ったり言い換えているので、完全な詳細は原文を読んで下さい。 とりあえず感想だけ言うと「Yeomanはじまったな」です。あとでFirefox OSのアプリ(Open Web Apps)用のgenerator作るで。generatorはNode.jsで動くのでNode.jsで何か作った事ある場合は割と簡単に色々出来ると思う。 目次 このガイドはYeoman generatorシステムを使おうとしてる人を助ける為のものです。説明を飛ばしてもgeneratorの利用は出来ます。 導入 generatorのタイプ ボイラーテンプレートなgeneratorを作る アプリケーションの土台を生成するgene
※ 追記: id:TokyoIncidents さん"補足"の誤字修正しました、ありがとうございます!! これからYeomanに関して説明していきます。 Yeoman自体が何者なのかよくわかっていない人も多いと思います。また、ある程度Yeomanの概要は知っているので、generatorの作り方が知りたい、という方もいると思います。今回は三部構成で、yeomanを使う話、yeomanのgeneratorを作る話、最後にyeomanのAPIに関して説明していきます。今回は第一部のyeomanを使う話について説明します。 Yeomanとは Google社が作成した総合開発ツール群です、「ヨーマン」と呼びます。公式サイトには MODERN WORKFLOWS FOR MODERN WEBAPPS (モダンWEBアプリケーションのためのモダンワークフロー) と記述されています。 Yeomanを使う
How browsers work Stay organized with collections Save and categorize content based on your preferences. Preface This comprehensive primer on the internal operations of WebKit and Gecko is the result of much research done by Israeli developer Tali Garsiel. Over a few years, she reviewed all the published data about browser internals and spent a lot of time reading web browser source code. She wrot
BEM Advent Calendar 2013の2日目の記事です。 本当はここ最近考えている命名ルールとか書こうかなとか思っていたのですが、「試して欲しい」という声があったのでよくわからないままbem toolを試すことにしました。 今回作ったサンプルプロジェクトはgithubにアップしてあります。 BEMとはBEMとは、Block、Element、Modifierの略語です。Webサイトのコンポーネント化のためのフロントエンド設計方法のひとつで、厳格なclass名の命名ルールが特徴的な手法です。 概念やルールについては以下を参考に調べてみてください。 http://bem.info/BEM-Methodology Definitionsの日本語訳CodeGridのBEMによるフロントエンドの設計 基本概念とルール今回は、概念の部分ではなくbem.infoで提供されているbem tool
Beautiful Web Type A showcase of the best typefaces from the Google web fonts directory. There are over 600 typefaces in the Google web fonts directory. Many of them are awful. But there are also high-quality typefaces that deserve a closer look. Below are examples of these typefaces in action. Click the examples to get the typeface from the Google web fonts directory. Maintained by Chad Mazzola W
HTML5 Conference 2013 @ 2013.11.30 Follow up: http://d.pr/WvTf
2013-11-30-A-Recipe-for-Modern-Mobile-Front-end-Web-Development-html5-conference-2013.md A Recipe for Modern Mobile Front-end Development モバイル時代のフロントエンド開発レシピ 斉藤 祐也: Twitter@cssradar スライド: http://d.pr/s2Qw Intro Our Mobile Planet スマートフォン市場規模の推移・予測(2013年3月) - 株式会社 MM総研 Frontrend in Sapporo Frontrend in Fukuoka @ 2014.01 Code Scaffolding Brunch - ultra-fast HTML5 build tool Yeoman - Modern workflows
SCSSファイルを整理し直している時、一気にBEMなクラスを使って書きなおしてやろうかとも考えていた。けど途中でSassならSCSSファイルの分割とその中での工夫によってBEMの構造を表現できそうと感じたので、今はそういう方向で試行錯誤している。実際BEMのウェブサイトでもファイルシステムを使ったBEMの表現方法という似た話が書かれているので荒唐無稽な考えではなさそう。 SCSSファイル名でblockを表現 その中でplaceholder selectorを使ってelementとmodifierを表現 外からはこのplaceholder selectorは使わない 既存のマークアップを利用したセレクターから@extendでBEM構造を関連付け HTMLファイルではBEMなクラスは振らない 必要な場合はシンプルなクラスを振る イメージはこのような感じ。HTMLでのマークアップの簡潔さは維持で
公開日2013-12-02タグAdvent CalendarBEMCSSHTML今年もあと一月ということでブログをリデザインしました。ということでこの記事はBEM Advent Calendar 2013 1日目のエントリです。日付過ぎてしまいましたね。 BEM って何? BEM とは Block, Element, Modifier の頭文字をとったもので、フロントエンド設計において命名規則やモジュールの管理に前述の3種類の区分を取り入れたものを言います。今回はタイトルにもある通り、CSS の命名規則に BEM を取り入れてみるということで、BEM な CSS について記載します。 BEM るとどういう良いことがあるの? いろんな人がすでに書いているので別エントリを参考になさってください。あるいは、今回の Advent Calendar に参加した方のエントリも参考になるかと思います。
SassなどのCSSプリプロセッサを使うWebデザイナが増えてきました。Sassをコンパイルするだけなら黒い画面(ターミナル)を使わずともGUIアプリからの利用で問題ありません。が、ここは一歩踏み込んでGrunt(JavaScript製のタスクランナー)を使って、Sass以外のコンパイルやライブリロード、画像最適化、CSSのリントやスタイルガイド生成など、あらゆる作業をGruntに任せてより効率的な開発環境を手に入れてみませんか。 ども、Front-end Developerをしております@t32kです。今日はがんばります。 Frontrendというコミュニティ活動をしています。通常は東京で3~4ヶ月の周期でフロントエンドをテーマにした勉強会を開催しています。良かったらみなさんもご参加くださいませ。 Agenda 今日の話す内容は以下のとおりです。 なぜGruntを使うの? Gruntの使
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く