ページのサイズを変更すると、これらのブロック要素は適切に相互に重なります。私は、外部スタイルシートにメディアクエリのいくつかの異なるインスタンスを設定しました。これにより、後で何かを編集するときにスタイルを簡単に追跡できます。.

 
 
 
ジェイクロシュロー
 
フリーランスライター＆ウェブ開発者
  ハドソン, マサチューセッツ, 米国  [email protected] 私のポートフォリオ • @jakerocheleau 
 
  
 
 

詳細なCSSに入る前に、microdataの使用についてもっと説明したいと思います。あなたがよく見ると、私は名前を持つ多くの異なる要素の中の属性に散らばっています。 itemtype, アイテムスコープ, そして itemprop. これらはすべて、Web用のデータ構造を提供することを望んでいるSchmeaプロジェクトに関連しています。.

有用なマイクロデータのフォーマット

グーグル、ヤフー、そしてビングを含むすべての主要な検索エンジンはデータマークアップのための最良の構文としてスキーマを受け入れました。あなた自身の詳細にラベルを付けることで、これらの検索エンジンがあなたのコンテンツをオンラインで関連する結果を表示するのを助けます。これらを設定する方法を分解しましょう.

itemscope属性は、スキーマ項目に関する情報を保持する任意のコンテナに適用されます。これには常にitemtype属性が続き、これはこのシナリオでは人物を説明しています。このラッパーdivの中に私は彼らのドキュメンテーションページにリストされている詳細のいずれかと共にitempropを使用することによって任意のコンテンツにラベルを付けることができます.

推奨される方法は、要素に直接追加するのではなく、コンテンツをspanタグで囲むことです。写真のようなものにラベルを付けるときは、itempropを添付します。 img 直接要素。それ以外の場合は、データをスパンタグで囲むことによって、よりクリーンなマークアップを作成できます。.

多すぎる?

私はあなたが入ることができる詳細の量に制限がないと主張するでしょう。 Microdataは、コンピュータが人、組織、製品、およびその他のアイテムをオンラインのコンテキスト内で認識するのに役立ちます。提供できる情報が多いほど、優れています。.

あなたのウェブサイトの中で、このマイクロデータをどのように使うことができるかを心に留めて開いてみることは価値があります。 Schemaのドキュメントを10〜15分かけて読むと、思ったよりはるかに簡単になります。履歴書のデモから、2つの実例を見ることができます。

 
 
スキルセット
 
 
開発
 
 
HTML5 / CSS3
 
JavaScriptとjQuery
 
PHPバックエンド
 
SQLデータベース
 
ワードプレス
 
Pligg CMS
 
いくつかの目的 -  C
 
 
 
 
ソフトウェア
 
 
アドビフォトショップ
 
Adobe Dreamweaver
 
MS Office 2007-2010
 
cPanel＆phpMyAdmin
 
Xcode 4
 
 
 
 

さまざまなスキルをリストアップするときに、ItemListスキーマを定義する新しいコンテナを設定しました。 Personの下にリストするスキルセットや経験の種類はなかったので、これは安全な代替策です。ここでの価値は、Googleがそれぞれを理解できるということです。 itemListElement 互いに関係しています。この場合、私たちがどのように作業するかを知っている言語とソフトウェアのリストがあります。.

 
 
最近の記事
 
  CSSとJavascriptに役立つ10のフォールバックメソッド • に発表されました 2012年7月
 
  WordPressでURLを書き換える：ヒントとプラグイン • に発表されました 2012年7月
 
  Web用のJPEG最適化 - 究極のガイド • に発表されました 2012年7月
 
  完璧なHTMLニュースレターをデザインするための9のコツ • に発表されました 2012年5月
 
  GoogleウェブサイトオプティマイザーによるA / Bテストのガイド • に発表されました 2012年3月
 
 

もう1つの良い例は、一番下にある記事のリストです。記事やブログ投稿用のスキーマ設定があり、これらはすべてオンラインで見つかったコンテンツに関連しています。記事のURLと公開日を示しましたが、これらは検索エンジンのクローラにとって十分な情報です。.

