PlusOne Blog

2021年6月に投稿した記事

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

HTML/CSS

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⑧】テキストのハイライトカラーを変更したい

HTML/CSS

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

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

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

　
　

　

この記事を読む

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

HTML/CSS

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

　

　

この記事を読む

【CSS-tips⑥】カーソルを変更したい

HTML/CSS

CSSではマウスカーソルの形状を自由に変えることができます。自分の用意した画像に変えることもできます。今回はその方法について紹介します。


　
　
次のように、自分の用意した画像をカーソルとすることもできます。

　
　

　

この記事を読む

【CSS-tips⑤】長い文章を省略して「…」を付けたい

HTML/CSS　WordPress

長い文章を省略して表示する方法を紹介します。
　

１行の場合

  text-overflow: ellipsis;

・white-space を nowrap に設定する必要があります。
・overflow を hidden に設定する必要があります。
　

　

複数行の場合

  display: -webkit-box;
  -webkit-line-clamp: 3;  //表示する行数を指定
  -webkit-box-orient: vertical;

　

＜対応ブラウザ（line-clamp）＞
・IE以外のブラウザはほぼ対応しています。
Can I use
　

　

WordPress の場合

■the_excerpt を使用する
　投稿ページの本文を抽出して、長い文章を省略するときに利用します。

  <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
  <?php the_excerpt(); ?>
  <?php echo get_the_excerpt(); ?>
  <?php endwhile;endif; ?>

　
　省略する文字数を変更したい場合は、次のコードを functions.php に記載します。

　　function twpp_change_excerpt_length( $length ) {
  　　return 50; 　//抜粋する文字数
　　}
　　add_filter( 'excerpt_length', 'twpp_change_excerpt_length', 999 );

　
　省略記号[…]を変更したい場合は、次のコードを functions.php に記載します。

　　function twpp_change_excerpt_more( $more ) {
  　　return '......'; 　//省略記号にしたい文字
　　}
　　add_filter( 'excerpt_more', 'twpp_change_excerpt_more' );

　
　「続きを読む」とリンク付きの文字を入れる

　　function twpp_change_excerpt_more( $more ) {
  　　$html = '<a href="' . esc_url( get_permalink() ) . '">[...続きを読む]</a>';
  　　return $html;
　　}
　　add_filter( 'excerpt_more', 'twpp_change_excerpt_more' );

　
■wp_trim_words を使用する
　タイトルなど、本文以外でも省略したい場合に使用できます。

　　<?php echo wp_trim_words( get_the_title(), 30 , '…' ); ?>

第１引数は必須項目。切り取りたい文字列を指定します。
第２引数は抽出する文字数。デフォルト値は55文字に設定されています。
第３引数では切り取った文字列の後に追加したい文字を指定できます。デフォルトでは「null」です。
　

　

　

この記事を読む

【CSS-tips④】コンテンツを天地中央揃えにしたい

HTML/CSS

フレックスボックスを利用すれば、どんな要素でも天地中央揃えできます。
　

＜コード＞

  display:flex;
  align-items: center;
  justify-content: center;

　
　

　

この記事を読む

【CSS-tips③】JSを使用せずにスムーズスクロールを実装したい

HTML/CSS

CSSのみで、リンク先へスクロールするとき、スムーズにスクロールすることができます。
　

　
＜解説＞
　

　　　scroll-behavior: auto / smooth;

　
auto : スクロールするボックスは瞬時にスクロールします。
smooth : スクロールするボックスは円滑ににスクロールします。
　
＜対応ブラウザ＞
・safri は非対応のため、使用する場合は注意が必要です。
Can I use

　

　

この記事を読む

【windows10】タスクバーの天気を自分の地域に変更する方法

windows

windows10 の自動アップデートが終わったら、画面右下のタスクバーに天気が表示されていませんか？
とても便利なのですが、この天気予報の地域が自分の地域でなくて変更したいけど、変更する方法が分からないという人はいませんか。
この天気予報を自分の地域に変更する方法を紹介します。
　

　

天気予報の地域を確認する

　

１、表示されている天気予報をクリック

　

　

２、天気予報とニュースのウインドウが表示。

・天気予報の箇所に天気予報の地域が表示されます。
　

　

天気予報の地域を変更する

　

１、表示されている天気予報をクリック

　

　

２、天気予報の地域の右側にあるをクリック

　

　

