【Tips】画像の装飾と検索ボックス（応用編）

Section outline

• Select section 概要

  ย่อ ขยาย

  概要

  ย่อทั้งหมด ขยายทั้งหมด

  • Select activity リソースの「テキストおよびメディア領域」を用いて配置した画像にシャドウを付けたり、表示位置を変更する...

    リソースの「テキストおよびメディア領域」を用いて配置した画像にシャドウを付けたり、表示位置を変更する方法を紹介しています。
    

• Select section 装飾なし

  ย่อ ขยาย

  装飾なし

  • Select activity (コピー)

    
    
• Select section シャドウつき

  ย่อ ขยาย

  シャドウつき

  • Select activity

    
    
  • Select activity <img>タグ内の　width=“〇〇” height=“〇〇”の後に ...

    <img>タグ内の　width=“〇〇” height=“〇〇”の後に
    style=“filter: drop-shadow(rgba(0, 0, 0, 0.2) 2px 2px 3px); "
    を挿入する。

• Select section マウスオーバーしたときに透過

  ย่อ ขยาย

  マウスオーバーしたときに透過

  • Select activity

    
    
  • Select activity &lt;img&gt;タグ内の　width=“〇〇” height=“〇〇”の後に ...

    <img>タグ内の　width=“〇〇” height=“〇〇”の後に
    style="opacity: 1;" onmouseout="this.style.opacity= 1.0; " onmouseover="this.style.opacity= 0.6;"
    を挿入する。

• Select section シャドウ＋マウスオーバーしたときに透過

  ย่อ ขยาย

  シャドウ＋マウスオーバーしたときに透過

  • Select activity

    
    
  • Select activity &lt;img&gt;タグ内の　width=“〇〇” height=“〇〇”の後に style=...

    <img>タグ内の　width=“〇〇” height=“〇〇”の後に
    style="filter: drop-shadow(rgba(0, 0, 0, 0.2) 2px 2px 3px); opacity: 1;" onmouseout="this.style.opacity= 1.0; " onmouseover="this.style.opacity= 0.6;"
    を挿入する。

    
    

• Select section 中央揃え

  ย่อ ขยาย

  中央揃え

  • Select activity

    
  • Select activity 中央揃えにしたい複数の画像を&lt;div＞で囲み、styleにtext-align: cent...

    中央揃えにしたい複数の画像を<div＞で囲み、styleにtext-align: center;を指定する。
    <div style="text-align: center;">
    ・・・
    </div>

• Select section 右揃え

  ย่อ ขยาย

  右揃え

  • Select activity

    
  • Select activity 右揃えにしたい複数の画像を&lt;div＞で囲み、styleにtext-align: right...

    右揃えにしたい複数の画像を<div＞で囲み、styleにtext-align: right;を指定する。
    <div style="text-align: right;">
    ・・・
    </div>

• Select section 周囲に余白を付ける

  ย่อ ขยาย

  周囲に余白を付ける

  • Select activity 余白なし

    余白なし
    
  • Select activity 周囲に余白3pxずつ

    周囲に余白3pxずつ
    
  • Select activity styleにmargin: 〇px;を指定すると、周囲に〇pxずつ余白が付きます。 s...

    styleにmargin: 〇px;を指定すると、周囲に〇pxずつ余白が付きます。
    style="margin: 3px; "

• Select section 検索ボックス

  ย่อ ขยาย

  検索ボックス

  • Select activity &nbsp;

     
  • Select activity 以下の&lt;form&nbsp; ・・・&gt;～&lt;/form&gt;までのコードを任意...

    以下の<form  ・・・>～</form>までのコードを任意の位置に挿入します。

  • Select activity &lt;form id="cse-search-box" action="https://goo...

    <form id="cse-search-box" action="https://google.com/cse" style="display: inline; margin: 5px;" target="_blank">
            <input type="hidden" name="cx" value="1fb97f9b35191414f">
            <input type="hidden" name="ie" value="UTF-8">
            <input type="text" name="q" size="20" placeholder="Moodle検索">
            <input type="submit" name="sa" value="検索" style="background-image: linear-gradient(rgb(107, 107, 107) 0%, rgb(54, 54, 54) 100%); color: rgb(255, 255, 255); border: rgb(0, 0, 0); border-radius: 5px; filter: drop-shadow(rgba(0, 0, 0, 0.2) 2px 2px 3px); opacity: 1;" onmouseout="this.style.opacity= 1.0;" onmouseover="this.style.opacity= 0.6;">
    </form>

  • Select activity ※style部分は各値を任意の値、テキストに変更可能です。

    ※style部分は各値を任意の値、テキストに変更可能です。