ga-05-h5

HTML/CSS初心者の為の
無料で挫折させない ホームページ作成講座

【 HTML/CSS逆引き辞典 】
パソコン画面から画像の切り取り

EXCELで作成した作図を切り取って、ホームページで使えるよう加工する手順です。ご存じの方は読み飛ばしてください。

1.EXCELによる作図

画像

2.EXCELの目盛線を消す
表示タグの目盛線に”レ”(チェック)を入れると目盛線が消える。

画像

3.Windowsのペイントを利用する
EXCEL画面の状態で、キーボードの[Print Screen]を押し、画面をコピーする。Windowsのペイントを呼び出し、[Ctrl+V]で貼付けを行う。

画像

4.必要な範囲を選択する
ホームタグの選択タグを選択すると記号が表れるので必要な範囲を囲む。

画像

5.必要な範囲をトリミング(画像の切り抜き)する
ホームタグのトリミングを選択すると選択した範囲だけが画面に残る。

画像

5.トリミングした画像の保存
「kiritori-gazou.png」と名前を付けて保存する。

画像

5.切り取った画像の呼び出し
HTMLファイル及びCSSファイルに以下をコーディングすると切り取った画像が呼び出される。

【サンプルHTMLコード】

    <div class="d-center">
         <p class="d-img500">
              <img src="kiritori-gazou.png" alt="画像">
         </p>
    </div>
        

【サンプルCSSコード】

    /*--====================================
         テキストの中央設定
    --====================================*/
    .d-center { text-align: center;}
    /*--====================================
      画像サイスの指定(400px、500px、600px)
    --====================================*/
    .d-img400 img {max-width: 400px;width: 90%;}
    .d-img500 img {max-width: 500px;width: 90%;}
    .d-img600 img {max-width: 600px;width: 90%;}
        

【切り取った画像】

画像
※枠は、後から付けたものです。

 back
pagetop
 next

写真ギャラリーの設置

パソコン画面から
画像の切り取り

ボーダーの活用1
(タイトル)

Copyright (c) 無料で挫折させないホームページ作成講座 All Rights Reserved.
by yorozuken