今こそデザイナーもGitと向き合う時代 - DMM.comラボ デザイナーズブログ
デザイナーの皆さんこんにちは、フロントエンドエンジニアしてます石橋です。 今やGitは開発のスタンダードですが、未だデザイナーには浸透しきっていない現実があります。 しかしHTMLなどのコードを触る以上、デザイナーであってもGitを覚えてしまえば効率的な業務遂行がきっと出来るはず！私はそう信じてます！ 今回はそんな「覚えてみたいけどよーわからん」デザイナーに向けて、１記事書いてみたいと思います。 メリットを知る まずはGitを使うことで何が良いのか？を理解することが大事です。 ここがわからないまま学んでも、ただ面倒な作業が増えるだけでいずれ元に戻るのは想像に難しくありません。 ファイルの巻き戻し 図のようにファイルをコピーしてやりくりをしている人がいるかもしれません。 時代遅れだ！ こんなことをする原因は、あとからロールバックが出来ないことにあります。 Gitならコピーを残しておかなくても
CSSで片方可変、片方固定のカラムレイアウトを実装する方法 - NxWorld
CSSで片方の幅が可変で、もう片方の幅が固定というタイプのカラムレイアウトを実装する方法を全4パターン紹介します。 対象ブラウザやOSなど環境によっては使えないものもありますが、全て同じ見た目（レイアウト）を実装することができます。 HTMLと実装イメージについて 紹介する方法はいずれも下記のようなHTMLを使用したものになり、ご覧のようにメイン・サイド・それらを括る親要素の3つのdiv要素で実装していきます。 <div class="wrapper"> <div class="main"> <!-- 可変 --> </div> <div class="side"> <!-- 固定 --> </div> </div> また、今回はこのイメージのようにdiv class="main"（青い背景色の領域）を可変、div class="side"（赤い背景色の領域）を固定にそれぞれする方法で、固
そろそろ真面目に、HTMLで帳票を描く話をしようか - Qiita
帳票といえばPDFとして生成するのが一般的でしょうか? でも、2015年の今、あえてHTMLで描くのがホットです(個人的に)。ミリ単位で設定された高度な帳票も、CSSを駆使して簡単に作ることができます。業務システムでもモダンブラウザを選択することが増え、@pageなども積極的に使えるようになったこと、SPA(Single Page Application)の台頭、いろいろと条件が揃ってきました。 書いてたら結構長くなっちゃったので、さくっとコードだけ見たい方は、Paper CSSリポジトリをどうぞ。 はじめに HTML帳票のメリット 2015年現在、HTML帳票を選択する幾つかのメリットがあります。 ライブリロードで、リアルタイムなスタイル調整 バックエンドではなくフロントエンドで生成できる 前者は、gulpやGruntの普及で、CSSにしろHTMLにしろ、リアルタイムにプレビューできる環
素晴らしい！HTML+CSS+jQueryで絵本のようにページをめくっていけるぜひ参考にしたいコード | 9ineBB
絵本をクリックしていくと、ページが次々にめくっていけるようになっています。また、逆方向にもめくることが可能です。さらに画面幅に合わせて大きさも変わるリキッドデザインです。 とにかく、ページのめくれ具合 ページのめくれた後のちょっとした動きがとても良く出来ていてクオリティーが高いです こうった形のギミックをWEBサイトに導入するときにはぜひ参考にしたいコードです – CODE – HTML <div class="book bound"> <div class="pages"> <div class="page"> <h1>Boyhood</h1> <h2>by Jason Hibbs</h2> </div> <div class="page"><!--endpaper--></div> <div class="page"><!--endpaper--></div> <div class="
Web制作者なら押さえておきたい「HTML5」「SEO」「SMO」に関する公式ドキュメントまとめ8選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは！ LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 最近よく、無料動画のオンライン学習サイト「schoo」さんで授業させていただく機会があるのですが、先月のHTML5の授業はおかげさまでものすごく視聴していただいたようです。ありがとうございます。 具体的な数字はよくわからないのですが、なんかこう、とにかくものすごく視聴していただいたようです。 そのHTML5の授業を行う際に、改めてWeb上で資料を集めまくったのですが、HTMLとかSEOの情報は誤解も多いので、やはり一番信頼できるのはW3CとかGoogleとかの公式文書だと思うんですね。 そんなわけで、今回はHTML5、SEO関連で信頼性の高いであろう公式文書をまとめてみました。ご覧くだされ。 もくじ HTML5関連 HTML5 | W3C HTML Living Standard | WHATWG H
検索じゃ学べない！ HTML/CSS/JavaScriptの気づきTipsまとめ31こ | _level0 - KAYAC Front Engineer Blog
HTMLファイ部のほんだです。 気づきTips！ Σ(・ロ・) カヤックの中でもHTML5のWebフロントエンド実装を担当する エンジニアを集めた部署「HTMLファイ部」では、 制作にあたってはまったことや、気づいたことをメモ的に蓄積・共有しています。 通常は、 1. 制作で何かわからないことがでた ▼ 2. Google等で検索して解決の糸口をさがす ▼ 3. こんな方法があったのか〜 と気づきを得る というフローでスキルアップしていくことがもっぱらだと思うのですが、 学びを増やしていくためには違うアプローチも必要なんじゃないかと思います。 カヤックHTMLファイ部では、 1. みんなで蓄積したTipsをざぁっと読む ▼ 2. こんな方法があったのか〜 と気づきを得る ▼ 3. 制作の際に導入していく というフローを繰り返し実践していくことで、 検索では気づけないことを学び、実装力アップ
2014年 Web 制作に使い始めてよかったツールとかいろいろまとめ | WP-E (仮)
何処かで聞いたことのあるタイトルですか? 気のせいです。Web 制作業3年目のぼくが2014年に取り入れてよかったあれこれリストアップしてみます。残念ながら2014年の最新はこれだ! という感じにはならず以前からあるものが殆どになりましたが、2014年と共に水に流して頂きますようお願いします。 BEM https://bem.info/ 最初の拒絶反応から一転、もう BEM 無しに CSS 設計はできなくなりました。BEM の思想に対して記述の方式は色々ありますが、ぼくは block__element--modifier と接続する MindBEMding の書き方をしています。 Template engine (Jade) http://jade-lang.com/ 静的サイトや CMS サイトのプロトタイプモデルとして html を 生成する際に重宝しています。ぼくは Jade を使用
ベストなHTMLの書き方が分かるドキュメント「HTML Best Practices」 | ソフトアンテナ
現在のインターネットに欠かすことができない技術としてHTMLが挙げられと思います。Webブラウザは大抵のHTMLを解釈してくれるので、普段はあまり厳密な書き方を意識していない方もいるかもしれませんが、開発者やデザイナならば仕様にのっとった正確なHTMLを書きたいところですよね。 そんなときに役立つ情報が「HTML Best Practices」です。スケーラブルでメンテナンス可能なHTMLドキュメントの書き方を解説したドキュメントで、どういう書き方が望ましいのかざっと確認することができます。 悪い例と良い例がタグごとに比較可能で分かりやすいです。なぜ悪いのか、なぜ良いのかという理由が書かれていないのが残念ですが、確認用には使えそうです。
2014年のWebデザインのトレンドがたくさん詰まったHTML5+CSS3の無料のテンプレート -Beetle
レスポンシブ対応の縦長ページ、プロダクトページ、ランディングページ、ポートフォリオ、ブログなど、今時のかっこいいエフェクトを備えたHTML5+CSS3の無料のテンプレートを紹介します。 そのまま使うもよし、スキルアップ用に勉強してもよし、です！ Beetle - Responsive HTML5 Template Beetleには、最近のWebサイトで人気のあるさまざまなコンポーネント・エフェクトが用意されています。大きい背景画像をつかったヘッダ、カード型のレイアウト、サークルを使ったエレメント、パララックススクロール、スクロールをトリガーにしたエフェクトなど、今年のWebデザインのトレンドがたくさん詰まっています。
専門知識不要で瞬時にWebサイトのクオリティチェックができるツール7選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは！ LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 非エンジニアの皆さんに朗報です。本日はWebサイトのクオリティチェックに関するすごいツールをたくさん紹介します（どーん）。 Web制作に関わるディレクターや担当者は、ソースコード自体は書かなくとも、イメージ通りのものができているかのどうかの確認はされていると思います。 しかし、パフォーマンス、SEO対策、ソースコードの整合性などの裏側までが「ちゃんとできているのか」というのはわかりにくいですよね。エンジニアに「いや、完璧ですけどこれ？」ってどや顔されたら頷くしかないと思います。 そこで今回は、知識がなくともその辺りのクオリティチェックが簡単にできるツールを紹介します！ これらを使えば、ざっくり「完璧」「まあまあ」「ヤバい」くらいの判断ができるので、作業者にツールの結果画面を見せて「なんとかして！」と伝
HTMLメール制作のコツや便利なサービスいろいろ
HTMLメール制作のコツや便利なサービスいろいろみなさん、購読しているニュースレター（メールマガジン）はありますか？私は利用しているWebサービスや趣味関連のものをあわせてだいたい10サイトくらい購読しています。どれも素敵なデザインのHTMLメールばかりで、見ていて楽しくなっちゃいます :) そんなわけで今回はそんなHTMLメールの現状や、制作時のTipsを紹介します。効果的な導入方法を一緒に考えてみましょう！ HTML メールとはテキストのみのメールではなく、テキストに色がついていたり、画像が挿入されている、HTML を使って設計されたメールのことを HTML メールと呼びます。海外では大手 Web 系企業をはじめ、多くの会社が HTML 形式のニュースレターを配信しています。私が購読している Web サービスのニュースレターやブログの更新通知メールはすべて HTML メール。昨年日本の
Open Source Email Templates – オープンソースなHTMLメールテンプレート集
HTMLメールの認知度は十分にあがってきていると思います。かつてのようにセキュリティリスクはなくなってきたのではないでしょうか。ただ、それでもなかなか使われないのは、作成が難しいということがあるかと思います。 特にスマートフォンやタブレットを想定したレスポンシブなHTMLメールはまだまだ知見が少ないように思います。そこで使ってみたいのがOpen Source Email Templatesです。 Open Source Email Templatesの使い方 Open Source Email Templatesでは多数のHTMLメールテンプレートが用意されています。 HTMLメールとあって、コンテンツ部分を大事にデザインはシンプルなものが多いようです。これらをベースに、カスタマイズして使うようにすれば各デバイスで表示しても崩れることなく送信できるようになるでしょう。 Open Sourc
Etsy: レスポンシブなHTMLメールをつくる - ワザノバ | wazanova
http://codeascraft.com/2014/03/13/responsive-emails-that-really-work/ 1 comment | 0 points | by WazanovaNews ■ comment by Jshiike | 約4時間前 HTMLメールは、 AndroidのGmailはインラインCSSしかサポートしてない。<style>タグは効かず、media queryは使えず、外部のスタイルシートに頼れない。 Gmail.comはHTMLのサポートが限定されている。HTML5のものを含めてサポートされてないタグが多く、classやIDなどの属性が使えない。インラインCSSのみ使え、<style>タグもかなり制限されている。 iOS / Mac OS Xのメールアプリは、media queryや多くのCSSが利用できる。 という状況なので、レスポン
Responsive Email Design 〜モダンなHTMLメールの作り方 | Preview
Responsive Email Design 〜モダンなHTMLメールの作り方 本書の内容 2014.07.14: Ver. 0.2.2現在（PDF換算109ページ） はじめに Chapter 1 なぜ、Responsive Email なの？ その配信メール、本当に読まれてますか？ 実際のメールで起きていること 海外の事例を見てみよう Chapter 2 HTML Email の基礎知識 HTML メール作成の基本 HTML メールで使える要素とプロパティ HTML メールにおける画像 Chapter 3 Responsive Email の基本 Responsive Email とは 多様な環境をサポートするには？ 設計時、実装時の注意点 Chapter 4 Responsive Email を作ろう 1カラムのメールを作る カラムレイアウト、そしてレスポンシブ メールテンプレートを
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML/CSSも吐き出す超お手軽な世界地図素材作成サービス「Pixel Map」
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
リアルタイムでプレビューできるHTMLエディタ｢CODECAST｣ | ライフハッカー［日本版］
WebデザインやHTMLやCSSを基礎からしっかりと学べる動画コンテンツ、日本語解説だから分かりやすい！
HTMLのテンプレート的なの - Qiita
HTMLメールのお手本をまとめたサイト「Really Good Emails」 | ライフハッカー・ジャパン