microdataは、コンピュータによって編成されるコンテンツのフォーマット設定に関するすべてのことです。この1ページの履歴書は、特定の人物に関する特性を定義するのに最適な例です。これらはすべてのWebサイトで役立つわけではありませんが、理解するのは楽しい方法です。.

相対CSSスタイル

この最後のセクションでは、このWebページ全体をどのようにスタイル設定するかを見てみましょう。私たちのスタイルシートの一番上に向かって私はいくつかの初期リセットと基本的な要素特性を定義しています。これらには、ヘッダー、リストアイテム、およびアンカーリンクホバー効果が含まれます。.

* マージン：0;パディング：０。  HTML 高さ：101％。  body background：＃f2f2f2 url（ 'https://assets.hongkiat.com/uploads/responsive-resume/bg-tile.png'）;フォントサイズ：62.5％。パディングボトム：65px。  h1 font-family： "Simonetta"、 "Trebuchet MS"、Arial、sans-serif。カラー：＃454545。フォントサイズ：3.6em。マージンボトム：6px。  h2 font-family： "Simonetta"、 "Trebuchet MS"、Arial、sans-serif。カラー：＃484848。フォントサイズ：2.5em。マージンボトム：10px。テキスト装飾：下線。  h3 font-family： "Trebuchet MS"、ヴェルダナ、アリアル、サンセリフ。カラー：＃777。フォントの太さ：普通。フォントサイズ：1.8em。マージンボトム：10px。  h4 font-family： "Trebuchet MS"、ヴェルダナ、アリアル、サンセリフ。カラー：＃656565。フォントの太さ：太字。フォントサイズ：1.75em。マージンボトム：4px。  p font-family： "Balthazar"、 "Droid Serif"、タイムズニューローマン、serif;カラー：＃565656。フォントサイズ：1.8em。行の高さ：1.4em。マージンボトム：15px。左パディング：35px。 small font-family： "Balthazar"、serif;カラー：＃656565。フォントサイズ：1.6em。表示ブロック;マージンボトム：6px。  ul display：block;リストスタイル：なし。  ul li padding-left：45px; list-style-type：なし。垂直方向の位置合わせ：上;背景：URL（ 'https://assets.hongkiat.com/uploads/responsive-resume/bullet.png'）25ピクセル5ピクセルx繰り返しなしマージンボトム：5px。フォントファミリー： "Balthazar"、セリフ。カラー：＃666。フォントサイズ：1.6em。行の高さ：2.3em。  img 国境：0;最大幅：100％。 色：＃5582d6;テキスト装飾：なし。 a：hover text-decoration：underline;;  

いくつかのカスタムフォントスタックを除いて、それほどおもしろいことは何もない。デフォルトではなく、ユニークな箇条書きアイコンをつかみました “ディスク”. 同様のデザインを見つけようとするとき、Icon Finderのようなディレクトリを検索してみることができます。.

/ ** @groupコアレイアウト** / #w margin：0px 50px;パディング：20px 40px。パディングトップ：35px。背景：#fff;最小幅：260ピクセル。最大幅：900ピクセル。 border-bottom-right-radius：8ピクセル。ボーダー左下半径：8ピクセル。 -webkit-border-bottom-left-radius：8px。 -webkit-border-bottom-right-radius：8px。 -moz-border-radius-bottomleft：8ピクセル。 -moz-border-radius-bottomright：8ピクセル。 ヘッダー幅：100％。  / ** @group個人設定** / #info float：left;;マージンボトム：12px。 #photo float：right; #photo img -webkit-border-radius：3px; -moz-border-radius：3ピクセル。 border-radius：3ピクセル。 -webkit-box-shadow：0 2ピクセルx 4ピクセルrgba（0、0、0、0.2）。 -moz-box-shadow：0 2ピクセルx 4ピクセルrgba（0、0、0、0.2）。ボックスシャドウ：0 2px 4px rgba（0、0、0、0.2）;背景色：#fff;ボーダー：1px solid #ccc;パディング：5px。  

