ここが変わった！HTML5マークアップ入門 (1/6)
ローソン、無印良品、テレビ朝日など、国内でもHTML5で企業サイトを制作する事例が増えてきました。今すぐではないにせよ、「次のリニューアルはHTML5で制作したい」と考えるWeb制作者も少なくないでしょう。本連載では、「XHTML 1.0/HTML 4.01からの移行」をテーマに、HTML5マークアップの基本から実務で使用するポイントまで、ライブドアのマークアップエンジニア 浜 俊太朗さんが解説します。（編集部） 「HTML5タグの誤用で恥をかいた」「分厚い仕様書は読み切れない」コーダー＆デザイナーのためのコーディングガイド。最終草案に対応したほか、商用サイトを意識したコーディング例を新たに書き下ろし。HTML5マークアップへ移行するために必要な知識を効率よく学べる1冊です。ネットで話題の「HTML5カルタ」付き! HTML5マークアップ 現場で使える最短攻略ガイド 定価：2,808円 （
HTML5 でやりがちな間違い
HTML5 Doctor で 「Avoiding common HTML5 mistakes」 という記事が上がっていましたので稚拙ではありますが翻訳など。HTML5 でマークアップする際にやりがちな間違いをいくつか挙げて、さらに正しいマークアップ例も紹介くれていますので、参考にしてみてはいかがでしょうか。 HTML5 Doctor で 「Avoiding common HTML5 mistakes」 という記事が上がっていましたので稚拙ではありますが翻訳など。HTML5 でマークアップする際にやりがちな間違いをいくつか挙げて、さらに正しいマークアップ例も紹介くれていますので、参考にしてみてはいかがでしょうか。 Avoiding common HTML5 mistakes ： HTML5 Doctor 翻訳といっても要約みたいな感じですので、書いてあることをそのまま日本語にしたものではあり
iPhone、PC両方で綺麗に見れるフレキシブルなサイト集:phpspot開発日誌
Available in all sizes: 30 Flexible websites | Awwwards iPhone、PC両方で綺麗に見れるフレキシブルなサイト集。 PCサイトのiPhone対応は今後、当たり前の時代になっていくはずですが、その手間は最小限にしたいところですね。 基本はUA見て、CSSで切り替えて、それでも対応できない部分にはPHP等のサーバサイドを使うっていうのがいいかなと個人的には思っています。 両方で綺麗に見れるサイトが特集されており、今後のウェブサイトづくりに参考にすることができそうです。 関連エントリ iPhoneアプリのプロモサイトを作る際に参考になる６０のサイトデザイン集 奥行きをうまく使ったサイトデザイン集３０ スライダーを上手く使ってデザインされたWEBサイト集３０
webデザインにおける視線誘導のおはなし | 07design.blog
こんにちは。今回はレイアウトの記事を書きます。「グーテンベルク・ダイヤグラム」という言葉をご存じでしょうか。 なんだかすごく中二心をくすぐられる言葉ですね。「グーテンベルク・ダイヤグラム」とは均等に配置された同質の情報を見る際の、・・・こんにちは。今回はレイアウトの記事を書きます。 「グーテンベルク・ダイヤグラム」という言葉をご存じでしょうか。 なんだかすごく中二心をくすぐられる言葉ですね。 「グーテンベルク・ダイヤグラム」とは均等に配置された同質の情報を見る際の、一般的な視線の流れのパターンを表した図式のことです。 簡単に言うと「人間の目は左上から右下方向へ、チラチラしながら遷移する」というものです。 こういった視線の流れのパターンは、エディトリアルデザインなどでは当たり前に使われている技法・考え方らしいです。 テキストをレイアウトする場合には、左上・右下に重要なコンテンツを配置す
効果的に「奥行き」をデザインに与えているウェブサイトのまとめ
ウェブデザインにスパイスを効かせる一つの方法に、奥行きを与える、があります。フラットなデザインではなく、エレメントを使って奥行きを作り出します。 そんな奥行きを効果的にとりいれたウェブサイトを紹介します。
2011年のSEOで、これはもう避けておきたい32のチェックリスト
Googleをはじめとする検索エンジンに対して、サイトを最適化する際に気をつけるべき32のチェックリストを紹介します。 32 SEO Tactics to Avoid in 2011 [ad#ad-2] 下記は各ポイントを意訳したものです。 はじめに あなたは2011年を迎え、SEO用の膨大なリストをもっていることでしょう。ここで紹介するものは、あなたがやるべきではない32のチェック項目を知ることで、あなたのリストを少なくすることです。 2011年のタスクに下記のリストが残っているのであれば、どうぞそれらを消してください。 Hiding Stuff On-Page 隠されたテキストやリンクはGoogleが最も嫌う存在です。これらは最悪の場合、ペナルティが与えられることがあるので使用は避けてください。 白い背景に白いテキスト 画像の上に隠したテキスト CSSを使って隠したテキスト 極小サイズ
WebデザイナーにオススメのMac 厳選60個アプリ集 | Last Day. jp
今までに無料のアプリやMacのtipsを紹介してきました。今日はWebデザイン向けのアプリ60個を紹介します。 ✔すべてのMacユーザーに贈る 便利でしかも無料なMacのアプリ100個紹介 | Last Day. jp ✔これであなたもMacギークになれる 30個のハック集 | Last Day. jp ✔あまり知られていないMacの23の小ワザ集 | Last Day. jp クライアント＆プロジェクト管理 ✔Billings – クライアントの明細書等をトラックできる優れもの。 ✔iCal OSXにインストールされているMac純正アプリ。 ✔OmniPlan – 多機能なプランニングソフトウェア。洗練されたUIにガントチャート等の機能もあり。 ✔iTaskX – Microsoft Projectと連携可能な高機能ツール Mac App Storeでも購入可能です。 ✔Daylite
CSSレイアウトの肝！ 表示・配置のプロパティ、14選
詳しくはコチラ→ position ボックスのレイアウト方法を指定するpositionプロパティ topプロパティ topプロパティは、ボックスを配置する場合に上からの距離を指定します。基準位置の上端から配置するボックスの上端までの距離を示します。positionプロパティが「static」以外のときに有効となるプロパティです。 詳しくはコチラ→ top ボックスを配置する場合に上からの距離を指定するtopプロパティ bottomプロパティ bottomプロパティは、ボックスを配置する場合に下からの距離を指定します。基準位置の下端から配置するボックスの下端までの距離を示します。positionプロパティが「static」以外のときに有効となるプロパティです。 詳しくはコチラ→ bottom ボックスを配置する場合に下からの距離を指定するbottomプロパティ leftプロパティ leftプ
YUKI HARUYAMA Portfolio Site | 春山 有由希
春山 有由希 / ハルヤマ ユウキ UX / UI Design HTML / CSS Graphic Design Photography Designer & Front-end developer 福岡でプログラマとして就職後、Web制作会社に転職し、デザイナーになりました。 ECサイト、テレビ局や番組サイトのデザイン、執筆や講師業などで経験を積んだのち上京し、株式会社Fablicで フリマアプリ フリル（現ラクマ）のUI/UXデザインを担当。 その後、楽天株式会社でデザインチームマネージャを担当したのち、 フリーランスのデザイナーを経て、現在は株式会社スマートバンクでデザイナーをしています。 MORE PROFILE
Facebookページを自由にカスタマイズする方法 | Webクリエイターボックス
2017年6月29日 Webサイト制作, Webデザイン 最近会社でFacebookページを作成する事があり、楽しくてすっかりハマってしまったManaです。そのノリでここWebクリエイターボックスのFacebookページも作ってみました。そこで、Facebookページ作成中に役にたったコードやプラグイン・サイトを紹介します。 ↑私が10年以上利用している会計ソフト！ ※これは2010年に書かれた古い記事です。更新記事「Facebookページの作り方 2012年1月版」をご覧ください。 Facebookページのカスタマイズ概要 Facebookページの基本的な作成手順についてはかちびと.netさんが詳しく解説しています。なので、ここではFacebookページをHTMLやCSSでカスタマイズできるFBMLというアプリケーションやその他のプラグインを使った、もう少し踏み込んだFacebookペー
コーディングのスピードを上げる為の6つの方法
2017年7月25日 Webサイト制作, 便利ツール 今より少しでもコーディングを早くできれば、細かいデザインや機能にも時間をかけて取り組めそう…という事で今回はコーディングのスピードを上げるためにできる事を紹介します。便利なツールを使ったり、ちょっとやり方を変えるだけでより早くコーディングができるようになると思います！ ↑私が10年以上利用している会計ソフト！ 1. コーディング手順を簡略化する これは自分のコーディング能力を高めて手順を省く、便利なツールを使って手間を省くという事です。例えば私は昔このような手順でコーディングを進めていました。 CSSのレイアウトをノートに書き出す レイアウト部分（ヘッダー・メイン・サイド・フッター）のHTMLマークアップ CSSでレイアウト部分のスタイリング 表示確認 うまく表示できない箇所の修正 ヘッダー内のHTMLマークアップ CSSでヘッダー内の
WEBデザイナー向け☆iPhoneアプリのUIデザイン
どーもキンモクセイぷんぷん香る自由が丘からaoizmです。 秋満開！スマートフォンまっさかり！(強引) KAYACでもiphoneアプリ制作のお仕事が増えてきております。 WEBデザイナーがiphoneアプリのデザインをする際に、やっぱり気になるのがWEBとの違い。 画面サイズが小さく持ち歩けるデバイスiphoneは、デスクトップ上のアプリやWEBサイトとは 使用環境もその操作方法も異なるため、WEBとは違ったインターフェイスが求められます。 その違いを認識した上で、違いを活かしたデザインをするためには？ iPhoneアプリのUIデザインまとめてみました。 WEBサイトとiphoneアプリの違い 状況 持ち歩けるがゆえそのシチュエーションもさまざま 「会議で」「合コンで」「移動時」「就寝時」... 状態 そのときユーザーはなにをしている？ 「歩きながら」「話しながら」「運動しながら」...
意外と知らないHTMLタグ講座 | オモコロ
HTMLタグというのはWEBの文章やグラフィックの配置や装飾を指定する便利な記号です。かけだしブロガーも、バリバリのプロフェッショナルも要チェック！意外と知らない便利なタグがあるかも！ 原宿: うーーーん………どうもホームページ作りがうまくいかないな…… リックェ: こんにちはー 原宿: おー、リックェ リックェ: 「HTMLタグ」のことでお困りだって聞いたんですけど？ 原宿: そうなんだよ、全然わかんなくてさ リックェ： 任せといてください！ 僕、一応そっち系の仕事してますんで詳しいですよ 原宿： 頼りになるー！ 悪いけどちょっと教えてよ リックェ： はい。まぁHTMLタグってのはマークアップ言語（ランゲージ）のひとつで、ドキュメント、つまり文章やグラフィックですね。これの配置を決めたり装飾をしたりする…… 原宿： あー、ちょっと待って。口で説明されてもイマイチわからないから、とりあえず
WebデザインにjQueryを使いたい人向けの動画チュートリアルサイト・jQuery for Designers
jQueryをWebデザインの為に使い たい、という方にお勧めのサイト・ jQuery for Designersのご紹介。 jQueryは様々なプラグインがあり ますが、ここはWebデザインに特化 しています。 jQuery for DesignersはデザイナーのためのjQuery情報サイトです。まだ数自体は少ないのですが、チュートリアルやデモを中心に情報を配信していますので今後の期待も込めてご紹介します。 Webデザイナー用のjQuery情報サイトです。右上に「Easy」、「Medium」、「Hard」とありますが、これは導入難易度を示しているようです。 チュートリアルは動画とテキストがあります。動画コンテンツ上部のdemo、View Codeでデモやコードのページに切り替えます。 例えば以下のような情報があります。 Automatic Infinite Carousel 自動でスラ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
AI制作✕企業DX - サイバーエージェンシーby GDM
IDEA * IDEA
IDEA * IDEA