CSSはどちらかと言えばやさしく、雑にコードを書いてもなんとかなってしまう言語です。 しかし、雑にコードを書いてしまうと、昨日書いたこのコードなんだっけ？ とか、新しくスタイルを増やすと別のスタイルがおかしくなってしまうことはありませんか？ 大規模なプロジェクト、長期に渡るプロジェクト、複数のメンバーが関わるプロジェクト、そして明日の自分も一年後の自分も使える、メンテナンス性に優れた一覧性のある美しいCSSを書くのに役立つガイドラインを紹介します。 CSS Guidelines 2 CSS WizardryのHigh-level guidelinesの最新版（2014年8月リリース）。 大規模で長期に渡るプロジェクト向けのメンテナンス性に重点をおいたスタイルシートのガイドラインです。スキルの異なる制作者、新規で加わる制作者などでも、統一されたコードでの制作が可能になるのを目的としています。
Introduction In the ever-evolving landscape of web browsing, staying abreast of the latest technologies is crucial. HTML5, the fifth and current version of the Hypertext Markup Language, has revolutionized the way we experience the web. With its advanced features and enhanced capabilities, HTML5 has become the cornerstone of modern web development, offering a more seamless and interactive user exp
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? まずHTMLは大きく2つに分けることができます。 【テキスト】とURLを用いた【ハイパーリンク】です。 テキストは「本文」「本文を補足するサブテキスト（広告、関連記事リンク、注釈、コラム、用語集など）」「ナビゲーションなどのリンクを説明するテキスト（ナビゲーション）」の3つに分けることができます。 【ハイパーリンク】を使って表現できることは「URLジャンプ（リンク）」、「メディアなどの埋め込み（画像・Flash・JSなど）」、「参照（CSS、RSSなど）」となります。 ハイパーリンクにはいろいろな機能があるのですが今のところ、この4つの
みなさんどうも〜こんにちはぁ！ 日々レベルアップを目指してWebを学んでおりますライターの、のび太です。 以前「Web制作初心者がマジで学べるおすすめ国内ブログ厳選10個」という記事を書かせていただいたのですが、予想以上に好評で驚きました。お役に立てて光栄です！ そのときご紹介したブログの他にも、まだまだ有益で素晴らしい国内ブログはたくさんあります。そこで今回は、「やばい！ マジで有益すぎる！ ありがてぇ！」と感じたブログを、制作系とSEO系とに分けて、計10個ほどご紹介したいと思います。 今まで知らなかったという人は、ぜひこの機会にRSS購読を！ 制作系 以下7ブログが、デザイン、コーディング、CMSなど制作系の内容になります。 NxWorld http://www.nxworld.net/ どの記事もシンプルかつ丁寧な説明で非常にわかりやすいです。特にWordPressカスタマイズ系の
デザイナーさん・ディレクターさんをはじめ、ウェブデザインに携わる全ての人に必携です！ デザインの基本原則をはじめ、Photoshopを使った実践的なさまざまなテクニックが学べるeBookを紹介します。無料なのに市販の書籍に負けない、いや人によってはそれ以上の価値ある内容がぎっしり詰まってます。 Pixel Perfect Precision 当ブログでもお馴染みのPixel Perfect Precisionの第3版が、昨日リリースされました（パチパチパチパチ） 内容も大きくバージョンアップし、ページ数も165ページから214ページへと大増量。 デザインにおける、配置の基本原則、可読性を考慮したテキスト、カラーマネジメントなどをはじめ、ファイルの効率的な管理方法、Photoshopでのウェブに最適な初期設定、レイヤー管理、Illustratorのウェブで使える実践的なテクニックなど、満載の
※2014年2月26日に更新しました。要素及び属性をなるべく新しい仕様書に準拠、その他頂いたコメントへの対応を行いました。 ※2014年3月3日更新しました。タグと要素の違いについて追記。本文内でタグと要素の記述が間違っていた部分を修正。「要素が要素をまたがってはいけない」というのはどの形式でも同じなので、記述を削除。 どうも、くーへいです。 今日はある方からリクエストされた記事を書こうかと思います。 皆さんは、コーディングをするときに「HTML 4.01」、「XHTML 1.0」、「HTML5」のどれを使っていますか？ 実際には案件ごとに使い分けているかもしれませんね。 この投稿では、それぞれの違いについて、考えていきたいと思います。 ※要素とタグを混同する方も多いですが、要素とタグでは意味が全く異なります。 例えば、「<html>・・・</html>」は要素ですが、「<html>」や「
この春からWeb制作業界で頑張っている皆さんへお届けしている初心者向け記事のまとめ。前回の「初心者でもPhotoshopの基本的な使い方が分かる入門記事9選」では、Webサイト／サービスの元デザイン制作に使われるPhotoshopについて、提供元であるアドビシステムズが使い方を無料で解説している「Adobe Pinch In」の記事を一部引用しながら、現場で使える具体的な制作手順とテクニックをまとめて紹介した。今回はDreamweaverに焦点を当ててお届けする。 DreamweaverはAdobe Creative CloudのWeb制作部分の“要”のソフトウェアである。この春から新しく社会人になったり、転職したりして新しい環境にチャレンジしている方の中には、すでに使い方の講習を受けた方もいることだろう。ところが、Dreamweaverは歴史が長い分、さまざまな機能が盛り込まれており、こ
どうも〜、こんにちはぁ！もっともっとWebデザイナーとして成長したいライター、のび太です。 さて、突然ですが「Webデザイナーにとって必要な能力ってなに？ 」という疑問をもったことありませんか？つい最近フリーランスのWebデザイナーとして飯を食っていくことになった僕ですが、最近ますますその答えが知りたくなりました。 HTML、CSSなどのコードが書ける人？Photoshopでキレイなデザインが作れる人？Webについて詳しい人？いったい「Webデザイナー」ってなんなのでしょうね〜？ 僕はこれまでWebデザイナーに関する海外記事を多く読んできましたが、「へぇ〜、Webデザイナーってこんな能力もなんだなぁ〜。」って意外に感じたことが結構ありました。 今回はその中でも特に重要だと思った5つをピックアップしてご紹介したいと思います。 Webデザイナーがスキルアップするために必要な能力5つ 1. 事前
SEO の常識・非常識・都市伝説 (2014年版） 2014年4月現在の、SEO のよくある勘違い・間違い・誤解・都市伝説をまとめました。 公開日時：2014年04月28日 19:12 ネット上には、SEO に関する情報があふれていますが、どれが正しくて、どれが間違っているのかよくわかりませんよね。ここでは2014年4月現在の、SEO の常識・非常識・都市伝説・過去にあった相談をまとめました。 ドメイン登録情報（whois）を変更したい。検索順位に影響はあるのか？ A：Whois 情報の変更が直接的に検索順位に影響を及ぼすことはない。Whois 情報の状態がアルゴリズムにより自動的に評価されているわけではない。 ※ セキュリティ調査等の理由で情報が参照される場合はある 会社名（商号）が変更されることになったが、順位が落ちてしまう恐れがあるので whois 情報の会社名は古いままにした方が良
勉強欲が強いディレクターの鮫島です。 普段みなさんは知識を得るためにどのような勉強をしていますか？？ 本を読んだり、セミナーに行ったり、Facebookのタイムラインに流れてくる技術系の記事を見たりすることが多いかと思います。 私も大体そうなのですが、最近それ以外にも勉強する方法を模索しています。 その中の1つとして、ちょこちょこ目に付くオンラインの「スライド資料」がとても分かりやすくて、ちょっとした合間に勉強できます。そこで、私が最近見た中でも、見やすくて勉強になったスライドをいくつかご紹介します。 ちなみに、オンラインのスライド資料サービスについては、過去にディレクターの勢古口が「より美しいプレゼン資料を共有しよう。オンラインプレゼンツール7選」でまとめていますので、ご興味あればこちらもご一読ください。 ディレクター向けのスライド資料まとめ IAシンキングによるモバイル再設計 内容 I
ランディングページ（LP）では、売り出したい商品・サービスの訴求を行い、コンバージョン（成約）まで完結させることを狙います。 参考：【ランディングページとは│10分で理解できるＬＰの基本】 売上を上げるための重要な役割を担うページであるため、成約を意識した内容でないといけません。 しかし、成果につなげるためにどのようにランディングページを作ればいいかわからない方も多いのではないでしょうか。 今回は、そんな方のために、成果を上げるランディングページを作るために押さえておくべきポイントをご紹介いたします。 【CVR28倍改善事例あり】高CVR特化型のLP制作サービス ランディングページ（LP）を作る流れ8ステップLP（ランディングページ）を作る際には、以下8つの手順を踏むことで、より効果的なページを作成できます。 1．目的の設定｜LPのゴールを明確にするLP作りは、「何を達成するためのページか
作成：2014/04/21 更新：2014/10/24 Web制作 > 前回コーポレートサイト制作が捗るjQuery プラグインをまとめましたが、今回はCSS版ということで、使用頻度が高いものと、これから必要になりそうなものを、忘れないようにメモしておきます。コーポレートサイトやWeb サービスサイトでさりげなく使われているものや、今後増えそうなものなど。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 横並び １．今までの回り込み解除 ２．横並びや並び順 ３．均等に並べる／段組み ナビゲーションメニュー ４．多階層 ドロップダウン ５．amazon風 メガドロップダウン ６．ドロワーメニュー コンテンツメニュー ７．モーダルウィンドウ ８．アコーディオン ９．タブパネル テーブル １０．ストライプテーブル １１．レスポンシブ＋テーブル リスト １２．カウント
作成：2014/04/7 更新：2014/11/01 Web制作 > あの企業サイトで使われている効果やテクニックをまた探さないといけない、そもそもどういったキーワードで探したらいいのか分からない。そんなこんなで、今回は奇抜なものではなく、「企業サイトで見たことある！」というような、コーポレートサイトに使えそうな定番のプラグインや作り方をまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ スライドショー １．カルーセル（横） ２．フェードアウト ３．画像と文字をスライド ４．文字が遅れて移動する効果 ５．異なるタイミングを設定できる ナビゲーション・メニュー ６．多階層 ドロップダウンメニュー ７．多階層 効果つき ８．スマホではドロップダウン ９．スマホではセレクトメニューに １０．Amazon風 メガドロップダウンメニュー １１．横スライド １
2013年5月、Fireworks開発終了ニュースを受け、多くのFireworksユーザーたちがAdobe許すまじと誓ったあの事件から早いものでもうすぐ1年経とうとしています。 私は今でもFireworksが大好きですし未だによく使っていますが、最近ではPhotoshopでデザインすることが多くなってきました。PhotoshopはCCになってからだいぶ使いやすくなり、いい感じです。 ただ、Fireworksユーザーからすると、Photoshopでデザインする上で不便だなーと思った点がいくつかあったので、今更ですがまとめてみました。ものすごーく地味なことばっかりですが、FireworksからPhotoshopに移行する方ならば一度は困るんじゃないかと思うことなので、参考になれば幸いです。 2016/7/5 追記 CSSHatで表示して見る を今更追記しました。サンキュー@sou_lab 20
WordPressで企業サイトを構築する際に 使用したプラグイン。 htmlからWordPressサイトに移行する際も プラグインがあれば対応できます。 .html on PAGES WordPressで作ったページのURLの末尾に .htmlを付けるためのプラグイン。 Author Avatars List ユーザー（投稿者一覧）をウィジェットに表示するためのプラグイン 【Widgets on Pages】とセットで使い、ユーザー一覧ページを作ります。 Auto Post Thumbnail 記事ページに使用されている画像をアイキャッチ画像として 一括登録してくれるプラグイン Category Order カテゴリーの表示順番を変えてくれるプラグイン Custom Field Suite 記事投稿画面にカスタムフィールドをカンタンに設置できるプラグイン Disable WordPress
フリーランスになって始めてわかること 最近はフリーランスとして、仕事をしている方も増えてきているようです。僕もそのうちの一人なのですが、会社に勤めていたころとは大きく変わったことが１つだけ・・・ それは全て一人でやらなければならないということです。 会社では自分の担当していたところだけをやっていればよかったのが、経理処理や確定申告、仕事探しの営業から契約まですべて一人でやる必要があり、作ってるだけじゃ食っていけないってことを思い知らされました。 しかし、こういった「モノ作り」以外の部分を強力にサポートしてくれるツールがたくさんあります。この記事ではフリーランスWebデザイナーが自分の仕事に集中するためのサポートツールを紹介していきます。 ではさっそく各カテゴリーごとにおすすめ仕事効率化ツールをチェックしていきましょう。有名なものだけでなく新しいツールをどんどん紹介していきます。フリーランス
2. モック作る次に、Illustrator でモック作る。前は Photoshop で作ってたけど Illustrator に変えた。ラフスケッチでだいたいの構造は決まってるので、それを画面で見た時の見栄えを検証する。雑だけどこれは自分のサイトなのだから自分しか見ないという前提があって、雑でも問題ないということにしてる。8割くらい作り込んだところでやめて、コーディングに入るようにしている。2割くらい変更可能な余地を残しておくことで、コード書くとき融通が効く。 ラフとかモック描かずにコーディング始めることもたまにあるけど、それは余程デザインが頭のなかで固まっている場合に限る。ラフとかモック作るの、コーディングと同じくらい大事だと思ってて、コーディングを始めてしまうとデザインに気を配るのを疎かにしがち。デザインを考えつつ同時にコードを書くというのは結構難しくて、トレーニングが要る。全体のデザ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
