紙面に近づけたい！HTML＋CSSで作る文字レイアウト12個 | PRESSMAN*Tech
印刷する紙のデザインと異なり、Webデザインは環境によって見た目が変わります。どの環境でも同じレイアウトで見せるには画像として書き出せば確実なのですが、テキストの部分はそうもいきません。 DTPデザイナーの方からも「こんな文字のレイアウトはWebだと無理？」といったご相談を受けることがよくあります。 今年に入って、HTML5＆CSS3に対応したブラウザのシェアもかなり増えてきましたので、今回は文字のレイアウトに関するHTMLとCSSをご紹介したいと思います。 目次：段組み縦組み（縦書き）行末揃え（両端揃え）先頭文字スタイル（ドロップキャップ）段落先頭1字下げ2行目から1字下げ（ぶら下げインデント）行頭禁則文字ふりがな（ルビ）圏点（傍点、脇点）大文字と小文字の変更スモールキャップス（スモールキャピタル）長体、平体（水平比率、垂直比率）※IE以外のブラウザは、2014年7月4日現在の最新版にて
知っておいてよかった！Web制作時に効率上げる「便利」なCSSテクニック - コムテブログ
TL;DR 少し前にサイト制作でさりげなく使われている CSS テクニックをまとめましたが、今回はそれを補足する形で、これから増えそうなもの、使っていきたいものを今後忘れないようにメモしておきます。 Photoshop ののように、乗算・オーバーレイなど背景色と背景画像を混ぜあわせたり、写真に色々な効果を付与することができるbackground-blend-modeプロパティ。シンプルな例では、以下のように背景写真と背景色を合成することが可能です。 .blended { background-image: url(face.jpg); background-color: red; background-blend-mode: multiply; } 効果一覧：multiply／screen／overlay／darken／lighten／color-dodge／color-burn／hard
2014年これからのウェブ制作業界の流れ、伸びる職種、ウェブデザインのトレンドなどのまとめ
数多くのブログで2014年のトレンドをさまざまな切り口でポストしているので、その中から特に印象的で共感がもてたものをまとめて紹介します。 キーワードとしては、スマフォ・タブレットなどの小さいサイズのタッチデバイス、レスポンシブ（特に画像）、HTML5/CSS3、ビッグデータ、リスク管理が注目されています。 2014年、ウェブ制作業界全体の流れ ウェブデザインの2014年のトレンド 2014年に大きく変化するウェブデザインの7つの傾向 2014年、注目度の高いIT系の職種・役割 2014年、ウェブ制作業界全体の流れ まずは、2012, 2013年と的確な予測をだしてきたsitepointの2014年のウェブ制作業界の全体の流れから。 10 Web Predictions for 2014 スマートフォン中心の年 最終的にはデスクトップからのアクセスをスマフォが超える HTML5のウェブアプリ
[CSS]背景画像をブラウザいっぱいに表示するシンプルな最新テクニック
背景画像をブラウザいっぱいに表示するスタイルシートのシンプルなテクニックを紹介します。 デスクトップだけでなく、スマフォやタブレットにも対応、しかもたった一行なのでスニペットに加えておくと便利です。 デモを幅480pxで表示 コンセプト 「background-size」をビューポート全体をカバーするために使う 「background-size」はレスポンシブ対応にする時に非常に有効なプロパティです。値に「cover」を使うことで、背景画像を相対的に自動で調整します。 ※IE8以下はサポートしていませんが、後述のスクリプトを使用するとbackground-sizeが機能するようになります。 「Media Queries」をスマフォ対策として使う スマフォなどの小さいサイズのスクリーン用にMedia Queriesを使って、小さいサイズの画像ファイルを使うことができます。もっともこれはオプシ
[CSS]レスポンシブ対応、スクリプト無し、完成度も非常に高いタブコンテンツを実装するテクニック
スクリプトは一切使用せず、デスクトップ時はタブコンテンツ、スマフォ・タブレット時はタブをスケールダウンに変更してコンテンツを表示するスタイルシートのテクニックを紹介します。 単にレスポンシブ対応のタブというだけでなく、コンテンツの切替やタブのホバーエフェクトなど、非常に完成度の高いタブコンテンツに仕上がっています。 スケールダウンの仕組み 実装はこんな感じになります。 HTML まずは上部のコントローラー、このラジオボタンで各タブの動きを制御します。 デザインを変更して利用したり、タブのみにしたい場合は非表示にするのも有りですね。 <!-- TAB CONTROLLERS --> <input id="panel-1-ctrl" class="panel-radios" type="radio" name="tab-radios" checked> <input id="panel-2-c
Webデザイン初心者でも手軽に使えるダイアログ／通知ライブラリALERTIFY.js
Webデザイン初心者でも手軽に使えるダイアログ／通知ライブラリALERTIFY.js：HTML5アプリ作ろうぜ！（12）（1/2 ページ） ダイアログ／アラート／Notification（通知）を見栄え良く簡単に使用できるJavaScriptライブラリ「ALERTIFY.js」の概要と基本的な使い方をサンプルを交えて紹介します。 最近はやりのHTML5、JavaScriptライブラリ、CSS3、API、またそれらを組み合わせたサンプルアプリを解説していく本連載「HTML5アプリ作ろうぜ！」。今回紹介するライブラリは「ALERTIFY.js」です。 ALERTIFY.jsとは 「ALERTIFY.js」は見栄えの良いダイアログ／アラート／Notification（通知）を簡単に使用できるライブラリです。短時間で既存のWebサイト／WebアプリのHTMLに記述できるのも魅力です。また、コントロ
エクセルシートをHTMLテーブルに変換しちゃう君 (ββ)
STEP1. エクセルとかからCSV (TSV)をコピーしてを貼り付け STEP2. オプションを選択して変換 細かい設定 列目までをTHEADとする。(0でTHEADなし) TBODYの行目までをTHとする。 TBODY THに深度を埋め込んだクラス名を追加する。(1〜) クラス名： " + n" ひとつめのTHに深度クラスを追加しない。(lv1を追加しない) n列ごとにTRにクラス名を追加する。(0〜) クラス名： 列数 ： クラス名に列数を追加する。(nrow0, nrow1,,)
ウェブ制作者がチェックしておきたいアイデア満載のUIを備えたウェブデザインのまとめ -2014年上半期
うまくトレンドを取り入れ、デザインの細部まで徹底的にこだわり、気持ちのいいインタラクションとアイデア満載のUIを備えた素晴らしいウェブサイトを紹介します。 画像の一部だけ動くシネマグラフを使ったコンテンツ、ペルソナを使ったユーザー中心のレイアウトなど、最新のトレンド情報もお見逃しなく！ VOTD.tv シンプルですっきりしたデザインだけでも素敵ですが、ロゴ、ナビゲーションやサムネイルやコンテンツなどの随所に仕掛けたインタラクションの芸が非常に細かく、楽しませてくれます。
登録不要で無料のWebサイト分析ツールとサービス8選！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、株式会社LIG 執行役員の寺倉と申します。 自社サイトの分析、競合他社、類似サイトの発掘と分析は、KPI設定や改修、WEB戦略を立てる上で非常に重要です。 今回は登録不要、かつ無料で使えるサイト分析ツールとサービスを8つほどまとめてみました。これが誰かのお役に立てば幸いです。 株式会社LIGとは 2007年設立、東京都台東区発のWeb制作会社。年間150サイトリリース、毎年複数のWebデザインアワードを受賞。Web制作だけでなく、月間200万PVのWebメディア「LIGブログ」で培ったマーケティングのノウハウを生かした企画力、複数の海外拠点を生かしたシステム開発力も強み。 👉Web制作実績 お問い合わせはこちら マジで使える無料のWebサイト分析ツール&サービス8選 類似サイト検索：Google（コマンド検索） https://www.google.co.jp/ 類似サイトを
Photoshopの最近の気になるテクニックを身につけるチュートリアルのまとめ
ポリゴン、シェイプアート、ブラー、等高線、ジオメトリック、ラインアート、シネマグラフなど、最近の気になるデザインのテクニックを身につけるPhotoshopのチュートリアルを紹介します。 時間をつくって、一つずつじっくりと攻めていきたいですね。
Photoshopでの作業がはかどる便利なプラグイン・機能拡張のまとめ
Illustratorでウェブデザインをおこなう人が増えてきましたが、やはりPhotoshopをベースにしているデザイナーさんが多いと思います。そんなPhotoshopを更に便利にパワーアップするプラグイン・機能拡張を紹介します。 ここで紹介するものは、当方の日本語環境（Win/Mac, CS6/CC）で利用しています。 面倒なガイド引きをパワーアップする強力な味方 等間隔ではないガイド引きを簡単に設定できる 選択範囲やオブジェクトを元にガイドが引ける さまざまなオブジェクトのカラーを一元管理できる 要素のサイズやエフェクトやフォントなどの情報を書き出す PNG画像をより美しく、より軽量に書き出す 黄金比、黄金螺旋、黄金三角形、1/3ルール、対角線などを簡単に描く Subtle Patternsのテクスチャ素材をPhotoshopから利用できる flat iconのアイコン素材をPhoto
写真をほんの少し上手く見せる50のテクニック - あたし、めりーさん。今、あなたが心の中にいるわ。
編集編 1. 使えるものはOffice Picture Managerでも使え Lightroom, Photoscapeその他いろいろありますが、使えるものはなんでも使いましょう。撮って出しなんて中級者になってから考えればよいのです。 クソ写真も編集次第でどうとでもなります。 wonodas.hatenadiary.com 構図編 2. 自信がないなら3分割交点構図 三分割交点構図は七難を隠します。いたるところでおすすめされているのはそんなわけです。 デジカメならたいていガイドが付いているのでそれに従ってとればよいだけ！簡単です。 (Nikon D90/Nikkor 50mm f1.4) 3. 日の丸構図は真上または真正面から。水平と垂直をきっちりとること 実は難しい日の丸構図。撮るなら真上、真下。水平と垂直は必ず出す。なお画像内に直線が含まれる場合、収差の少ないレンズを選ぶ必要がありま
ウェブデザイナーの勉強にいい！デザインの基本原則からPhotoshopの実践的なテクニックまで学べる無料のeBook -Pixel Perfect Precision 3
デザイナーさん・ディレクターさんをはじめ、ウェブデザインに携わる全ての人に必携です！ デザインの基本原則をはじめ、Photoshopを使った実践的なさまざまなテクニックが学べるeBookを紹介します。無料なのに市販の書籍に負けない、いや人によってはそれ以上の価値ある内容がぎっしり詰まってます。 Pixel Perfect Precision 当ブログでもお馴染みのPixel Perfect Precisionの第3版が、昨日リリースされました（パチパチパチパチ） 内容も大きくバージョンアップし、ページ数も165ページから214ページへと大増量。 デザインにおける、配置の基本原則、可読性を考慮したテキスト、カラーマネジメントなどをはじめ、ファイルの効率的な管理方法、Photoshopでのウェブに最適な初期設定、レイヤー管理、Illustratorのウェブで使える実践的なテクニックなど、満載の
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Photoshopで画像をキレイに切り抜こう | NPO法人クリエイター育成協会 公式ブログ - Web・デザイン・教育・福祉、各種分野で役立つ情報をお届けします！
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
WEBサイト制作時に使う、情報共有ツール | NPO法人クリエイター育成協会 公式ブログ - Web・デザイン・教育・福祉、各種分野で役立つ情報をお届けします！
CSS3アニメーションをブラウザ上で簡単に作成・編集できる『bounce.js』 | 100SHIKI
awesome-css-tutorials-2014-spring.html