スプレッド構文(Spread Syntax)とは、「…foo」の形で記述され、配列やオブジェクトの要素を文字通り展開する構文のことをいいます。
例：配列の場合
例：オブジェクトの場合
■ネストしている場合
配列・オブジェクトの両方において、ネストしている場合ｇは注意が必要です。
下記のとおり、クローンした子要素は元の配列・オブジェクトを参照しています。
これを解決するには、ネストしている配列・オブジェクトも分割してスプレットする必要があります。
コードを書いていると、ネストが複雑になってコードが見にくくなることがよくあります。
そんなときは、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 = "奇数";
}
最近は、リモート勤務や Web 会議など、IT化が進んでいますね。
その一環として、ペーパーレス化もはじまっており、
PDF上に社内文書などにハンコを押すということも増えてくるのではないかと思います。
そこで、今回は Adobe の Acrobat Reader で、印章画像を登録して捺印する方法をまとめましたので
ぜひ、参考にして活用してください。
（下のリンクをクリックするとPDFが表示されます。ダウンロードなどして、ご活用ください。）
電子印鑑の捺印の仕方
注意：
今回、紹介した電子印鑑は、あくまで印章をPDF上に表示する（認印）方法です。法的に有効な電子サイン・電子署名とは異なりますので、ご利用にはご注意をお願いします。
div や p などのブロックレベルの要素の width の初期値は auto です。
width の値 auto は、親要素の水平方向のスペース全体を占めます。
よく似た設定に、width = 100% というのがありますが、こちらは要素の幅は親要素の幅と等しくなるように設定します。したがって、margin や border があるとその幅に影響を受けます。margin を設定すると、要素がはみだしてしまって困った経験は誰でもあると思います。
次で、suto と 100% の違いを見てみてください。
モーダルやメッセージなどの「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プロパティを０に設定することにより、margin:auto の場合は top, right, bottom, leftに適用される値が等しくなり、天地左右中央に配置されるようになります。
過去投稿してきた CSS の Tips（小技）１０個をまとめてみました。
ぜひ、参考にして魅力的なサイト作成してください。
①タイピングエフェクトをつけたい
②画像の被写体のみに影をつけたい
③JSを使用せずにスムーズスクロールを実装したい
④コンテンツを天地中央揃えにしたい
⑤長い文章を省略して「…」を付けたい
⑥カーソルを変更したい
⑦テキストに縁取り線をつけたい
⑧テキストのハイライトカラーを変更したい
⑨テキストにモーフィングアニメーションをつけたい
⑩marginを一括で設定して統一したい
owl セレクタ（ふくろうセレクタ）を利用すると、
各要素の上下のマージンを一括で設定して統一することができます。
＜解説＞
owl セレクタ ⇒ * + * というセレクタは、「ユニバーサルセレクタ (*)」 と「隣接セレクタ (+)」 を組み合わせており、連続する２番目以降の要素すべてを選択します。
* + * によって選択された要素の 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 だけで、テキストにモーフィング効果をつける方法を紹介します。
＜解説＞
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の::selection疑似要素を使用します。
.custom-highlighting::selection {
background-color: #8e44ad;
color: #fff;
}
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ではマウスカーソルの形状を自由に変えることができます。自分の用意した画像に変えることもできます。今回はその方法について紹介します。
次のように、自分の用意した画像をカーソルとすることもできます。
長い文章を省略して表示する方法を紹介します。
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
■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」です。