こんにちは、LIGブログ編集部です。 LIGブログを読んでくれている皆さんの中には、自身でもブログを書いているという方も多いと思います。 しかし、HTMLタグを自分で入力しながら書いている、タグの意味を理解しながら使っている、という人は少ないかもしれません。 最近では、HTMLタグが全くわからなくても、同じような書式の効果が手軽に反映できるブログサービスもたくさんあります。 でも、そのような設定でブログを書こうとすると、改行のときにフォントが崩れたり、勝手に斜字になったり、思わぬストレスになることもありますよね。 実はこれ、HTMLを書式に自動で反映する仕組みにも限界があり、全てを正確に反映できるわけではないことが原因です。 それを修正したり、根本的に防止するためには、HTMLの知識が必要になります。また、せっかくブログを書くからには、しっかりとHTMLタグの意味を理解し、入力していきたい

ColorTester (JIS X 8341-3:2010 に基づき背景色と前景色のコントラストチェックを行うソフト)を公開します。 ColorTester - JIS X 8341-3:2010 (WCAG 2.0)の達成基準に基づき背景色と前景色のコントラストのチェックを行うソフトウェア ※9月6日(土)更新 : 更新しました(Ver. 1.0 r33)。より正確に画像から色を取得できるようになりました。 ColorTesterは2色のコントラスト比を計算し評価するツールです。コントラストの評価はJIS X 8341-3:2010 (WCAG 2.0)の達成基準に基づきます。Mac OS X及びWindowsに対応しており、日本語と英語に対応しています。 コントラスト比 - ウェブ・コンテンツ・アクセシビリティ・ガイドライン (WCAG) 2.0 Mac OS (OS X 10.7以

OGP画像シミュレータとは？ FacebookのOGP画像は正方形で表示されたり横長で表示されたりするため、デザインがとても大変。 そんな時に便利なのがこのOGP画像シミュレータ。 デザインしたOGP画像をドラッグ&ドロップし、タイムライン上でどう見えるかシミュレートしてみましょう。 https://ogimage.tsmallfield.com/ 1200 x 630 px 以上推奨 https://developers.facebook.com/docs/opengraph/creating-object-types/#properties 最低でも 600 x 315 px、また大きければ大きいほど良いため 1200 x 630 px 以上の画像サイズが推奨されています。画像がクリッピングされるのを防ぐため、縦横比をなるべく1.91:1に近づけるようにしましょう。 （2014年01月

Web フォントは「Web サイトにフォントを埋め込む」ための技術です。 先日、Web フォントを使った 絶対にコピペできない文章を作ったったwwww を公開しました。多くの人に楽しんでもらえたのですが、その一方で、Web フォントが適用されなかった方から「コピペできるんだけどどういうこと？」「意味が分からない」というコメントがよせられました。 ほぼすべてのブラウザーが Web フォントに対応しているはずなのですが、一体、何が原因だったのでしょうか。 そこで、Web サーバーのアクセスログを解析して「Web フォントに対応していない環境」がどの程度あったのかを調べてみました。 ４種類のフォーマット 一口に Web フォントといっても、フォントのフォーマットは WOFF・TTF・EOT・SVG の 4 種類あります。今後は WOFF フォーマットが標準になっていくのですが、現在ではサポートし

ページャーなどでよく使うCSSテクニックです。 横並びしつつ、そのブロック全体は左右中央にセンター揃え。 inline要素なら簡単に中央揃えできますが、block要素の横並び中央揃えは若干面倒でして、text-align:center;は使えないし、幅が決まっていなければmargin: 0 auto;も使えません。 CMSなどでliの個数が増減するタイプは幅が可変するので面倒です。 なんかいい方法ないかなぁと探していると良記事にめぐり合えました。 positionを使う方法 floatで並べたリストのセンタリング http://hail2u.net/blog/webdesign/centering-floated-list.html ポジションを使って中央揃えにするとのこと。 引用 .centered { position: relative; overflow: hidden; } .c

本日、月曜日ですのでいつものように朝からメルマガを書き始めています。ホリエモンのように専門のスタッフとエディターがいて口述筆記(たぶん)でできると楽なんだけどなぁ。読者数が5万くらいいったら誰かお金払うのでやってくれ。いまだと赤字だ。そのためにもぜひご購読ください、と営業してみる　→　購読申し込みはこちらです さて、本日は、メルマガ質問で何度となく繰り返された、「中小企業なんだけどどういう風にweb制作会社を選定すればいいのか」というご質問に対しての恒久的な回答です。 その前に確認しておきたいことがあります。それは「なんでwebサイトを開設して運用するのか」っていうことです。もし仮に「他がやってるから」「名刺代わりに」という程度でしたら、いまから読むことは全く無駄ですのでYahoo!ニュースで北朝鮮の動向でも見てください。 ◆サイト開設と運用は投資であると考えるべし わたしのこの回答は基本

今回はjQueryを使って、「問い合わせフォーム」にバリデーション（検証）機能を付ける方法を解説します。入力漏れや入力ミスがないか、サーバーへ送信する前に、クライアント側であらかじめ簡易的な検証を済ませることで、フォームのユーザビリティを高められます。今回のサンプルでは特に、入力漏れやミスのあった項目を分かりやすくユーザーに示すように工夫しています。 バリデーションルールをclass属性で設定 「問い合わせフォーム」のサンプルとして、以下のようなWebページを作成します。バリデーション機能としては、必須項目の「お名前」「性別」「どこでこのサイトを知りましたか？」「お問い合わせ内容」が入力されているか、「郵便番号」が数値で入力されているか、「メールアドレス」がメールアドレスの書式になっているか、「メールアドレス」と「メールアドレス（確認）」に入力されたテキストが同じか――をチェックします。

はじめまして、デザイナーの越後です。 webフォント全盛の昨今ですが、まだまだ文字を画像化する機会も多く 画像で文字を扱うにしても、くっきりはっきり、意図した形でデザインがしたいものです。 そこで今回は「細かすぎて伝わらないアンチエイリアス」と題して、 少しマニアックなphotoshopでのフォント調整についてお話したいと思います。 おさらい：photoshopのアンチエイリアスについては、基本的には５種類 Photoshop上で文字を扱う際には、指定出来るアンチエイリアスは、 なし / シャープ / 鮮明 / 強く / 滑らかに の５種類です。 「なし」に関してはアンチエイリアスがかかっていないので、 文字のままのドットで表示されますが、 他の４つに関しては シャープ：文字が太い / くっきり 鮮明：文字が細い / くっきり 強く：文字が太い / なめらか 滑らかに：文字が細い / なめ

第3回Command Line APIとその活用、各タブからのデバッグ方法 堀邦明 2008-05-21

Sass/Compass ってよく聞くけど、なんか難しそう…って思っている主にデザイナー/HTMLコーダーさん向けの勉強会で利用したスライドです。勉強会にはハンズオンが組み込まれていたので、この資料には中途半端な部分がありますがご容赦ください。 (*'-'*) 内容的には、基礎的な事柄を、活用のための考え方を添えて解説しています。何かの参考になれば幸いです。Read less

MovableType 小技集 【更新】ソーシャルメディアに共有するボタンの設置方法（Twitter, facebook, mixi, GREE, Evernote, Google+, Tumblr, Pinterest, はてブ） ソーシャルメディアの各サービスがこぞって「いいね！」などの共有ボタンをリリースしています。ブログやニュースメディアでも頻繁に目にする昨今ですが、色々なソーシャルボタンの設置方法をまとめて紹介したいと思います。 目次（兼ショートカット） Twitter「Twitterボタン」 Facebook「Share」「Like（いいね！）」 mixi「mixiチェック」 GREE「Social Feedback（いいね！）」 Evernote「Site Memory（Clip）」 Google+「＋１」 Tumblr「Share on Tumblr」 Pinterest「

こんにちは、Web制作会社「株式会社LIG」の代表取締役会長、ゴウです。 今回、LIGで働くWebデザイナーとディレクターにアンケートを取り、制作する際に普段参考にしているかっこいいサイトや、おしゃれなギャラリーサイトを集めてみました。 毎日仕事で使っている彼らのチョイスなので、かなり実践的で参考になる、かっこいい・おしゃれなサイトが集まったと思います。 全部で27個も集まったので、ジャンル別に分類もしました。それではいってみましょう！ デザインの引き出しを増やすには？ デザインの引き出しを増やすには、インプットのほかに、自分のアウトプットに対して誰かからフィードバックをもらうという方法もあります。周りに相談できる人がいなければ「スクールでの勉強」もおすすめです。 💡現役のプロからデザインを学べる「デジタルハリウッドSTUDIO ｂｙ LIG」の詳細はこちらから ※このページは、2021

Webサイト制作における見積書とは、Webサイトを制作・公開するために必要な、企画ディレクション費用、デザイン費用、システム関連費用、ランニング費用などをまとめて記載した書類です。ただし、クライアントが概算金額の提示を要求した場合は、企画提案書の中に概算金額を盛り込むこともあります。 正確な見積書を作成するには、ヒアリング後の企画提案書で方向性をしっかり固め、要件定義書でクライアントの意向とズレが生じていないか確認します。それでも、制作が進む中で、当初はなかった要望が発生することはよくあります。追加費用を相談するためにも、見積書に追加費用に関して記載しておくとともに、事前に十分説明しておくことが大切です。 見積書の具体的な作成方法 見積書に記載する見積金額は、一般的にページ単価×ページ数から計算できます。全体のページ数は、企画提案時にサイトマップを作成することで確認が可能です。 会社案内、