Apps Scriptリファレンス: Apps Script Reference ｜障害・課題追跡: IssueTracker ｜Google Workspace: Status Dashboard - Summary

ラベル HTML/CSS の投稿を表示しています。 すべての投稿を表示
ラベル HTML/CSS の投稿を表示しています。 すべての投稿を表示

2020年5月15日金曜日

長いテキストを折り返さず「…」で表示したい


以下のような表現をしたいときのスタイルをlabel1に書きました。



コード.gs 
function doGet() {
  return HtmlService.createHtmlOutputFromFile("index");
}
意訳
この機能がやること
指定したHTMLファイルを表示する


index.html 
<!DOCTYPE html>
<html>
<head>
  <style>
    .label1 {
      border: solid 1px lightgray;
      white-space: nowrap;
      padding: 10px;
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      width: 50vw;
    }
  </style>
</head>
<body>
  <label class="label1">あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん</label>
</body>
</html>

参考

display

overflow

white-space

text-overflow


投稿者
ラベル:

2020年5月9日土曜日

console.logを%cで区切るとスタイルを適用できる


console.logで出力するメッセージを装飾したい場合


この例ではmessageを青色にしています。

ポイント

  • %cで区切った後のテキストに対して、その次の引数でスタイルを設定できる


console.log("Console %cmessage", "color: blue;");


コード.gs 
function doGet() {
  return HtmlService.createHtmlOutputFromFile("index");
}
意訳
この機能がやること
指定したHTMLファイルを表示する


index.html 
<!DOCTYPE html>
<html>
<body>
<script>

console.log("Console %cmessage", "color: blue;");

</script>
</body>
</html>

補足


書き方のパターンをいくつか試してみました。


index2.html
<!DOCTYPE html>
<html>
<body>
<script>

consoleStyled();
function consoleStyled() {

  // 一行で書く場合
  console.log("Console %cmessage", "color: white; background-color: blue;");
  
  // 代入する場合
  var color = "color: blue;";
  console.log("Console %cmessage", color);
  
  // 複数を配列で用意してjoinして代入する場合
  var props = [
    "color: white",
    "background-color: blue",
    "padding: 2px",
    "font-size: 15px"
  ];
  var style = props.join("; ");
  console.log("Console %cmessage", style);
 
  // 異なるスタイルを適用する場合はさらに%cで区切って、引数にスタイルを追加する
  console.log("Console %cmessage %cgreen", "color: blue;", "color: green");
}

</script>
</body>
</html>

投稿者
ラベル:

2020年1月12日日曜日

テーブルのセルで折返しを無効にしたい（white-space: nowrap）


white-space: nowrapでやってみる

th, td {
  min-width: 240px;
  white-space: nowrap;
  border: solid 1px lightgray;
}


white-space: nowrap を設定した場合


white-space: nowrap を設定しない場合



コード.gs 
function doGet() {
  return HtmlService.createHtmlOutputFromFile("index");
}
意訳
この機能がやること
指定したHTMLファイルを表示する


index.html 
<!DOCTYPE html>
<html>

<head>
<style>
table {
  border-collapse: collapse;
}

th, td {
  min-width: 240px;
  white-space: nowrap;
  border: solid 1px lightgray;
}
</style>
</head>

<body>
  <table>
    <tbody>
      <tr>
        <th>caption1</th>
        <th>caption2</th>
        <th>caption3</th>
      </tr>
      <tr>
        <td>1-1 Practice makes the impossible possible.</td>
        <td>1-2</td>
        <td>1-3</td>
      </tr>
      <tr>
        <td>2-1</td>
        <td>2-2</td>
        <td>2-3</td>
      </tr>
      <tr>
        <td>3-1</td>
        <td>3-2</td>
        <td>3-3</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

投稿者
ラベル:

テーブルのセルの最小値を設定したい(min-width: 240px)


セルの幅の最小値をmin-widthで設定してみる

th, td {
  min-width: 360px;
  border: solid 1px lightgray;
}



コード.gs 
function doGet() {
  return HtmlService.createHtmlOutputFromFile("index");
}
意訳
この機能がやること
指定したHTMLファイルを表示する


index.html 
<!DOCTYPE html>
<html>

<head>
<style>
table {
  border-collapse: collapse;
}

th, td {
  min-width: 360px;
  border: solid 1px lightgray;
}
</style>
</head>