注意が必要なページ上の重要なブロック領域はわずかしかありません。もちろん、ラッパーdivは余分なマージンとパディングで設定されています。また、最大サイズは900pxに制限されています。これより大きいサイズではページに余白が多すぎるように感じます。私はまた目に滑らかな効果を与えるためにページの下部に丸みを帯びた角を使用しました.

レスポンシブデザイン

おそらく、このオンライン履歴書の最も重要な側面は、レスポンシブ機能です。ブラウザウィンドウのサイズを変更するときにさまざまな効果を得るために、5つの異なるブレークポイントを設定しています.

@メディアのみの画面と（最大幅：740ピクセル）h1 フォントサイズ：4.5em。  h3 font-size：2.2em;  h2 display：block; text-align：center。 #info float：なし。表示ブロック; text-align：center。 #photo float：なし。表示ブロック; text-align：center。 #w パディング：20px 15px;  p パディング：0;  

初期 740ピクセル 写真の画像がヘッダーテキストとぶつかるところがすぐです。写真を右側にドロップダウンさせる代わりに、両方の要素をクリアしてレイアウト全体を中央に配置します。また、ヘッダテキストのサイズを大きくして、より強固な影響を残しました。.

ウィンドウが小さくなるにつれて、ラッパーのdivと段落から余分なパディングが削除されました。ヘッダの後に出くわす次の問題は、スキルULリストからのものです。私は2列アプローチを分解し、代わりにリスト項目を隣同士に並べています。.

@メディアのみの画面と（最大幅：570ピクセル）表示されます：インラインブロック;左パディング：15px。幅：140ピクセル。背景位置：-5px 0px。右マージン：6px。行の高さ：1.7em。 ＃スキル左、スキル右マージンボトム：15px;  

これには、デフォルトのテキストプロパティの多くを再配置する必要もあります。行の高さを更新し、各リストアイテムの箇条書きアイコンの位置を変更する必要があります。次のブレークポイントまでグリッドがより組織的に見えるように固定幅を設定しました.

スマートフォン用のコーディング

最後の3つのメディアクエリは、小さいながらも非常に重要です。横モードと縦モードを切り替えると、iPhoneはすべてのモバイルブラウザのサイズを変更します。これは、ほとんどのAndroidデバイスとWindows Mobileフォンにも当てはまります。.

@メディアのみの画面と（最大幅：480px）ul li 幅：120px。  #w margin：0 20px; @mediaのみの画面と（最大幅：320px）#w margin：0 10px; iPhoneのみ** / @media画面と（max-device-width：480px）ul li width：150px;  

最初に480px以下を押すと、ラッパーからさらにパディングが削除され、リストアイテムのサイズも変更されます。それから320pxで私は文書の外側の余白スペースの一部を取り除いた。あなたはまだ織り目加工の背景を見ることができますが、それはそのようなスリムな垂直ビューポートではあまり重要ではありません.

最後に使っています 最大デバイス幅 iPhoneデバイス自体、つまり最大幅480ピクセルのその他のモバイル画面をターゲットにします。この場合、リスト項目を少し広くして、画面全体に表示されるようにします。ポートレートは細すぎて違いに気付くことができないため、ランドスケープビューのスキルリストにのみ影響します.

• デモ
• ソースコードをダウンロードする

最終的な考え

インターネット上で作業するには、少なくとも何らかのオンラインのポートフォリオが必要になることがよくあります。あなたがすべてのあなたの詳細をまとめて整理して単一のページの履歴書にリンクすることができるとき、それはあなたがビジネスを意味することを示しています。真面目な雇用主と潜在的な顧客は、Webデザインにおけるプロ意識のこのようなカリスマ的な表示に真っ向から立ち向かいます。.

このチュートリアルからいくつかの重要なポイントを取り除くことができると思います。世界中のどの場所にいるフリーランサーも、ほんの少しの技術的努力で自分たちを売り込むことができます。上記の私のデモのソースコードをダウンロードして、私たちのコメントエリアでこの記事についてのあなたの考えを共有してお気軽に.