1ページで完結、Web制作者が助かるチートシート・資料・PDFまとめ
作成：2015/08/10 更新：2017/04/16 Web制作 > 開発環境 ページを移動せずにテンプレートや仕様書を確認したい。今回はPCの横に貼ったり印刷したり、ワンクリックで見れるように、1ページで完結している資料をまとめました。Web制作をする上で便利なチートシートや資料・仕様書まとめです。 エンジニア速報は Twitter の@commteで配信しています。 もくじ WordPress版 受託用マニュアル １．ヒアリングシート ２．WP版ホームページ制作の流れ ３．WordPress管理マニュアル ４．WP版品質チェックシート ５．Wordpress タグ タスクランナー ６．gulp ７．Bower JavaScript 代替言語／JST ８．TypeScript ９．CoffeeScript １０．Jade コーディング用 １１．Chrome 開発ツール １２．html5
メンテナブルCSS | 株式会社サイバーエージェント
概要 メンテナブルなCSSを目指し、定義された一般的なCSSルールの紹介と、それらのルールを適用するにあたって活用できるツールを報告します。 1. 序論 CSSは記述ルールが簡素であり、少しの学習コストですぐに記述ができる手軽なツールです。 しかし、大規模なアプリケーションで複数人で開発するケース等では、見栄えだけしか考えずに身勝手にコーディングしてしまうと、 非常にメンテナンスコストがかかる負の遺産が作られてしまいます。 そのためCSSの品質を保つために様々なプロジェクトで、CSSの定義ルールが決められています。 本稿では一般的なCSSの定義ルールと、そのルールがなぜ作られたのかを合せて報告致します。 また、CSSのルールを適用するにあたって、手動・目視でルールの適用をチェックするのは非常にコストが高い作業です。 これらルールの適用を補助するツール群を、合せて報告致します。
box-shadowで表現する、「セミフラット」なズルいデザインテクニック
box-shadowで表現する、「セミフラット」なズルいデザインテクニック：ズルいデザイン（3）（1/2 ページ） 世の中、フラットデザイン流行りですが…… iOS 7がフラットデザインを採用したのを皮切りに、Webデザインのトレンドがフラットデザイン一色になってきましたが、立体感を完全に排した色面と空間、シンプルな描画の組み合わせだけのデザイン表現は、ある種ごまかしが効かず、また適切な利用方法を喚起させるようなUIも表現がなかなか難しいものです。 例えば、「ボタンは押せるもの」であると表現するための「押したくなる感じ」を喚起させる立体感は、ユーザビリティ面でもまだまだ有効です。今回は、流行のフラットデザインの中でも違和感なく使えて、また適切なアフォーダンスの表現が可能になる、「やりすぎていない立体感」を目指した、box-shadowを活用した各種ボックス表現の作り方を紹介します。 NGな
同人告知サイトつくるときのノウハウまとめ - MEMOGRAPHIX
同人誌の告知ページを作るの、だんだん知見がたまってきたのでノウハウを御シェアさせていただきます。昨日こういうの作った。 ↓ パッケージ等でよく見る「あの短い英文」の正体って何なの？ 同人誌「プロダクトポエトリー研究」をC84にて無料で配布します – 日本同人誌デザイン協会 サイトは Wordpress で構築している。理由は予約投稿機能を使って公開時間の指定ができるからです。 ティザーサイトまずティザーサイトを作った。こんな感じ。↓ カウントダウンの部分には、以前作って GitHub で公開していたカウントダウンタイマーを使っている。CSS いじって今風にした。まだこの段階では内容が悟られないようなデザインにする必要がある。 CSS3 Countdown - sanographix ティザーサイトを作る理由は、公開した瞬間の勢いが良いと結構拡散すると思っているから。Google Analy
HTML5 × CSS3 × jQueryを真面目に勉強 – #16 レスポンシブWebデザインでテーブルを最適化するベストプラクティス | DevelopersIO
dislay 属性についてもっと知りたいという方は、こちらのサイトを参照ください。 display - CSS | MDN 要するに何が言いたいかというと、テーブルもまたスタイルシートの display 属性によってその形状を実現しているに過ぎず、この値を色々と操作すればスマートフォンのようなスクリーンサイズの狭い環境にも最適化された表示が出来るのではないかということです。 実際に作ってみた - 下準備 今回は4パターンの表示を紹介します。まずは下準備として簡単なテーブルレイアウトと元となるスタイルを組んでいくとします。 はじめに HTML で適当なテーブルを作ります。 <table class="table table-striped table-responsive"> <thead> <tr> <th>First Name</th> <th>Last Name</th> <th>Ag
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
◎ [CSS] 「 iOSが勝手に変更してしまう」ボタン型input要素のデザインへの対策まとめ![◎ [CSS] 「 iOSが勝手に変更してしまう」ボタン型input要素のデザインへの対策まとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/f7af9e8d388f5bf3bf44753200aea82deed147de/height=288;version=1;width=512/https%3A%2F%2Fblogger.googleusercontent.com%2Fimg%2Fb%2FR29vZ2xl%2FAVvXsEg3uhsimC6NatOhwPZpCI21-J0mehmVDkbviRci5zG_uhwzkwXIOzga0w0WGdaC73bOSVwifJUzd6FC77K3FD789EI7_gP7-mKI6pbhZ7UvLdI8OUN2P2o6M57T5wudvAmZlV_CIy6gwuE%2Fw1200-h630-p-k-no-nu%2Fios-macos2.png)
Bootstrapは無し、HTML5とCSS3のシンプルなコードで実装されたレスポンシブ対応のテンプレートのまとめ
compass-style.org is almost here!