そろそろ真面目に、HTMLで帳票を描く話をしようか - Qiita
帳票といえばPDFとして生成するのが一般的でしょうか? でも、2015年の今、あえてHTMLで描くのがホットです(個人的に)。ミリ単位で設定された高度な帳票も、CSSを駆使して簡単に作ることができます。業務システムでもモダンブラウザを選択することが増え、@pageなども積極的に使えるようになったこと、SPA(Single Page Application)の台頭、いろいろと条件が揃ってきました。 書いてたら結構長くなっちゃったので、さくっとコードだけ見たい方は、Paper CSSリポジトリをどうぞ。 はじめに HTML帳票のメリット 2015年現在、HTML帳票を選択する幾つかのメリットがあります。 ライブリロードで、リアルタイムなスタイル調整 バックエンドではなくフロントエンドで生成できる 前者は、gulpやGruntの普及で、CSSにしろHTMLにしろ、リアルタイムにプレビューできる環
CSSで印刷レイアウトをコントロール
Webサイトを制作する上で印刷された時の見栄えを考慮しなければならないことがたまにあります。 考慮しないでコーディングをしてしまうと印刷時にコンテンツが複数ページにわたってしまい変なところで別ページに分割されることがあります。 それをこんな感じに綺麗に改ページを行うためのHTMLの構成とCSSの組み方を考えてみます。 ※Chromeを使って確認したコードなのでChromeで確認して下さい。 HTML構成 まず、HTMLの構成から考えてみます。 １つのページは<section>タグを使用します。 そして、複数のページを<article>タグでまとめます。 つまりHTMLとしては下記のような構成になります。 <article> <section> <h1>１ページ目</h1> </section> <section> <h1>２ページ目</h1> </section> <section> <h
フォームのIME-MODEを指定する - CSSテクニック - acky info
positionを使ったCSSテクニック テキストリンクをpositionでずらしてクリック感をつける フォームのradiobutton、checkbox、selectのずれを調整する positionプロパティのrelative、absoluteの簡単な使い方 フォームに関するCSSテクニック :focusを使って入力中のフォームに背景色をつける 検索ボックスのデザインをCSSで整える フォームの送信ボタンにロールオーバーをつける フォームのradiobutton、checkbox、selectのずれを調整する フォームのIME-MODEを指定する 疑似クラスを使ったCSSテクニック liやtr、tdの背景色を交互に付ける :focusを使って入力中のフォームに背景色をつける テキストリンクをpositionでずらしてクリック感をつける 検索ボックスのデザインをCSSで整える フォームの
select要素内に年月日などの数字を自動生成する
Result jQuery//現在の年数オブジェクトを4桁で生成 var time = new Date(); var year = time.getFullYear(); //1900年まで表示 for (var i = year; i >= 1900; i--) { $('#year').append('<option value="' + i + '">' + i + '</option>'); } //1～12の数字を生成 for (var i = 1; i <= 12; i++) { $('#month').append('<option value="' + i + '">' + i + '</option>'); } //1～31の数字を生成 for (var i = 1; i <= 31; i++) { $('#day').append('<option value="'
│アノニマ・スタジオ｜中央出版株式会社
MIGRANT 小穴真弓さん（一級建築士）【わたしをひらくしごと】（2023.12.18） チャプター２ 番外編 クリスマスツリー【かぞくのブリコラージュ～自分たちで暮らしを作る、日常の発明記～】（2023.12.14） 第11回 ザリガニ～ザリガニを捕まえよう編～【たのしい生きもの観察】（2023.11.02） チャプター２ その６ ブリコラ家族の子供部屋【かぞくのブリコラージュ～自分たちで暮らしを作る、日常の発明記～】（2023.06.30） フェンバーガーハウス ロジャー・マクドナルドさん（キュレーター、美術講師、私設美術館館長）【わたしをひらくしごと 友達の輪！篇】（2023.06.27） チャプター２ 番外編 春の失敗【かぞくのブリコラージュ～自分たちで暮らしを作る、日常の発明記～】（2023.05.26） 3月23日から開催！早川ユミさんの展示「おんなは雑草」＠東京・noie
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