<body>
  <table>
    <tbody>
      <tr>
        <th>caption1</th>
        <th>caption2</th>
        <th>caption3</th>
      </tr>
      <tr>
        <td>1-1 Practice makes the impossible possible.</td>
        <td>1-2 Take your time.</td>
        <td>1-3 Strile while the iron is hot.</td>
      </tr>
      <tr>
        <td>2-1</td>
        <td>2-2</td>
        <td>2-3</td>
      </tr>
      <tr>
        <td>3-1</td>
        <td>3-2</td>
        <td>3-3</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

投稿者
ラベル:

テーブルのセルの枠を設定したい(border-collapse: collapse)


スタイルを設定せずにテーブルを作るとこうなる


thとtdのスタイルを以下のように設定すると
th, td {
  border: solid 1px lightgray;
}

枠線がついてこうなる


枠線をくっつけるためにtableのスタイルを設定してみる

table {
  border-collapse: collapse;
}


コード.gs 
function doGet() {
  return HtmlService.createHtmlOutputFromFile("index");
}
意訳
この機能がやること
指定したHTMLファイルを表示する


index.html 
<!DOCTYPE html>
<html>

<head>
<style>
table {
  border-collapse: collapse;
}

th, td {
  border: solid 1px lightgray;
}
</style>
</head>

<body>
  <table>
    <tbody>
      <tr>
        <th>caption1</th>
        <th>caption2</th>
        <th>caption3</th>
      </tr>
      <tr>
        <td>1-1</td>
        <td>1-2</td>
        <td>1-3</td>
      </tr>
      <tr>
        <td>2-1</td>
        <td>2-2</td>
        <td>2-3</td>
      </tr>
      <tr>
        <td>3-1</td>
        <td>3-2</td>
        <td>3-3</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

投稿者
ラベル:

2019年12月10日火曜日

div要素を上下中央に配置したい


左寄せで上下中央に配置してみる

CSSの設定

div要素を上下中央の位置に配置しているのは #mainDiv

.middle_center は更に内部で上下左右中央に配置する


コード.gs 
function doGet() {
  return HtmlService.createHtmlOutputFromFile("index");
}
意訳
この機能がやること
指定したHTMLファイルを表示する


index.html 
<!DOCTYPE html>
<html>

<head>
    <style>
    #mainDiv {
      display: table-cell;
      width: 100vw;
      height: 100vh;
      border: solid 1px lightgray;
      vertical-align: middle;
    }
    
    .middle_center {
      display: table-cell;
      width: 120px;
      height: 120px;
      border: solid 1px lightgray;
      vertical-align: middle;
      text-align: center;
    }
    </style>
</head>

<body>
  <div id="mainDiv">
    <div class="middle_center">
      <div>middle center</div>
    </div>
  </div>
</body>
</html>


投稿者
ラベル:

テーブル要素を画面の上下中央に配置したい


画面の上下中央の位置にテーブルを配置したい


CSSの設定

上下中央のスタイルは #mainDiv

左右中央のスタイルは .table_center


コード.gs 
function doGet() {
  return HtmlService.createHtmlOutputFromFile("index");
}
意訳
この機能がやること
指定したHTMLファイルを表示する


index.html 
<!DOCTYPE html>
<html>

<head>
    <style>
    #mainDiv {
      display: table-cell;
      width: 100vw;
      height: 100vh;
      vertical-align: middle;
    }
    
    table, tr, td {
      border: solid 1px lightgray;
    }
    
    .table_center {
      margin: auto;
      border: solid 1px lightgray;
    }
    </style>
</head>

<body>
  <div id="mainDiv">
    <table class="table_center">
      <tbody>
        <tr>
          <td>
            <div>middle center</div>
          </td>
        </tr>
        <tr>
          <td>
            <div>middle center</div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</body>
</html>


投稿者
ラベル:

2019年12月9日月曜日

Material iconsでボタンを作りたい


Material iconsをボタン要素の中に入れて
こういうボタンを作ってみる。




コード.gs 
function doGet() {
  return HtmlService.createHtmlOutputFromFile("index");
}
意訳
この機能がやること
指定したHTMLファイルを表示する


index.html 
<!DOCTYPE html>
<html>
  <head>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <style>
      .transparent {
        border: none;
        background-color: transparent;
        outline: none;
      }
  
      .material-icons {
        width: 48px;
        height: 48px;
     font-size: 48px;
        color: gray;
        border: solid 2px lightgray;
        vertical-align: middle;
        border-radius: 100px;
        cursor: pointer;
      }
      
      i:hover {
        color: silver;
      }
    </style>
  </head>
  <body>
    <button id="refresh" class="transparent"><i class="material-icons material_icon">refresh</i></button>
  </body>
