初心者必見!ホームページ作成をする上でレイアウトを模倣する能力

HTML/CSS

前回は投稿ではプログラミング学習のことについて書きました。

【初心者向け】リモートワーク(副業)が可能なプログラミング学習の始め方 最短準備は3日

プログラミング学習で大事になってくる能力は「ものを作る能力」よりも、「再利用したいものを探す能力」が一番重要になります。

世界中にあるホームページは「全て自分の勉強材料だ!」と考えて頂いても大丈夫です。なので高品質なページを作る上では色々な参考サイトを自分なりにストックしておくことが大事です。
また模倣する能力は創作する能力に繋げるための第一歩です。

それでは具体例例としては「とあるサイトのこの機能と同じものを使いたい!」という場合にプログラマがどういった解決しているか(考え方を持っているか)を教えます。

「模倣する能力」のお話の対象者

ある程度HTMLやCSSの構造がわかりページを作成できるようになった方

WEBデザインのレイアウトを模倣したい

長期休養に入る前にやっておきたい3つのこと

例えば上記ページでの下記の枠線を「真似したい」「利用したい」という場合が出てくると思います。

あるサイトの枠線を真似したい

この部分を作成する場合に必要なツールをご紹介します。

必要なのはブラウザ「Chrome/FireFox」だけ!

Chrome/FireFoxがあればツールとして十分です。
まずはchromeでどのように確認するかチェックしましょう。

Chromeでの「検証ツール」を利用したチェック方法

Chromeでのデバッガコンソール利用方法
模倣する箇所の抽出
  • 対象のURLを開く
  • 1.対象ページで右クリックをおし、メニューを開きます
  • 2、検証をクリックし検証ウィンドウを開く
  • 3.選択ボタンをクリックし参考にしたい箇所をクリック
  • 検証ウィンドウで参考にしたいHTML/CSSが表示されます。

抽出できたHTML

[code HTML] <div class="box25">
<span class="box-title">受給要件</span>
<ul>
<li>社会保険に加入していること(自営業などが加入する国保は制度がありません)</li>
<li>業務外で生じた病気・怪我の療養であること</li>
<li>仕事につくことができないこと</li>
<li>連続する3日間を含み4日以上仕事に就けなかったこと</li>
</ul>
</div>

抽出できたCSS

[code CSS]
.box25 {
    position: relative;
    margin: 2em 0;
    padding: .5em 1em;
    border: solid 3px #E4007F;
    border-radius: 8px;
}
.box25 .box-title {
    position: absolute;
    display: inline-block;
    top: -13px;
    left: 10px;
    padding: 0 9px;
    line-height: 1;
    font-size: 19px;
    background: #FFF;
    color: #E4007F;
    font-weight: bold;
}

上記のコードHTML/CSSが抜け出せたと思います。

あとは自分好みに色を変更したりなどカスタマイズを行うことで色味の変更や文字サイズなどの調整ももちろん可能です。

FireFoxを利用した検証ツールの利用

FireFoxのデバッガコンソールの利用方法

同様にHTML/CSS(ソースコード)が取得できたと思います。

取得したコードの再利用について

ソースコードの再利用
[CSS]
.box-original {
    position: relative;
    margin: 2em 0;
    padding: .5em 1em;
    border: solid 3px #9ecb65;
    border-radius: 8px;
}
.box-original .box-title {
    position: absolute;
    display: inline-block;
    top: -13px;
    left: 10px;
    padding: 0 9px;
    line-height: 1;
    font-size: 19px;
    background: #FFF;
    color: #9ecb65;
    font-weight: bold;
}
<div class="box-original">
<span class="box-title">コードの再利用</span>
<ul>
<li>変更したよ!</li>
</ul>
</div>

上記はclass名を変更し、カラー・サイズを調整したものです。HTML/CSSを出力すると以下のような表現となります。

コードの再利用
  • 変更したよ!

まとめ

まとめ
  • 世界中にあるホームページは「全て自分の勉強材料だ!」
  • 高品質なサイトを作るためには、勉強材料となる参考サイトをストックしよう
  • WEBデザインの模倣の仕方
  • Chrome/FireFoxのデバッグコンソールの使い方

最後まで読んでくれてありがとうございます。 内容に気になるところがあれば、ブログのメッセージ、@sak_shotaまでお寄せください

Ads フリーランスの手始めにクラウドワークスで挑戦してみよう

クラウドワークスはプログラムやWEB制作の案件が多数あるサービスです。副業やフリーランサーの方には登録して置くだけでもメルマガによる案件配信があるので自分にあった案件探しが受動的にできます!

コメント

タイトルとURLをコピーしました