３、「場所を編集」をクリック

　

　

４、「場所の指定」をクリックして、指定したい地域を入力⇒「保存」をクリック

・タブレットなど、現在地を測定できる環境の場合は、「常に現在地を検出する」をチェックすると、現在地の天気を表示することができます。
　

　

以上で、自分の指定した地域の天気を表示することができるようになります。

　

　

この記事を読む

【CSS-tips②】画像の被写体のみに影をつけたい

HTML/CSS

PNGなどの背景が透過されている画像の場合は、box-shadow プロパティを使用すると透過背景を含めた全体に影がついてしまいますが
filter: drop-shadow を利用することで、被写体のみに影をつけることができます。
　

　
＜解説＞
　

　　　filter: drop-shadow(offset-x offset-y blur-radius color)

　
　
＜対応ブラウザ＞
・IEを除く、ほぼすべてのブラウザで対応している
Can I use

　

　

この記事を読む

【CSS-tips①】タイピングエフェクトをつけたい

HTML/CSS

CSSのみで、テキストがタイピングで入力されたようなエフェクトをつけたい方法を紹介します。
　

　
＜解説＞
　

　　　animation: typingdemo 8s steps(36), blinking .5s step-end infinite alternate;
　　　
　　　@keyframes typingdemo {
  　　　from {
    　　　width: 0
  　　　}
　　　}
    
　　　@keyframes blinking {
  　　　50% {
    　　　border-color: transparent
  　　　}
　　　}

　
①「.wrapper」に flex-box で、テキストを上下左右に中央揃え
　
②「.typing-demo」の横幅の長さを文字数にするため、「ch」の単位で設定
「ch」の単位は、「0」を表示したときの文字の横幅の長さを「1ch」とする単位。
このため、「0」と他の文字の横幅サイズがほぼ同じフォントを使う必要がある。
　
③「.typing-demo」を animation で、文字の横幅を 0 から設定している文字幅まで、22ステップにわけて延ばしていく。
　
④テキスト最後のカーソルは、罫線をアニメーションで表示・非表示を切り替えて表現している。
　
　
★→この手法は、あくまで使用するフォントが「0」と他の文字の横幅が同じでないとうまくできない。どうしても、そうでないフォントを使用したい場合は、各パラメータを細かく設定する必要がでてくる。
　

　

この記事を読む

【JavaScript】form の radio ボタンをJSで取得する

JavaScript

form の radio ボタンをJSで取得する場合、RadioNodeList を利用すると、簡単に取得できます。
　

　　<form id="radio_ex" action="./form.php">
	<input type="radio" name="plusone" value="aaa">選択肢1
	<input type="radio" name="plusone" value="bbb">選択肢2
	<input type="radio" name="plusone" value="ccc" checked>選択肢3
	<input type="radio" name="plusone" value="ddd">選択肢4
　　</form>

    // form要素を取得
    let element = document.getElementById( "radio_ex" ) ;

    // RadioNodeListを取得
    let elements = element.plusone ;	// RadioNodeList

    // HTMLOptionsCollectionの内容
    console.log( elements[0] ) ;	// 選択肢1
    console.log( elements[1] ) ;	// 選択肢2
    console.log( elements[2] ) ;	// 選択肢3
    console.log( elements[3] ) ;	// 選択肢4

    // 現在、選択されている値を取得
    console.log( elements.value ) ;	// "ccc" (例)

    //チェックを付ける
    elements[0].ckecked = true;

    //チェックを外す
    elements[0].ckecked = false;

　
使用例

　
＜対応ブラウザ＞
・メジャーブラウザはほぼ全て対応しています。
Can I use
　
　

　

この記事を読む

【JavaScript】スクロールの開始位置を常に一番下に設定する方法

JavaScript

スクロールの開始位置を常に一番下に設定する方法を紹介します。
ラインを使い慣れてるユーザーには、
常に一番下に最新メッセージを表示させたプラットフォームが見慣れてるかもですね。
　

　
＜解説＞

　　　let target = document.getElementById('scroll-inner');
　　　target.scrollIntoView(false);

　
target.scrollIntoView()は、要素が（ブラウザのウィンドウ上の）表示範囲に入るまでページをスクロールします。
引数を省略または true とすることで上端に来るようにスクロールし、false ならば下端に来るようにスクロールします。

　

　

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