</html>


投稿者
ラベル:

2019年5月25日土曜日

フォーカス時の青い枠を消したい


この青枠を消すには

スタイルに outline: none を設定する

たとえばこんなスタイルを用意する
  .outline_none {
      outline: none;
  }

デモ

通常のテキストエリア



フォーカス時の青枠を消す



コード.gs 
function doGet() {
  return HtmlService.createHtmlOutputFromFile("index");
}
意訳
この機能がやること
指定したHTMLファイルを表示する


index.html 
<!DOCTYPE html>
<html>

<head>
  <style>
  .outline_none {
    outline: none;
  }
  </style>
</head>

<body>
  <textarea class='outline_none'></textarea>
</body>
</html>

投稿者
ラベル:

2019年5月20日月曜日

flexboxとposition:fixedを使ったときにぶつかった壁


Flexboxとposition: fixedを組み合わせたときにぶつかった壁

margin-leftで左端からの位置を指定してやることで解決しました

ぶつかった壁

いちご、めろん、りんごのテキストが入った3つのdivをFlexboxで横に並べて


こうしたかったけれど


全部左に寄ってこうなってしまった


※fixedを使わず素直にFlexboxだけでやればこの壁にはぶつからないので、この記事は役に立ちません


コード.gs 
function doGet() {
  return HtmlService.createHtmlOutputFromFile("index");
}

壁にぶつかったindex.html

index.html 
<!DOCTYPE html>
<html>

<head>
  <style>
    .flex_row{
      display: flex;
      flex-direction: row;
    }
    
    .fixed {
     position: fixed;
    }

    #div1 {
      width: 10vw;
      border: solid 1px red;
    }
    
    #div2 {
      width: 15vw;
      border: solid 1px green;
    }

    #div3 {
      width: 20vw;
      border: solid 1px blue;
    }
  </style>
</head>

<body>
<div id="main_div" class="flex_row">

  <div id="div1" class="fixed">
    いちご
  </div>
  
  <div id="div2">
    めろん
  </div>
  
  <div id="div3" class="fixed">
    りんご
  </div>

</div>

</body>
</html>


以下のようにmargin-leftを追加して解決しました

解決したindex.html

index.html
<!DOCTYPE html>
<html>

<head>
  <style>
    .flex_row{
      display: flex;
      flex-direction: row;
    }
    
    .fixed {
     position: fixed;
    }

    #div1 {
      width: 10vw;
      border: solid 1px red;
    }
    
    #div2 {
      width: 15vw;
      border: solid 1px green;
      margin-left: 10vw;
    }

    #div3 {
      width: 20vw;
      border: solid 1px blue;
      margin-left: 25vw;
    }
  </style>
</head>

<body>
<div id="main_div" class="flex_row">

  <div id="div1" class="fixed">
    いちご
  </div>
  
  <div id="div2">
    めろん
  </div>
  
  <div id="div3" class="fixed">
    りんご
  </div>

</div>

</body>
</html>
POINT
 





















ここにdiv1のwidth分のmargineを入れる





ここにdiv1とdiv2のwidth分のmarginを入れる

補足

margine-leftのイメージ


対象のdiv内でスクロールするにはoverflow: scrollも考えられますが
今回は対象のdiv以外を固定したくてfixedとmargin-leftを使いました

参考

position

overflow

flex

投稿者
ラベル:

2019年5月3日金曜日

クリックしたdiv要素に枠線を付けたい


elem.focus() でフォーカスできない要素でも
クリックしたら枠線をつけたい

ここでは div 要素に枠線を付けてみます



コード.gs 
function doGet() {
  return HtmlService.createHtmlOutputFromFile("index");
}
意訳
この機能がやること
指定したHTMLファイルを表示する


index.html 
<!DOCTYPE html>
<html>
<head>
<style>
  .highlight {
    border: solid 5px lime;
  }
</style>
</head>

<body>
<div id='main_div'>
  <div id='dvi1'>div1</div>
  <div id='div2'>div2</div>
  <div id='div3'>div3</div>
</div>
<script>
function elem(id) {
  return document.getElementById(id);
}

