そろそろ真面目に、HTMLで帳票を描く話をしようか - Qiita
帳票といえばPDFとして生成するのが一般的でしょうか? でも、2015年の今、あえてHTMLで描くのがホットです(個人的に)。ミリ単位で設定された高度な帳票も、CSSを駆使して簡単に作ることができます。業務システムでもモダンブラウザを選択することが増え、@pageなども積極的に使えるようになったこと、SPA(Single Page Application)の台頭、いろいろと条件が揃ってきました。 書いてたら結構長くなっちゃったので、さくっとコードだけ見たい方は、Paper CSSリポジトリをどうぞ。 はじめに HTML帳票のメリット 2015年現在、HTML帳票を選択する幾つかのメリットがあります。 ライブリロードで、リアルタイムなスタイル調整 バックエンドではなくフロントエンドで生成できる 前者は、gulpやGruntの普及で、CSSにしろHTMLにしろ、リアルタイムにプレビューできる環
あまり知られていないCSSの12の事実(続編) | POSTD
1年以上前に、私は最初の 12 Little-known CSS Facts（あまり知られていないCSSの12の事実） を発表しました。SitePointで最も人気の高い記事となりました。この記事を書いた後も、私はCSSのアドバイスやちょっとした情報の収集を続けました。だって、大ヒット映画も必ず続編を制作するじゃないですか。 注釈 SitePoint/ Natalia Balska によるイラスト それでは、早速今年も開発のヒントになる12の事実について話しましょう。もちろん、中にはもうすでにご存じのこともあると思いますが、この中で初めて知ったという事実がありましたら、コメントでお知らせください。 1. border-radius プロパティに”スラッシュ”シンタックスを使用できる事実 このプロパティについてはSitePointに4年以上 前に書いた のですが、この機能が存在することを、未
Web屋ならチェックしておきたい！作業効率が激変するChrome DevToolsの便利な使い方まとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
Web屋ならチェックしておきたい！作業効率が激変するChrome DevToolsの便利な使い方まとめ こんにちは、デザイナーの王です。 今回の記事では、ChromeのDevTools（デベロッパーツール）について、「多分、周知されていないけど、使わないともったいない！」的な機能を紹介させて頂きたいと思います。 フロントエンジニアにも、デザイナーにも、きっと効率アップに繋がる小技が見つかるはずです。 開発者なら「Chrome Canary」を使おう！ みなさんはChrome Canaryを使っているんでしょうか？一般向けにリリースされている安定版であるChromeより、ほぼ毎日アップデートしている「Canary」ビルトを選ぶ理由があります。 それは、開発者向けの新機能がいち早く利用できるからです！リリースがノロノロしているChromeを使ってたら、いつまでも最新の便利な機能の恩恵が受けられ
最初に設定しないと絶対損する！Google Analytics 9個の必須設定＆解説 | Find Job ! Startup
アクセス解析は最初の解析設定が命。「やっておけばよかった！」と後悔しても、設定し忘れた集計数値はもう2度と手に入りません。 Webサイトの財産とも言える解析データをしっかり取得してビジネスの成長につなげるためにも、必ず設定しておきたいGoogleアナリティクスの必須設定項目をまとめました。 もし抜けがあるようでしたら、この機会に設定してみて下さい。 ※現時点で、アナリティクスの設定は標準・ユニバーサルの2種類があります。ユニバーサルは、まだ不完全なので今回は「標準」での設定をベースにご紹介します。 【設定1】プロパティ＆プロファイル まずはサイトの運用方針などに合わせて、的確にプロパティとプロファイルを設定します。 基本的には「サイトごとにプロパティ」設定がおすすめ いくつものサイトを『それぞれ別のドメインで展開』する場合や、サブドメインでそれぞれのサイトを管理する場合、基本的に
身につけておきたいWebサイト高速化テクニック #3｜画像形式の基礎知識 | DevelopersIO
こんにちは、ご無沙汰しています。 Web担当の野中です。 前回の第2回「検証ツールとそもそもHTTPって何だ編」から少し時間が経ってしまいました。 というのもテクニックを紹介するために予想以上の予備知識の説明と検証・調査が必要になり、さらにどう順序立てて解説すべきか悩み時間がかかってしまいました。 ちなみに第2回では、Webサイト高速化に関連してくるHTTPについて基本的なことを紹介しています。 より詳しくHTTPについて解説したCodezineさまに寄稿している連載も是非チェックしてみてください。 本題 さて、今回から実践編ということでフロントエンド側のWebサイト高速化対策の１つ、画像の最適化について紹介します。 初学者向けに細かく基本的なことまで解説しますので、記事を3つに分けます。 画像最適化1回目の本記事では、画像に関する基礎知識について紹介します。 未だにWebサイト高速化の具
【その手があったか】 Evernoteのユニークな使い方をまとめてみた-Six Apart ブログ｜オウンドメディア運営者のための実践的情報とコミュニティ
Evernote、便利ですよね。私は公私共にフル活用していまして、Evernoteなしでは生きていけないレベルです。 自分では、そこそこフル活用している自負がありますが、そうはいっても我流です。なので、ときどき、「自分の使い方、これでいいのかな？もっと、上手な活用法があったりするのかな？」って思うんですよね。 なにしろ、取扱説明書はないし（書籍はありますが）、他人のEvernoteを見せてもらう機会もないですから、他人が何の目的でどう使っているのか、興味津々なわけですよ。 検索したり、人から話を聞いて調べてみた結果、「こんな使い方があるんだ」、「その手があったか」といろんな発見があったので、紹介しますね。 ＜目次＞ こんなかんじで、5つにカテゴライズしてみました。 (*^_^*) 定番 (´・ω・｀) へぇ～ (・∀・) ｲｲ!! （；^ω^） 私だけ？ (・∀・)オススメ ■1．(*^_
ノンプログラマーでも何とかなる？WordPressで出来る事を集めてみた
ノンプログラマーでも何とかなる？WordPressで出来る事を集めてみた 2013.03.27 | WordPress | 初心者向け 先日、WP-Dメンバー執筆のプロが選ぶ WordPress優良プラグイン事典という本が出まして、いろんな方に読んでいただいてるようでありがとうございます、という夢を見て過ごす毎日です。Amazonの売上ランキング1位になりました。ワード部門で…。 どうも、グリーンです。 WordPressを使い始めた大きな理由は豊富なプラグインと情報。そしてアップデートの手軽さでした。 WordPress始めたばかりとかプログラム出来ないって人でも何とかなるかもしれないプラグインなどを紹介したいと思います。
「中国嫁日記」の希有馬さん「これからマンガブログはじめようと思ってる人に伝えたいことがあるのです」
井上純一（希有馬）新連載『逆資本論』の同志募集中 @KEUMAYA よし！！ コミケのサークルカット終わった！ これで微妙な原稿ラッシュ終了！ 嫁日記三巻の作業に戻れる！！ やったー！！ http://t.co/2uj4fc8P 2013-02-19 20:42:53 井上純一（希有馬屋）『逆資本論』発売中 @KEUMAYA 井上純一（希有馬）TRPGデザイナー。漫画家。玩具会社「銀十字社」代表取締役 代表作：スタンダードTRPGシリーズ（SRS）『アルシャードセイヴァー』、『エンゼルギア』、『天羅万象』他。最近は『中国嫁日記』のジンサン。 blog.livedoor.jp/keumaya-china/ リンク p.twipple.jp 希有馬（井上純一or弌）さんの写真をもっとよく見るにはURLをクリック！！ 「希有馬（井上純一or弌）さん@KEUMAYA: よし！！ コミケのサークルカ
スマートフォンなどに対応したレスポンシブデザインに関するCSSスタイル（font size自動調整をきるなど） - くらげだらけ
前にも一度、同じような問題に直面して調べて解決したような気がしたのですが、今回もおそらくその時と同じくGoogleで調べて解決したので、メモって忘れないようにしておこう。 font size自動調整をきる 最近ではレスポンシブデザインでいろんなデバイスに対応したりしますが、私もそんな感じの仕事をしていたわけです。最初はPC Chromeでwindowを伸び縮みさせながら作っていたわけですが、ある程度できた所でiPhone Mobile Safariでチェックしていたのです。Portrait mode（縦向き）では問題なく閲覧していたのですが、Landscape mode（横向き）にしたときにどうも文字サイズが変になります。 最近はiPhoneもリモートでWeb inspectorで見れたりしますから、細かく調べてみても数値的には問題無さそう。おかしいなってことで調べた後に、iPhoneでは
優れたUIデザインを作るために知るべき12のTips | Goodpatch Blog
こんにちは、だいきです。 海外のUIデザインに関する記事「14 Golden Eggs of Good UI Design（直訳: 優れたUIデザインの14の金の卵）」で書かれていたUIデザインに関するTipsがとても勉強になったので、その中からいくつか抜粋したものを翻訳しました！ （この記事はJohannes Thönesというブログの14 Golden Eggs of Good UI Designという記事の抜粋翻訳ブログです。） 1, 先進的な技術を使う理由 photo credit: Carlos Varela via photopin cc HTML5が新しい技術だからといって、それを使う必要性はありません。 新しい技術を使うことが目的になってはいけません。 ユーザーとユーザーが期待している事を考えてください。 どんなUX（ユーザーエクスペリエンス）をユーザーに与えたいですか？
WordPressをローカルにインストールする
2013年3月23日 Wordpress WordPressのオリジナルテーマの作り方について、今回より３作に分けて説明していこうと思います！まず１つめの記事：Wordpressをローカルにインストールする方法。ローカルで操作するとファイルをいちいちアップロードする手間が省けるので時間の節約にもなります。参照Webサイトは私の敬愛する世界的に有名なブロガーの一人、Nick La氏によるWeb Designer Wall。このサイトのデザインも素敵なのでぜひ覗いてみてください！ ↑私が10年以上利用している会計ソフト！ WordPress オリジナルテーマ作成 完璧ガイド WordPressをローカルにインストールする ←今ここ WordPress オリジナルテーマの作り方 3.0+ WordPress オリジナルテーマをアップロードする 簡単に手順説明 WordPressをローカルにインス
初心者が必ず押さえておきたいWordPressプラグイン7つ – Handmade Future！
こんにちは。寄金です。 いまWordPressで、当WEBマガジン『Handmade Future !』や『FutureCenterNEWS JAPAN』を含め、5つのサイトを運営しています。 ほんの1年前まで、はてなブログやら、一般のブログサービスを使っていたんですが、いまや戻る気は1ミリもありません。一つは「ブログは一生もののツールになるだろう」と考えているから。独自ドメインでコツコツとリンクを積み重ねていけば、検索流入がどんどん増えていきます。自分を知ってもらう優れた手段ですし、さまざまな出会いもあります。10年20年と積み重ねていったとき、必ず自分の財産になっていると思っています。 もう一つは、豊富なプラグインやテンプレートによるカスタマイズ性です。一般のブログサービスでも独自ドメインが利用できるケースがあるんですが、自由度はどうしても劣ります。ブログの目的にそって徹底的に最適化で
【Webデザイナー向け】11月なので好きなブログを告白する月：海外ブログ編2012
さて今年もやって参りました。 Myアルファーブロガーアワード2012。 今回はちょっと趣向を変えて、読んでいる海外ブログ等を。 Free Online Resources and Best icons fonts logos quotes wallpapers and designs@GraphicsLava.com 主にフリーアイコンや、WordPressなんかのTips、デザイン系の記事を紹介されているブログ。 最初の頃は車のデザイン、あかちゃんの写真、タトゥーといった写真をまとめていたのですが、だんだんと趣向がかわってきて今に至る。昔のなんでもまとめます感は結構スキでしたけどねー。 Designrshub - Design Articles, Inspirations, Resources and Freebies こちらもデザイナー向けのブログなので、Photoshopネタ、Wor
作業効率化！Dreamweaverのオススメ拡張機能まとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。デザイナーのハルエです。 Dreamweaverの数ある機能を十分に活用できてる方ってどのくらいいるのでしょうか？ 私の場合、これまで最低限の機能しか使ってこず、操作上でわずらわしく感じることでも我慢してたんです。で、そのわずらわしさも苦痛に感じなくなってきて、いつの間にか慣れちゃってました。いけない子ですね。 そこで今日は以前の私みたいな方のために、作業効率を良くするDreamweaverの便利な拡張機能やおすすめ設定術を紹介させていただきます。 閉じタグコメントを自動挿入：End_comment.mxp 閉じタグコメントはソースの構造をチェックしたりする時に便利なんですが、その都度書いていくのって手間ですよね。 この拡張機能は閉じタグコメントを自動で挿入してくれます。もちろんIDとclassもちゃんと認識してくれます。 コメントを生成して挿入するDreamweaver用の拡
ブログ | ウェビングスタジオ
十数年ぶりに就職して一所懸命働いているうちに、夏が過ぎ、秋が来て、クリスマスの季節になっていました。クリスマスケーキの予約のついでに買ってきたモンブランタルトを食べつつ、近況報告を書いています。 具体的なことは書けません […]
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
