横浜市・東京都内を中心に活動するフリーランスのWebデザイナーとフロントエンドエンジニアのWeb制作事務所です。BtoBのLPやコーポレートサイトの制作を得意としています。
帳票といえばPDFとして生成するのが一般的でしょうか? でも、2015年の今、あえてHTMLで描くのがホットです(個人的に)。ミリ単位で設定された高度な帳票も、CSSを駆使して簡単に作ることができます。業務システムでもモダンブラウザを選択することが増え、@pageなども積極的に使えるようになったこと、SPA(Single Page Application)の台頭、いろいろと条件が揃ってきました。 書いてたら結構長くなっちゃったので、さくっとコードだけ見たい方は、Paper CSSリポジトリをどうぞ。 はじめに HTML帳票のメリット 2015年現在、HTML帳票を選択する幾つかのメリットがあります。 ライブリロードで、リアルタイムなスタイル調整 バックエンドではなくフロントエンドで生成できる 前者は、gulpやGruntの普及で、CSSにしろHTMLにしろ、リアルタイムにプレビューできる環
デモページ(コンテンツ量が多い時) 実装 HTML 最小限の構成はこんな感じです。 コンテンツはmain要素でなくても平気です。コンテンツとフッタだけあればOK。 <body> <main> メイン コンテンツ </main> <footer> フッタ </footer> </body> CSS デモではフッタの高さを5emに設定しており、それに合わせてbodyにマージンを設定します。 // STYLES - essential for sticky footer html { min-height: 100%; position: relative; } body { margin-bottom: 5em; } footer { bottom: 0; height: 5em; position: absolute; }
新たな elm-html ライブラリでは、HTMLとCSSをElmで直接使用できます。FlexBoxも使ってみたいし、既存のスタイルシートも使い続けたいですか? Elmは使いやすくなり、処理が 速く なりました。例えば、 TodoMVC アプリを再作成する場合、Elmの コード はとても単純で、 事前のベンチマーク でも、他の人気ライブラリに比べ処理速度が極端に速いという結果が出ています。 elm-html とMercuryは、どちらも virtual-dom プロジェクトを基にしているので、パフォーマンスが優れています。この記事では、前半で“仮想DOM”とは何か、 純粋性 と 不変性 によっていかに処理速度が上がるかということについて詳しく検証します。この検証によって、なぜOm、Mercury、Elmがベンチマークでこのような素晴らしい数字を出したかが分かるでしょう。 パフォーマンスは人
1 pixel|サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 みなさんこんにちは。アメーバ事業本部の泉水(@1000ch)です。 今日はHTMLをコンポーネント化するWeb Componentsという新しいHTMLの仕様と、 その機能を補完するPolymerというライブラリについてお話させていただきます。 Web Components Web Componentsについては、2013年のHTML5 ConferenceでGoogleの夷藤さんがセッションされていました。夷藤さんはChromeチームで、Web Componentの周りの実装をされていたり、Shadow DOMの仕様の編集をされています。 セッショ
実は WordPress サイトを静的 HTML に変換するプラグイン StaticPress をリリースしていました。 ダウンロードは、WordPress 公式プラグインディレクトリからお願いします。 WordPress › StaticPress « WordPress Plugins このプラグインを使用することで WordPress で作成されたサイトを丸ごと静的ファイルに変換することができます。 また、変換時にサイトのパーマリンク構造を変換することができるため、http://wp.example.com/ というオリジナルサイトを http://www.example.com/static/ というサイトとして公開するための html を作成することも可能です。 完全に静的ファイルを作成するため、コメントやサイト内検索・コンタクトフォームの設置などはできません。 それらについては
Adobe Systemsがロサンゼルスで5月に初旬に開催した「Adobe MAX 2013」において、HTML5 Boilerplateの開発者として知られるPaul Irish氏の講演「Mobile CSS Performance」を聴講した。その内容をベースにしながら、CSSを高速化するためのさまざまなテクニックを紹介する。 Paul Irish氏は、HTML5 BoilerplateやModernizrなどの開発者として世界的に著名なGoogleのエンジニア。その彼が直接CSSのパフォーマンスを語るとあって、セッションは大変な人気であった。 一般的にウェブページの高速化、特にモバイルにおいてはCSSを高速化することよりもネットワークのパフォーマンスを最適化する方が効果が高い。そのため、まずはPageSpeedやYSlowなどを効果的に使用し、HTTPリクエスト数を減らす、ダウンロー
scriptタグで外部サイトのJSファイルを読み込むときはこういう風に書きましょう。 <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> Google公式サイト(Google Hosted Libraries - Developer's Guide)でもこの書き方が提示されています。 こう書けば、HTTPのときはhttp、HTTPSのときはhttpsになるので大変便利です。 参考 いい加減、<script src="http://.. と書くのはやめましょう 1つのネタで2回記事を書いてしまいました。 後悔はしてない。
WYSIWYGエディタとは、一種のHTMLエディタです。WYSIWYGエディタを使用すると、実際のページレイアウトと同じように表示され、ページを編集できます。ブログ書く人はわかると思うのですが、ブログ記事を書く画面によく使用されていますね。 WYSIWYGエディタは、いくつも開発されており、高機能すぎて少し重たかったりと贅沢な不満もあります。そこで今回は、人気のWYSIWYGエディタのご紹介です。 ・Redactor Redactorは、すっきりとした美しいデザインが特徴です。私は一番好きです。残念ながら有償なんですね。高機能で他のWYSIWYGエディタより美しいデザインなので有償なのも納得です。 Redactor ・CKEditor CKEditorは、高機能でカスタマイズが容易です。日本語に対応してくれていますので、ボタンの説明が日本語で表示されます。 CKEditor ・CLEdit
先日、弊社で開催ししている勉強会:【課外授業5日目】「Sublime Text 2とSass&Compassで効率的なコーディングライフ」のスピーカーを務めさせていただきました。 人生初のスピーカーということで、緊張して時間を10分巻いてしまいました。。。 さて今回はHaml with Sublime text 2と題しまして、ご紹介できればと思います。 アジェンダ Hamlとは? Hamlの書き方 Sublime text 2でビルド(ファイル出力) おまけ Hamlとは? XHTML Abstraction Markup Languageの略称です。 と言われましてもなんのことだ??ってなるかと思います。 日本Hamlの会というユーザーグループで以下のように、説明しれくれてます。 HamlはHTML/XHTMLを生成するためのマークアップ言語です。インデントや簡略構文によって簡潔な記述
全力で「アプリ博」をヨイショしている、ちょっと寒いマンガ、、、、内容はともかく、最近流行している「棒人間」を主役にしたこのマンガはHTMLでできているのである (ソースを参照→http://metamix.com/techwave/comix.html)。 使用したのは「Comix I/O」。オンラインで、棒人間のポーズを決め、あとはHTMLソースに吹き出しなどを入力すれば完成。 出力は画像ではなく、あくまでHTMLで表現できているのがポイント。 棒人間マンガ量産体制スタート? 「Comix I/O」にはオンラインエディターが提供されており、画面上部のグラフィック部が棒人間のポーズや吹き出しの位置を調整するエディタになっている。まずは、ここで図柄を作成すると、下部にHTMLコードが生成される仕組み。 吹き出しの文字列などは、HTMLコードを直接編集する。 棒人間や吹き出しには、ベクターグラ
Primer undercoats your CSS by pulling out all of your classes and id's and placing them into a starter stylesheet. Paste your HTML in to get started. Made for you with love and care by @luckystrikes and @wades. Notice: Undefined index: htmlsrc in /home/ypp7m8mtix54/domains/primercss.com/html/index.php on line 43
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く