サンプル専用ページ

トモタヌキのサンプル集

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だけで動かすページ内リンクのスクロール移動のサンプル

.entry-content{display:flex;flex-direction:column;}.return{order:1;margin-top:5em;} この記事に書かれているコードは、以前に作ったスムーズスクロールのスクリプトです。IEの互換性を重視し、IE8でも動くように意識して書いてます。*1でも、チェックす…

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

window.addEventListener("load", function(){ $( ".entry-content a[href^='#']" ).on( "click", function( e ) { ( e.preventDefault ) ? e.preventDefault(): e.returnValue = false; // イベントキャンセル 1 var speed = 500; // 移動速度 var href = $…

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

#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;opacity:.6;transition:opacity 1s} ※ダミーテキストはフォント書体見本でよく使われる「あのイーハトーヴ…

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

CSS

#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;position:fixed;top:0;left:0;right:0;text-align:center}#in-page-link a[name=f1],#in-page-link a[name=fn1]{padding-to…

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

CSS

#bookmark-arrange .blogicon-bookmark.sample1-1{background:#008fde;border-radius:20%;color:#008fde;font-size:100px;height:1em;line-height:.8;overflow:hidden;text-align:center;vertical-align:bottom;width:1em}#bookmark-arrange .blogicon-bookm…

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

CSS

#css-icon .sample-date,#css-icon .sample5-date{color:#3d3f44;font-weight:700;font-size:80%;display:inline-block}#css-icon .sample-date{position:relative}#css-icon .sample-date::before{content:"";display:inline-block;width:10px;height:10px;…

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

CSS

#position-inline .sample-rel{background:#09f;color:#fff;height:10em;position:relative;text-align:center;width:10em}#position-inline .sample-abs{background:#f99;height:5em;opacity:.7;position:absolute;width:5em} テキストなし テキストあり①(…

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

CSS

#tumutumu-button div{-webkit-tap-highlight-color:transparent;margin:1em 0 2em}#tumutumu-button .button-push{cursor:pointer;transition:all .1s ease}#tumutumu-button .button-push:hover{text-decoration:none;transform:scale(1.1,1.1)}#tumutumu-…