function removeClassList(parentId, tagName, className) {
  var child = elem(parentId).getElementsByTagName(tagName);
  for(var i = 0; i < child.length; i++) {
    elem(child[i].id).classList.remove(className);
  }
}

elem('main_div').onclick = addClassList;
function addClassList(e){
  removeClassList('main_div', 'div', 'highlight');
  var target = e.target;
  elem(target.id).classList.add('highlight');
}

</script>
</body>
</html>

補足

枠線を付けるときに、既存の枠線を消さないと枠線が残り続けるので、removeClassList ですべて消しています。

投稿者
ラベル:

2019年3月2日土曜日

テキストエリア内の行の高さを指定する


スタイルの指定で line-height: 150%; のように書いてみる。

デモ




コード.gs 
function doGet() {
  return HtmlService.createHtmlOutputFromFile("index");
}
意訳
この機能がやること
指定したHTMLファイルを表示する


index.html 
<!DOCTYPE html>
<html>

<head>
    <style>
      textarea {
        height: 120px;
        line-height: 150%;
      }
    </style>
</head>

<body>
  <textarea></textarea>
</body>
</html>
意訳
 




テキストエリアのスタイル
高さは120ピクセル
1行の高さは150％





テキストエリア

投稿者
ラベル: ,

2018年8月20日月曜日

要素の中身を編集可能にしたい contenteditable=true


このように書くとdiv要素の中身を編集可能にできる

<div contenteditable=true>edit here</div>


デモ
edit here


コード.gs 
function doGet() {
  return HtmlService.createHtmlOutputFromFile("index");
}
意訳
この機能がやること
指定したHTMLファイルを表示する


index.html 
<!DOCTYPE html>
<html>
<body>
  <div contenteditable=true>edit here</div>
</body>
</html>
意訳
 


編集可能なdiv要素

補足


JSで指定したいときはsetAttributeでこのように↓

ELEMENT.setAttribute("contenteditable", true);


参考

HTMLElement.contentEditable
https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/contentEditable

投稿者
ラベル:

2018年8月12日日曜日

imgタグで配置した画像のコントラストを変えたい


スタイルの設定でやってみる

filter: contrast(200%);


コード.gs 
function doGet() {
  return HtmlService.createHtmlOutputFromFile("index");
}
意訳
この機能がやること
指定したHTMLファイルを表示する


index.html 
<html>
<head>
    <style>
        img {
            filter: contrast(200%);
        }
    </style>
</head>
<body>
    <img src="画像URL">
</body>
</html>
意訳
 


imgタグの
コントラストを200%にする




URLを指定して画像を配置する

投稿者
ラベル:

2018年8月5日日曜日

iframe内の拡大縮小を無効化したい pointer-events: none;


styleにこう書くと無効化できる

iframe {
  pointer-events: none;
}

投稿者
ラベル:

2018年6月3日日曜日

cursor: pointerでカーソルを手のアイコンに変える


こういう手の形のポインターにしたい



コード.gs 
function doGet() {
  return HtmlService.createHtmlOutputFromFile("index");
}
意訳
この機能がやること
指定したHTMLファイルを表示する


index.html 
<!DOCTYPE html>
<html>
<head>
 <style>
 button {
  cursor: pointer;
 }
</style>
</head>
<body>
 <button>ボタン</button>
</body>
</html>
意訳
 



ボタンのスタイル
カーソルをポインターにする




ボタン

投稿者
ラベル:

2018年5月27日日曜日

opacityで要素を透明にする


要素をこのように半透明にしてみる





コード.gs 
function doGet() {
  return HtmlService.createHtmlOutputFromFile("index");
}
意訳
この機能がやること
指定したHTMLファイルを表示する


index.html 
<!DOCTYPE html>
<html>
  <head>
    <style>
    .opacity_05 {
      opacity: 0.5;
    }
    </style>
  </head>
  <body>
    <button>通常ボタン</button>
    <button class="opacity_05">半透明ボタン</button>
  </body>
</html>
意訳
 



opacity_05のスタイル
半透明にする




通常ボタン
半透明ボタン

投稿者
ラベル:

classListでスタイルをadd, remove, toggle, containsする


classListで要素のスタイルを操作してみる


デモ
(Apps ScriptのWebアプリで作ったもの)


コード.gs 
function doGet() {
  return HtmlService.createHtmlOutputFromFile("index");
}
意訳
この機能がやること
指定したHTMLファイルを表示する


