投稿

ラベル（HTML）が付いた投稿を表示しています

スポンサー

【JS】別ページ/別サイトに移動させる方法

HTMLで移動 aタグを指定して移動することができる <a href="パス名">テキスト</a> JavaScriptで移動 JSで移動するにはこのようになります。 // 通常の遷移 window.location.href = 'パス名'; // 新しいタブでページを開く window.open('パス名', '_blank'); また、HTMLとJavaScriptの応用として、このようにすることもできます。 <a onclick="window.location.href = 'パス名';">テキスト</a>
続きを読む

【CSS】要素に影を！「box-shadow」

box-shadowとは box-shadowは、要素に影を作ることができます。 さらに、box-shadowでは、細かく影を設定することができるほか、簡単にできる点が挙げられます。 ここにサンプルを表示します。 box-shadowで影を出しています。 このように、とても簡単に自然な影を出すことができます。 また、これはぼかし付きの影ですが、ぼかしなしの影もだすことができます。 box-shadowの使い方 ◯◯ { box-shadow: 右の向きpx 下の向きpx ぼかしpx 広がりpx 色 内側指定; } 上や左に影を出す場合は、下の指定を-に指定すると上になります。 詳しくは後述します。 ぼかしなしの影 右と下に影を表示させる例はこちらです。 .example { box-shadow: 4px 4px; } これを適用すると次のようになります。 box-shadowで影を出しています。 上に影を表示させたい場合は-を使用します。 上と下に表示する例 .example { box-shadow: -4px -4px; } box-shadowで影を出しています。 影の色を変える 初期では影の色が黒になっていますが、色も自由に変更することができます。 背景の色をグレーに変更する例です。 .example { box-shadow: 4px 4px gray; } box-shadowで影を出しています。 このようになります。 影のぼかし 影をぼかすことで、より自然な影を生成することができます。 影をぼかすには次のように指定します。 .example { box-shadow: 4px 4px ぼかしpx gray; } ぼかしを4pxに指定した例です。 box-shadowで影を出しています。 また、8pxに指定すると次のようになります。 box-shadowで影を出しています。 より、やわらかな影になります。 影の広がりを調整 影の広がりを調整するには、次のように指定します。 .example { box-shadow: 4px 4px ぼかしpx 広がりpx...
続きを読む

Twitterカードとは？使い方を解説！！

まずは... まずはTwitterカードの基本を押さえておきましょう。 Twitterカードとは、ほとんどのサイトで使用されている、簡単に言うと集客カードです。 例えばこんな感じです。 https://******.com これだとクリックしたくはなりません。 ではこれだとどうでしょう。 未知なる世界へ - テストサイト 私たちは、未知なる世界を目指し、日々、成長して... こちらの方がクリックしたくなります。 ※実際の表示とは全く異なります。 Twitterカードは、リンクを目立たせるだけでなく、クリック率や滞在時間もアップするものになります。 導入方法 以下のタグをhead内に入力します。 <meta name="twitter:card" content="summary" /> <meta name="twitter:site" content="ツイッターのID(アカウント)" /> <meta property="og:url" content="サイトURL" /> <meta property="og:title" content="題名" /> <meta property="og:description" content="説明" /> <meta property="og:image" content="画像URL" /> 解説をしていきます。 まず、最初の二つなのですが、これはTwitter専用です。そのほかのものは、そのほかのSNSなどにも適用されます。(LINE等) 最後の画像は、とても重要な役割を果たします。 なぜなら、人は文字を読むよりも、画像の方が「見る」からです。 タイトル、説明では収まらないものを画像に存分に詰め込みましょう！ ※説明文はスマホでは表示されません 補足 こんな時があるかもしれません。 Twitterカード...
続きを読む

広告

このブログの人気の投稿

【CSS】アニメーション等動作がカクカクする時の対処法

始めに 参考にさせていただいた元記事 カクカクするのはブラウザごとに異なる アニメーション時のチラつきの原因はほとんどが「アニメーション」として処理されていないということです。 一般的なブラウザ(Chrome,Firefox,Safari,Opera)の最新バージョンであればあまり気にする必要もないのですが、一部のデバイス内のアプリ等(cordova等)では古いバージョンのブラウザを使用している場合や、古いデバイスであると古いブラウザになってしまうでしょう。 (IEでもチラつきが目立つ。また、Edgeの場合もIEとほぼ変わらずチラつきがみられる。) 今回は一般的な3つの対処法を見ていきます。 対処法 1 サイトによっては ○○{ transform: translate3d(0,0,0); } などというものもありますが、これはブラウザに無駄な処理を与えてしまっているため良い対処法ではない他、直らない場合もあるのでこれは軽く頭に入れておく程度でいいでしょう。 2 次の対処法は、will-changeです。 初めて聞く方もいると思いますが、will-changeを使用することで、要素にどのような変更を加えるかを先にブラウザに伝えることができます。 変形処理を伝えるときはこのようにします。 ○○{ will-change: transform; } また、アニメーションは次のようにします。 ○○{ will-change: animation; } さらに、複数の処理を同時に行うときはカンマ( , )で区切ることでまとめて記述することができます。 ○○{ will-change: transform,animation,position; } このようにすることで、translate3dのように不要な処理なく効率的に処理することができます。 3 また、この方法でも直る場合があります。 ○○{ -webkit-backface-visibility: hidden; backface-visibility: hidden; } この要素について詳しくはこちらを見ていただくといいと思います。 backface-visibility 最後に 一番最適な対処法は2番目の...
続きを読む

超軽量DOM操作ライブラリdom_sen.js var2

始めに 説明は こちら をご覧ください。 使い方 まず、もちろんですが読み込み方です。ライブラリを使用するソースコードより早い位置にこのソースコードを記述します。 <script src="https://tamralworld.com/library/dom_sen_v2.js"></script> ※V1を利用したい方はV2のエリアを置き換えてください V2での変更点 d_属性の操作可能なCSSに新たに下記の指定をすることができます。 d_z_index() d_box_sizing() d_font_size() さらに、qsa関数はv1時点で操作可能なCSSがdisplayのみだったものに対し、d_関数と同様のCSSが利用可能となりました。 qsa関数とd_関数の両方にvalue、 qsa_value() d_value() (指定のみ)が追加されました。
続きを読む

超軽量DOM操作ライブラリdom_sen.js var1

始めに 説明は こちら をご覧ください。 使い方 まず、もちろんですが読み込み方です。ライブラリを使用するソースコードより早い位置にこのソースコードを記述します。 <script src="https://tamralworld.com/library/dom_sen_v1.js"></script> そして使用可能な関数一覧(使い方はのち) qsa() qs() qsa_html() qsa_text() qsa_display() d_html() d_text() d_CSS各指定()* *後程詳しく 関数の使い方 qsa( CSSセレクタ ) document.querySelectorAll() の省略です。 qs( CSSセレクタ ) document.querySelector() の省略です。 qsa_html( CSSセレクタ , HTML) Jqueryの $(CSSセレクタ).html(HTML); と同様です。 qsa_text( CSSセレクタ , テキスト) Jqueryの $(CSSセレクタ).text(テキスト); と同様です。 qsa_display( CSSセレクタ , CSS[display]の値 ); CSSセレクタで選択した要素のスタイルのdisplayを変更します。 d_html( 属性ネーム , 属性ネームの値 , HTML ) 属性ネームは要素の属性に「d_属性ネーム="属性ネームの値"」のように指定されている属性のHTMLを変更します。 例: <span d_html="script1">変更前</span> <script> d_html("html","script1","変更後"); //属性d_htmlがscript1の要素のHTMLを「変更後」に変更 </script> d_text( 属性ネーム , 属性ネームの値 , テキスト ) 属性ネームは要素の属性に「d_...
続きを読む