日本最大級のクラウドソーシング - クラウドワークス « HTML・CSSコーディングに役立つ参考サイト

クラウドソーシング

  1. HTML・CSSコーディングに役立つ参考サイト


HTML・CSSコーディングに役立つ参考サイト


はじめに

素敵なウェブページを見て、どうやってコーディングするのか知りたいと思うことや、正しくコーディングしたはずなのに思ったように表示できないことがありますね。この記事では、HTML・CSSコーディングをする際に役立つ参考サイトを紹介します。

 

用途別HTML・CSSコーディング参考サイト:その1

htmlcss_2_1

引用元:HTMLクイックリファレンス

「HTMLクイックリファレンス」は、HTMLタグとスタイルシートの早見表として使うことができます。HTMLタグとCSSプロパティを目的別とアルファベット順に調べることができ、HTML5とCSS3についてひとおりのタグが掲載されているほか、Webカラーと特殊文字について調べることもできます。目的別の分類では、テキスト、表、入力フォームに関するHTMLタグと、テキスト、ボーダー、配置、音声、セレクタに関するCSSプロパティが多く掲載されています。各ページで、記述の働き、属性、使用例、対応ブラウザ、関連するタグを知ることができ、使用例とブラウザ表示を見比べることができます。掲載されている種類が多く、一覧が見やすいうえ、サイト内検索もできるので、使う記述を知りたいときも、HTMLタグ・CSSプロパティの使い方を調べたいときにも役立ちます。目的別とアルファベット順の一覧はページ内検索ができるため、素早く探せます。

用途別HTML・CSSコーディング参考サイト:その2

htmlcss_2_2

引用元:Cliator Clip

「Cliator Clip」は、Web制作会社でコーダーをされている方が、自分が分かりやすいようにとまとめたブログなので、HTML・CSSコーディングに関するホットな情報が掲載されていて、今後の更新も期待できそうです。HTML・CSS関連の記事は、記述とDemoがあり、zipファイルをダウンロードできて実用的です。そして、Word Pressに関する記事では、管理画面設定のスクリーンショットを見ることができます。全体的に整ったレイアウトで見やすいので、記述方法が一目で分かり、マウスオーバーするとクリップボードにコピーできます。運営者は、記事の傾向は、HTMLとCSSが得意な方なので、プログラムを使っていそうなデザインを、HTMLとCSSだけで実装する方法も取り上げられています。また、ドコモやauの端末を色々と所有し、スマートフォンが好きな方なので、携帯端末向けコーディングに関する情報が充実しています。Cliator Clipも、Androidのスマートフォン・タブレットで更新されているWord Pressのブログです。

用途別HTML・CSSコーディング参考サイト:その3

htmlcss_2_3

引用元:CSS Lecture

「CSS Lecture」は、CSS3、HTML5、Movable Typeなどに関する情報があるサイトです。Javaカテゴリの記事が多めです。「blockquote(引用部分)をCSSでデザインするサンプル集」、「検索フォームをCSSでデザインするサンプル集」「吹き出しを使ったコメント欄のサンプル」などの記事があり、アイディアを得ることができます。また、「コーディングするのが楽になるかも?と思うCSSテクニックのまとめ」、「最新のプラウザに使えそうなCSSハック一覧」、「知っておくと便利なCSSテクニック」などの記事があり、テクニックを学ぶことができます。Movable Typeについては、「カテゴリ、サブカテゴリを表示するパンくずリストの作り方」「カスタムフィールドの使い方 ラジオボタン編」「同一カテゴリの前後のエントリーを表示する」など、カスタマイズに使える技があります。

終わりに

このようにHTML・CSSコーディングには色々なテクニックがあり、上記サイトに掲載されていないコーディング方法もまだまだあります。クラウドワークスには、ベーシックなデザインから流行のデザインまでをコーディングでき、知識や経験が豊富なクリエイターが登録しているのでぜひご利用ください。

※このページに掲載している画像は他サイトより引用しています。

スポンサーリンク

HTML・CSSコーディングのお役立ち情報ページの上部に戻る
▴ ページ上部へ戻る