PlusOne Blog

記事一覧

NEW 【JavaScript】アロー関数(Arrow function)とは?

アロー関数(Arrow function)を利用すると、関数リテラル(無名関数 匿名関数)をシンプルに記述することができるようになります。
コードも可読性を上げて、メンテナンスを容易にするためにも、ぜひ覚えて使えるようになりましょう。
 
■基本的なアロー関数の記述方法

   (引数) => {関数の本体}

 

 
■アロー関数は条件によってさらに簡素化できます。
①関数の本体が一文である場合は、{…}の「{」と「}」を省略することができます。

②引数がひとつの場合、引数のカッコも省略できます。

③引数がない場合、「()」と記述します。

 
 
■アロー関数での、this の取り扱いについて
・通常の無名関数で this を使用すると、その呼び出し元のオブジェクトになります。

・一方、アロー関数式で宣言された関数は、宣言された時点で、thisを確定(=束縛)させてしまいます。

 

 

この記事を読む

NEW 【JavaScript】分割代入(Destructuring assignment)とは?

分割代入(Destructuring assignment)とは、配列やオブジェクトの要素を取り出して個別の変数に代入するのを簡単に行えることをいいます。
 

 
取り出したプロパティ値を、名前の異なる変数に割り当てることもできます。

 
対応するプロパティがない変数には、undefinedが入ります。

 
■この構文とスプレッドの組み合わせで、要素を取り出しつつ残りを変数に代入することが可能です。

ネストしたオブジェクトの場合

 

 

この記事を読む

NEW 【JavaScript】スプレッド構文(Spread Syntax)とは?

スプレッド構文(Spread Syntax)とは、「…foo」の形で記述され、配列やオブジェクトの要素を文字通り展開する構文のことをいいます。
 
例:配列の場合

 
例:オブジェクトの場合

 
■ネストしている場合
配列・オブジェクトの両方において、ネストしている場合gは注意が必要です。
下記のとおり、クローンした子要素は元の配列・オブジェクトを参照しています。

これを解決するには、ネストしている配列・オブジェクトも分割してスプレットする必要があります。

 

 

この記事を読む

【JavaScript】ネストを減らしてコードを綺麗にしたい

コードを書いていると、ネストが複雑になってコードが見にくくなることがよくあります。
そんなときは、return を利用して、見通しの良いコードを書くことができます。
 
普通に記載すると下記のようにネストが多くなり、見通しが悪いコードになりますが、

   let changeiput = (e)=>{  
    if (e.currentTarget.value % 2 == 0) {
       meytext.textContent = "偶数"
    }else{
       meytext.textContent = "奇数";
    }
   }

 
次のように return を使用して、見通しが良いコードにすることができます。

   let changeiput = (e)=>{  
     if (e.currentTarget.value % 2 == 0) return meytext.textContent = "偶数"
     return meytext.textContent = "奇数";
   }

 

 
 

 

この記事を読む

Acrobat Reader の 電子印鑑捺印の仕方

最近は、リモート勤務や Web 会議など、IT化が進んでいますね。
その一環として、ペーパーレス化もはじまっており、
PDF上に社内文書などにハンコを押すということも増えてくるのではないかと思います。
そこで、今回は Adobe の Acrobat Reader で、印章画像を登録して捺印する方法をまとめましたので
ぜひ、参考にして活用してください。
(下のリンクをクリックするとPDFが表示されます。ダウンロードなどして、ご活用ください。)
 
WindowsUpdateによる印刷トラブル対処方法
 
 
注意:
今回、紹介した電子印鑑は、あくまで印章をPDF上に表示する(認印)方法です。法的に有効な電子サイン・電子署名とは異なりますので、ご利用にはご注意をお願いします。
 
 

 

この記事を読む

【CSS】width の auto について

div や p などのブロックレベルの要素の width の初期値は auto です。
width の値 auto は、親要素の水平方向のスペース全体を占めます。
 

 
よく似た設定に、width = 100% というのがありますが、こちらは要素の幅は親要素の幅と等しくなるように設定します。したがって、margin や border があるとその幅に影響を受けます。margin を設定すると、要素がはみだしてしまって困った経験は誰でもあると思います。
 

 
次で、suto と 100% の違いを見てみてください。
 

 
 

 

この記事を読む

【CSS】モーダル(display:fixed)を天地左右中央に配置する方法

モーダルやメッセージなどの「position: fixed;」の要素を。天地左右中央に表示する時の新しい記述方法を紹介します。
今までは、transform を(負のパーセンテージ)を使用したりで、少し複雑な記述方でしたが、新しい記述方法では簡素で理解しやすい記述方法になっています。
 

 
今までの記述法は、下記のように top,left と transform の translate を使用して設定していました。

  position:fixed;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);

 
