質の高いスタイルガイドを作成するために考えておくべきこと ｜ Tips Note by TAM
TAMでは規模の大きな企業さまと仕事をすることが多いので、スタイルガイドを使った案件も比較的多いです。 数百ページ規模のサイトのスタイルガイドを作成してきましたが、考え方が少しずつ固まってきました。そして、この考え方はコードを書く人だけがもっていればいいわけではなく、ディレクターやデザイナー、部分的にはクライアント（発注者）にも共有しておく必要があると感じています。 この記事を読んだあとに、スタイルガイドを作るうえで考えておくべきことを知り、全員のスタート地点を揃えることができればいいなと思っています。 コーディングの知識がないとわからない箇所もありますが、冒頭にコーディング担当者以外に向けた要約を入れているので安心してください。 内容は以下のようになっています。 スタイルガイドを使うメリットとデメリットを共有する コーディング前に情報設計とデザインを固めておく ページの量産までにスタイル
CSSだけで画像トリミングできたよ ｜ Tips Note by TAM
サイズや比率がバラバラの画像を、CSSで同じサイズにトリミング（はみ出た部分をカットして表示）する方法を紹介します。 運用案件やCMSなど、更新の度にサイズ・比率がバラバラの画像がアップロードされてしまい、レイアウトが崩れると困りますよね。また、更新を担当する人がWebに詳しくないクライアント様であったり、担当者のスキルによっては画像を加工することが難しい場合もあると思います。 CSSで調整するようにしておくと、画像サイズがバラバラでもある程度レイアウトを揃えることができます。 やり方 HTML構造は、トリミングの枠になる要素で、画像を囲む必要があります。 例では<div>を使っていますが、<p>や<li>でも問題ありません。外側の枠はブロック要素が良いようですので、もしインライン要素を使う場合はdisplay: block;にしておくと良いと思います。 CSSのトリミングは、パターンによ
画像なしで表現するリストマークのサンプルいろいろ ｜ Tips Note by TAM
行頭記号やリストマークなどの装飾を、画像なしで実現する方法で普段よく使うものをリストアップしてみました。 今回は、 先頭に何かしら装飾をつける 2行目以降の先頭を1行目と揃える 以上の2点をリストアップの条件にしました。 サンプルはこちらです。 sample1 装飾文字を直接記述（全角のみ対応） サンプルはこちら まずはシンプルに、直接HTML上で行頭に「※」を挿入する方法。 2行目以降の先頭が1行目と揃うように、text-indentで「※」の1字分下げてやります。 そのままだと行の先頭が1字分左に寄ってしまうので、その分左マージンを取って調整します。 p { text-indent: -1em; margin-left: 1em; } ※ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト sample2 装飾文字を直接記述（全角・半角どち
Sketch3とPhotoshopのプラグイン Craft を使って制作を楽にしよう ｜ Tips Note by TAM
Craftについて プロトタイプで有名なInVisionから出ている、 ダミーデータを挿入して作業を自動化できるSketch3とPhotoshopの無料プラグインです。 公式サイト http://labs.invisionapp.com/craft ライセンス https://labs.invisionapp.com/craft-license InVision https://www.invisionapp.com サポート環境 OS X version 10.10 〜 windows 古いバージョンは動くものがあるみたいですが、今後はOSXへ注力するそうです。(こちらの「Is Windows still supported by Craft?」より) Photoshop CC 2014.1 〜 Sketch 3.4 〜 本記事での確認環境 Craft version 1.2.1 OS
Sketch3のプラグインCraftでinVisionとの連携が楽になる「Sync」機能搭載 ｜ Tips Note by TAM
こんにちは(こんばんは)。 今回は、Sketch3のプラグインCraftの新機能「Sync」とwebサービス「inVision」についてご紹介します。 Craftとは ダミーデータを挿入して作業を自動化できるSketch3とPhotoshopのプラグインです。 公式サイト https://www.invisionapp.com/craft 「Sync」機能とは... Sketch上で簡単にwebサービス「inVision」と連携できる 2016.11.19現在 ベータ版 以前のCraftについての記事 Sketch3とPhotoshopのプラグイン Craft を使って制作を楽にしよう https://www.tam-tam.co.jp/tipsnote/html_css/post9091.html Sketch3のプラグインCraftを使ってJSONを読み込もう https://www.
Sassの変数とmixinで変更に強いメディアクエリをつくる ｜ Tips Note by TAM
レスポンシブWebデザインではメディアクエリ（media queries）を書くことが多くなります。通常のCSSではブレイクポイントを変更したくなったときに、すでに書いてしまった箇所を直していくのはとても大変です。 Sass（scss記法）を使えば、変数や@mixinを使うことで1箇所で管理することが容易になります。今回はSassでメディアクエリを管理する方法を紹介します。 ブレイクポイントを変数（マップ型）で定義する メディアクエリにはブレイクポイントと呼ばれる処理を変更する横幅を決めます。通常のSassの変数でブレイクポイントを定義した場合は以下のようになります。 $breakpoint-sm: 400px !default; $breakpoint-md: 768px !default; $breakpoint-lg: 1000px !default; 今回は変数は変数でも、マップ型
【WordPress】WordPressでサイトを作るときに導入するプラグイン ｜ Tips Note by TAM
私がWordPressを使用してサイトを構築するとき、 必ずといって良いほど使用するプラグインについてご紹介します。 ※基本的なSEO系プラグインなどは除外しています。 目次 Advanced Custom Fields Category Order Breadcrumb NavXT PS Disable Auto Formatting TinyMCE Advanced オマケ ■Advanced Custom Fields http://wordpress.org/extend/plugins/advanced-custom-fields/ カスタムフィールドを拡張してくれるプラグインです。 カスタムフィールドの設定が容易 カテゴリーやタグにもカスタムフィールドが追加できる 設定できるフィールドが多彩！ 1.カスタムフィールドの設定が容易 カスタムフィールドの追加がかなり容易です。 他の
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TAM COWORKING（TAMのコワーキングスペース）