サンプル専用ページ

トモタヌキのサンプル集

inputとかを使わないCSSだけのハンバーガーメニューのサンプル

CSS

#sample-html-css .menu { position: fixed; top: 0; left: 0; outline: none; z-index: 100; } #sample-html-css .menu::before { position: absolute; top: 10px; left: 10px; font-family: blogicon; content: "\f003"; font-size: 30px; line-height: 1;…

JavaScriptだけで動かすページ内リンクのスクロール移動のサンプル

if ( location.href.indexOf('https://sample.tomotanuki.com/entry/scroll-move-javascript') === 0 ){ const cssStyle = '.entry-content{display:flex;flex-direction:column;}.return{order:1;margin-top:5em;}', css = document.createElement('style')…

jQueryを使った、はてなブログの脚注もスクロール移動するスクリプトのサンプル

if ( location.href.indexOf('https://sample.tomotanuki.com/entry/scroll-move-jquery') === 0 ){ const cssStyle = '.entry-content{display:flex;flex-direction:column;}.return{order:1;margin-top:5em;}', css = document.createElement('style'), ru…

jQueryを使っていない、シンプルなトップに戻るボタンの動作確認サンプル

if(location.href.indexOf('https://sample.tomotanuki.com/entry/top-of-page')===0){ const cssStyle = '#top-of-page #page-top{font-size:0;position:fixed;bottom:16px;right:16px;opacity:0}#top-of-page #page-top.fade-in{color:#000;font-size:60px…

ヘッダー固定時のページ内リンクのズレを解消するCSSサンプル

CSS

if ( location.href.indexOf('https://sample.tomotanuki.com/entry/in-page-link-fixed') === 0 ){ const cssStyle = '#in-page-link section{margin:0 0 3em}#in-page-link .fixed{background:rgba(0,0,0,.5);color:#fff;line-height:50px;height:50px;pos…

はてなブックマークアイコンをCSSでアレンジしたサンプル

CSS

if ( location.href.indexOf('https://sample.tomotanuki.com/entry/hatebu-icon-css') === 0 ){ const cssStyle = '#bookmark-arrange .blogicon-bookmark.sample1-1{background:#008fde;border-radius:20%;color:#008fde;font-size:100px;height:1em;line-…

CSSだけで作ったアイコン風デザインのサンプル

CSS

if ( location.href.indexOf('https://sample.tomotanuki.com/entry/css-only-icon') === 0 ){ const cssStyle = '#css-icon .sample-date,#css-icon .sample5-date{color:#3d3f44;font-weight:700;font-size:80%;display:inline-block}#css-icon .sample-da…

インラインレベルのposition:absoluteが、何の位置指定もしていないと親要素のtext-alignの影響を受ける実験サンプル

CSS

if ( location.href.indexOf('https://sample.tomotanuki.com/entry/position-relative-absolute') === 0 ){ const cssStyle = '#position-inline .sample-rel{background:#09f;color:#fff;height:10em;position:relative;text-align:center;width:10em}#pos…

ツムツム風ボタンのサンプル

CSS

if(location.href.indexOf('https://sample.tomotanuki.com/entry/tumutumu-button') === 0){const cssStyle='#tumutumu-button div{-webkit-tap-highlight-color:transparent;margin:1em 0 2em}#tumutumu-button .button-push{cursor:pointer;transition:al…