思考停止するなスマートフォン用の表示で見る思考停止するなネットワークとかアプリケーションとかWebとかこの広告は、90日以上更新していないブログに表示しています。スポンサーリンクウェブデザイン技能検定3級に合格したので、試験対策の記事を書いてみます。ウェブデザイン技能検定3級の試験は学科試験と実技試験の2つに分かれています。本記事では、実技試験攻略のために作業でやるべきことや作業のコツを書いていきたいと思います。ウェブデザイン技能検定3級の実技試験は6つある作業の中から5つを選んで作業を行い、作業をしたファイルを提出する形式です。作業の内容は平成27年時点の内容です。過去問を見るとわかるのですが、大体のパターンはほぼ毎回同じような問題が出題されます。ディレクトリ構造、CSSファイル、パスについての理解は最低限必要です。それでは、それぞれの作業内容について書いていきます。作業1作業1では、指示されたディレクトリ構成に修正して正しくCSSを適用させたり、画像を表示させるように修正する作業を行います。(1)ディレクトリ構成を指示された内容と同じにします。その際に、フォルダを新規作成する作業が必要になります。パスについての理解が必要になり、CSSファイルと画像のパスを修正します。CSSを適用させるにはindex.htmlのCSSの指定記述を修正します。hrefの指定をCSSファイルのパスにします。type="text/css">画像を表示させるには、画像のパスの修正を行います。srcの指定を画像ファイルのパスにします。src="画像ファイルのパス">正しく表示されているかどうかは、ブラウザで表示してみて、スタイルが正しく適用されているか、画像が表示されているかで確認できます。(2)フォルダを指示された場所に保存します。ブラウザで表示した時に、CSSが適用され、画像も表示される状態にしなければならない。作業2作業2ではリンクの修正を行います。※4問ある場合は、(1)(2)ともにリンクの修正です。(1)リンクの修正を行います。hrefの指定を行います。href="リンクしたいhtmlファイルのパス"></a>(2)指定されてた箇所のテキストの修正を行います。ページタイトルとは<title>◯◯◯</title>の◯◯◯の部分です。指定された箇所を◯◯◯の文字に置き換えます。(3)フォルダを指示された場所に保存します。リンクの張り間違いに注意する必要があります。作業3問題のパターンが大きく3パターンあるのでそれぞれについて書きます。スタイルシートの修正を行い横によっている要素を中央に配置します。左に寄っているコンテンツを中央に配置します。そのため、CSS内にmarginの設定を追加します。具体的には以下の内容を追加します。auto;と修正します。行って検索すると楽です。スタイルシートの修正を行い左右の位置を入れ替えます。移動させたい要素をfloat:left;とすると左側に要素を持って来れます。同様にfloat:right;とすると右側に要素を持って来れます。最適なCSSを選択します。1つずつCSSを適用させて、ブラウザで確認して最適なものを選びます。(2)フォルダを指示された場所に保存します。作業4スタイルシートを修正して色の変更を行う作業を行います。(1)スタイルシートを使って色の変更を行います。指定された色;のように修正します。(2)フォルダを指示された場所に保存します。作業5背景に画像を適用させる作業を行います。(1)背景画像の適用を行います。background-image:url(画像のパス)(2)フォルダを指示された場所に保存します。・同じに見える画像が複数ある場合は、データ量が少ない方を利用する・利用しなかった画像ファイルは削除する作業6HTMLで簡単な文章の作成を行います。(1)文章配置を行います。HTMLの知識が必要です。指示された文章の内容に従ってh1要素、h2要素、p要素、ol要素、ul要素を使い文章を記述します。h1要素、h2要素、p要素、ol要素、ul要素についてそれぞれの役割を調べておくといいと思います。(2)フォルダを指示された場所に保存します。fを使って検索を行う実技試験攻略のために作業でやるべきことや作業のコツについて書いてみました。ウェブデザイン技能検定3級の実技試験を受験しようと考えている人のお役に立てれば幸いです。Tweet広告を非表示にする関連記事2017-11-26罪悪感から解放される方法を考えてみたこんにちは、今日はいきないりですが罪悪感から解放される方法...2017-02-12AnimateでFlashを作る方法AnimateでFlashを作る方法についてです。Animateを立ち上...2016-11-23UbuntuにsambaをインストールUbuntuにsambaをインストールしたのでそのメモです。アップデー...2016-08-01HTML簡単なテーブルの一例HTML簡単なテーブルの一例を書いてみました。書...2016-07-10メディアクエリの書き方についてメディアクエリの書き方について調べたのでメモです。(1)注目記事サイト検索リンクはてなブログをはじめよう!shimonssさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。