index.html 
<!DOCTYPE html>
<html>
  <head>
    <style>
    .bg_pink {
      background-color: pink;
    }
    </style>
  </head>
  <body>
    <textarea id="ta"></textarea><br>
    <button id="add_bt">add</button>
    <button id="remove_bt">remove</button>
    <button id="toggle_bt">toggle</button>
    <button id="contains_bt">contains</button>
    
    <script>
    document.getElementById("add_bt").onclick = add_bt_clicked;
    document.getElementById("remove_bt").onclick = remove_bt_clicked;
    document.getElementById("toggle_bt").onclick = toggle_bt_clicked;
    document.getElementById("contains_bt").onclick = contains_bt_clicked;
    var ta = document.getElementById("ta");
    
    function add_bt_clicked(){
      ta.classList.add("bg_pink");
    }
    
    function remove_bt_clicked(){
      ta.classList.remove("bg_pink");
    }
    
    function toggle_bt_clicked(){
      ta.classList.toggle("bg_pink");
    }
    
    function contains_bt_clicked(){
      ta.value = ta.classList.contains("bg_pink");
    }
    </script>
  </body>
</html>
意訳
 



bg_pinkのスタイル
背景色をpinkにする




テキストエリア
addボタン
removeボタン
toggleボタン
containsボタン


addボタンをクリックしたらadd_bt_clickedを実行する
removeボタンをクリックしたらremove_bt_clickedを実行する
toggleボタンをクリックしたらtoggle_bt_clickedを実行する
containsボタンをクリックしたらcontains_bt_clickedを実行する
idがtaの要素を取得する

この機能がやること
idがtaのテキストエリアにbg_pinkのスタイルを追加する


この機能がやること
idがtaのテキストエリアからbg_pinkのスタイルを削除する


この機能がやること
idがtaのテキストエリアにbg_pinkのスタイルがなければaddしてあればremoveする


この機能がやること
idがtaのテキストエリアにbg_pinkのスタイルがあればtrueしてなければfalseを返す

投稿者
ラベル:

2018年5月26日土曜日

スタイルを複数設定するときの備忘録


今回設定したスタイル


.blue が設定されていたら青文字
.bt が設定されていたら背景色は灰色
.blueか.btどちらかが設定されていたら太文字
.blueと.btの両方が設定されていたら背景色はピンク


.blue.bt
と書くとblueとbtの両方が設定されているときのスタイル

.blue, .bt
と書くとblueまたはbtのどちらかが設定されているときのスタイル（共通のスタイル）


コード.gs 
function doGet() {
  return HtmlService.createHtmlOutputFromFile("index");
}
意訳
この機能がやること
指定したHTMLファイルを表示する


index.html 
<!DOCTYPE html>
<html>
<head>
  <style>
  .blue {
    color: blue;
  }
  
  .bt {
    width: 60px;
    height: 30px;
    background-color: lightgrey;
    border: none;
  }
  
  .blue.bt {
    background-color: lightblue;
  }

  .blue, .bt {
    font-weight: bold;
  }
</style>
</head>
<body>
  <label class="blue">ラベル</label>
  <button class="bt">ボタン</button>
  <button class="blue bt">ボタン</button> 
</body>
</html>
意訳
 



blueのスタイル



btのスタイル





  
blueとbt両方が設定されているときのスタイル



blueとbtに共通のスタイル





ラベルにblueのスタイルを設定
ボタンにbtのスタイルを設定
ボタンにblueとbtのスタイルを設定


投稿者
ラベル:

2018年4月22日日曜日

テキストボックスに削除ボタンを付ける


以下のように入力文字を削除する×アイコンを右端に表示する


ブラウザによって異なるようですが
以下の確認した環境では

<input type="search">

で表示できました


確認した環境
chrome バージョン: 65.0.3325.181（Official Build） （64 ビット）


コード.gs 
function doGet() {
  return HtmlService.createHtmlOutputFromFile("index");
}
意訳
この機能がやること
指定したHTMLファイルを表示する


index.html 
<!DOCTYPE html>
<html>
  <body>
    <input type="search">
  </body>
</html>
意訳
これはHTML5文書です


searchボックス

投稿者
ラベル:

Latest post

Google Formsでクイズを作りたい

Googleフォームには回答を判定するクイズモードがあります 今回はそのクイズモードで回答の判定とフィードバックについて書いていきます 「クイズモード」の表記： 日本語の表記は「テストにする」ですが 英語の表記は「Make this a quiz」となっています この記事ではそれ...