新しい記述方法は insetプロパティ を使用して次のように記述します。

  position: fixed;
  inset: 0;
  margin: auto;

 
insetプロパティとは、 top, right, bottom, left に対応する一括指定のプロパティです。

  /* <length> 値 */
 inset: 10px; /* すべての辺に適用される値 */
 inset: 4px 8px; /* 上/下 左/右 */
 inset: 5px 15px 10px; /* 上 左/右 下 */
 inset: 2.4em 3em 3em 3em; /* 上 右 下 左 */

 /* 包含ブロックの幅 (左/右) または 高さ (上/下) に対する <percentage> */
 inset: 10% 5% 5% 5%;

 /* キーワード値 */
 inset: auto;

 /* グローバル値 */
 inset: inherit;
 inset: initial;
 inset: unset;

ここでは、このinsetプロパティを0に設定することにより、margin:auto の場合は top, right, bottom, leftに適用される値が等しくなり、天地左右中央に配置されるようになります。
 
 

 

この記事を読む

【CSS-tips】知っていると便利なCSS小技

この記事を読む

【CSS-tips⑩】marginを一括で設定して統一したい

owl セレクタ(ふくろうセレクタ)を利用すると、
各要素の上下のマージンを一括で設定して統一することができます。
 

 
<解説>
owl セレクタ ⇒ * + * というセレクタは、「ユニバーサルセレクタ (*)」 と「隣接セレクタ (+)」 を組み合わせており、連続する2番目以降の要素すべてを選択します。
* + * によって選択された要素の margin-top を設定することで、要素間のマージンを一括に設定できることになります。

  * {
    margin: 0;  /* ブラウザ依存のマージンはリセット */
  }

  html {
    font-size: 100%;  /* ユーザの指定した表示サイズを尊重する */
    line-height: 1.5;
  }

  main > * + * {
    margin-top: 0.5rem;  /* サイト全体で上下マージンを統一 */
  }

  main > * + h2,
  main > * + h3,
  main > * + h4,
  main > * + h5,
  main > * + h6 {
    margin-top: 1.5em;  /* ヘッダ要素の上マージンは広めに取る */
  }

 
 

 

この記事を読む

【CSS-tips⑨】テキストにモーフィングアニメーションをつけたい

css だけで、テキストにモーフィング効果をつける方法を紹介します。
 

 
<解説>
CSSは次のとおりです。

  *, *::before, *::after {
    padding: 0;
    margin: 0 auto;
    box-sizing: border-box;
  }

  .morphing {
    position: relative;
    display:flex;
    justify-content:center;
    align-items: center;
    font-size: 18px;
    background-color: #4DB6AC;
    color: #222;
    min-height: 50px;
    filter: contrast(5) blur(1px);
  }
  .word {
    position: absolute;
    animation: word 16s infinite ease-in-out;
  }
  .word:nth-child(1) {
   animation-delay: -16s;
  }
  .word:nth-child(2) {
    animation-delay: -14s;
  }
  .word:nth-child(3) {
    animation-delay: -12s;
  }
  .word:nth-child(4) {
    animation-delay: -10s;
  }
  .word:nth-child(5) {
   animation-delay: -8s;
  }
  .word:nth-child(6) {
   animation-delay: -6s;
  }
  .word:nth-child(7) {
   animation-delay: -4s;
  }

  @keyframes word {
    0%, 5%, 100% {
      filter: blur(0px);
      opacity: 1;
    }
    20%, 80% {
      filter: blur(1em);
      opacity: 0;
    }
  }

 
 

 

この記事を読む

【CSS-tips⑧】テキストのハイライトカラーを変更したい

ユーザーがハイライト表示にした部分(テキストをマウスでドラッグ)にスタイルを適用します。
 

 
<解説>
CSSの::selection疑似要素を使用します。
 

   .custom-highlighting::selection {
      background-color: #8e44ad;
      color: #fff;
   }

 
 

 

この記事を読む

【CSS-tips⑦】テキストに縁取り線をつけたい

CSSでテキストに縁取り線をつける方法を紹介します。
また、この方法を応用して少しずらしてデザイン性の高いテキストを表現することもできます。
 

<コード>
ベンダープレフィックスを付与して適用します。
 

    -webkit-text-stroke: 3px #ffffff   //shorthand property
    -webkit-text-stroke-width: 3px;  //縁取り線の太さ
    -webkit-text-stroke-color: #ffffff;  //縁取り線の色
    -webkit-text-fill-color: #9effff;  //縁取り線の内側の色(=テキストの色)

 

テキストに縁取り線から少しずらしたテキスト

 
<対応ブラウザ>
・すべてのブラウザで、ベンダープレフィックス(-webkit-)が必要す。
Can I use

 

 

この記事を読む
記事一覧に戻る