副業だけでなく、ブログなどでも見栄えをいじる時にちょっと覚えておけば簡単な修正だけでなく、カスタマイズも可能になります。
はじめに
インターネットを使って副業をする際に覚えておくと便利なソースコードをご紹介いたします。ちょっとしたカスタマイズを可能にしますので覚えておきましょう。
もくじ
注意事項
ソースコードは打ち間違いがあると表示が崩れるので、かならずバックアップをとりながら制作して下さい
htmlで良く使うソースコード
最低限これだけは覚えておきましょう
文章の段落
まずは、文章の段落を分ける時に使うタグです。
私は副業で儲けます。
話変わりますが今日は雨ですね。
これをソースコードで見ると
<p>私は副業で儲けます。</p> <p>話変わりますが今日は雨ですね。</p>
リスト表示
次にスペックなどの項目をリストアップする時に使います。
- 銀行振り込み
- クレジットカード払い
- 代金引換
cssにもよりますが、テキストの前印が付きます。これをソースコードにすると
<ul> <li>銀行振り込み</li> <li>クレジットカード払い</li> <li>代金引換</li> </ul>
リストの順番
今度はリストに順位がある場合のソースコードです。
- 商品の確認
- カートに入れる
- お支払
テキストの前に順番を表す数字が出ます。これをソースコードにすると
<ol> <li>商品の確認</li> <li>カートに入れる</li> <li>お支払</li> </ol>
改行したい場合
テキストを改行する時に使うコードです。
美味しいパスタが食べたい
気分です。
デザインにも使える、改行を使用する場合のソースコードは
美味しいパスタが食べたい<br /> 気分です。
cssを直接書き込む方法
htmlを装飾するのを直接書き込んでみよう
cssは先ほどのhtmlを装飾します。例えば、文字を太くししたり、色を変えたり、大きくしたりする事で強調する事が可能です。
<p style=”ここに装飾内容を入れます。”>
では、次によく使う装飾の例をご紹介いたします。
cssで良く使うコード
キャッチフレーズなどの強調に使えます。
文字の大きさを変える
これが通常の文字の大きさです。
これが大きくした文字の大きさです。
文字の大きさを大きくしました。これをソースコードにすると
<p>これが通常の文字の大きさです。</p> <p style="font-size: 20px;">これが大きくした文字の大きさです。</p>
文字の色を変える
これが通常の文字の色です。
これが赤くした文字の色です。
文字を赤くしました。これをソースコードにすると
<p>これが通常の文字の色です。</p> <p style="color: #fe0000;">これが赤くした文字の色です。</p>
組み合わせる
これが通常の文章です。
文字を大きく、太く赤くしました。
先ほどの三つを組み合わせました。これをソースコードにすると
<p>これが通常の文字の色です。</p> <p style="font-size: 20px; font-weight: bold; color: #fe0000;">これが赤くした文字の色です。</p>
さいごに
htmlやcssに関して、最低限覚えておけばＥＣサイトのコンテンツ内容や説明文などで検索エンジン上メリットが大きいので、テクニックの一つとして少しでも覚えておくようにしましょう。
