投稿

ラベル(develop)が付いた投稿を表示しています

Font Awesome

イメージ
※ サムネイルはPhotoshopのAIで生成しました ホントいまさら感大有りだけども。 Font Awesome 5 Free。正確にはVer5.15.4をBloggerで読み込んでアイコンを表示しようってハナシ〜♫ <head>内に以下を設置するだけ。 <link href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" rel="stylesheet"/> あとは Font Awesome でアイコンを探してタグを埋め込むだけ <i class='fas fa-smile-wink fa-10x' style='color:#f4d923'></i> ただし!Freeのモノしか使えないのでお気をつけてください

Infinitely scrolling 'marquee'

イメージ
テキストがスクロールしてくれるマーキータグ<marquee>(別に使えないくはない)は便利だった。けどスピードは変えられない、逆方向スクロールも無理だった。意外にVanilla JSで探してもなかった。 いまお手伝いしているところにいるエンジニアさんも同じようなもの探してて見つけてくれたのが Constant velocity scroll slider independent of number Vanilla JS (Web Animations API) ってヤツ。うーん!最高じゃん!!ってことで実装してみたら、このコードは1つ目の要素の横幅を取得して全体のスライド幅を決めるので各要素の横幅が違うとズレが生じることが判明。 じゃー修正、改修、改造、パクりで出来たのが以下。 See the Pen Infinitely scrolling 'marquee' (Vanilla JS/ES6) by ekkun ( @ekkun ) on CodePen . @sho_doiさん 参照元ソースを教えてくれてありがとー! via @web_walking_nak

Source Code

イメージ
Bloggerでソースコードをキレイに出力する。ってことで Google-code-prettify を使用。どうやら古いライブラリみたいでダウンロードかCDNはjsDelivrのが正解っぽい。 <head>内に以下を設置。 <script src='https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js?skin=sons-of-obsidian'/> <pre class="prettyprint .linenums lang-html">   ココにコード </pre> .prettyprintが基本。 .linenumsが行数表示。 .lang-{言語}が言語。 必要最低限はそのくらい。 HTML <div> <p>テスト</p> </div> JavaScript (() => { document.addEventListener('DOMContentLoaded', () => { modernFunction(); }); // Babelで変換されるかどうかのテストコード const modernFunction = () => { const obj = { a: 'これが出力されれば', b: 'Babelを通じて' }; const newObj = { ...obj, c: '正常に変換されてます' }; console.log('Index.jsを読み込んでいます', newObj); }; })(); ちなみにテーマは以下の5つ。 Default Desert (skin=desert) Sunburst (skin=sunburst) Sons-Of-Obsidian (skin=sons-of-obsidian) Doxy (skin=doxy)