寿司の配達をしていたらヤクザの事務所で囲まれた話
「お前、どんだけ待たすねん。◯すぞ」 私は特上の寿司が入った桶を持ちながら、ストライプのスーツを着た4人の男たちに囲まれていた。そこはヤクザの事務所だった。 大学生のとき寿司の配達のバイトをしていた。 なぜそのバイトにしたかというと、まずデリバリーなので時給が高かった。1200円くらいだったと思う。その当時の時給は今と違って平均がわりと低く、1000円以下の仕事もたくさんあった。 場所も一人暮らしのマンションから近かったのでよかった。歩いて15分もかからない。高校生の時からバイクは好きだったので、寿司を運んで帰ってくる仕事は性に合っていると思った。 面接に行ってみると店長にすぐ働いてくれと言われた。話しやすい気軽な人、という感じが一人目の店長の印象だった。 一人目の店長というからには店長は変わったのだとわかっていただけると思う。この店長は二週間であっけなくいなくなってしまった。 陽気なこの
[JS]一昔前と比べて、かなり簡単に！ページの機能を紹介するツアーを実装できる超軽量スクリプト -Driver
ページ上の任意の要素を目立つようにハイライトさせたり、ページの機能を紹介するツアーを実装できるスクリプトを紹介します。 一昔前までのは実装が少し面倒だったり、jQueryなど他のスクリプトに依存していましたが、ここで紹介するのは実装が非常に簡単で、超軽量の4kb！ しかも依存は一切無し！ 既存ページにもすぐに利用できると思います。 Driver -GitHub Driverの特徴 Driverのデモ Driverの使い方 Driverの特徴 ページ上の任意の要素をハイライト表示します。 Webアプリの機能を順番に紹介することもできます。 ユーザーにフォーカスシフターを追加します。 キーボードでも操作可能で、ユーザーフレンドリーです。 実装が簡単で、他のスクリプトやスタイルシートの依存はありません。 わずか4kbの超軽量バニラ スクリプト。 強力なAPIを備えており、高度なカスタマイズも可能
![[JS]一昔前と比べて、かなり簡単に！ページの機能を紹介するツアーを実装できる超軽量スクリプト -Driver](https://cdn-ak-scissors.b.st-hatena.com/image/square/22f66ab471ebdd64b5590aad13ac85273ede28f7/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201801%2F2018031401-01.png)
CSSアニメーションで円形プログレスバーを作る方法 - Qiita
CSSアニメーションで円形プログレスバーを作ってみました。JavaScriptやSVG、画像は使っていません。 サンプル（GIF） HTML .circle { position: relative; width: 120px; height: 120px; background: #333; border-radius: 50%; text-align: center; overflow: hidden; z-index: 1; } .circle::before { content: ""; display: block; position: absolute; top: 0; left: -60px; width: 120px; height: 120px; background: #999; transform-origin: right 60px; z-index: 2; ani
画像にマウスホバーでグラデーションのオーバーレイエフェクト
Result たまに見かけるホバーエフェクト。グラデーションのオーバーレイがマウスホバーでスライドインする、みたいなの css.c-preview { background: #000; background: linear-gradient(135deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 13%, rgba(0,0,0,1) 32%, rgba(116,132,190,1) 47%, rgba(208,133,109,1) 80%, rgba(69,252,212,1) 94%); background-size: 400% 400%; background-repeat: no-repeat; display: flex; width: 500px; height: 500px; max-width: 100vw; max-height: 100vh;
CSSだけで全画面の背景動画を実装する方法 | TechMemo
CSSだけで全画面の背景動画を実装する方法をご紹介いたします。ほぼコピペで実装できますので、サイトの背景に動画を表示したいとお考えの方は、ぜひ試してみてください。 なお、動画は別途ご用意いただく必要があります。 HTMLでは、videoタグで動画を設置します。記述する場所は、</body>の直前など、どこでも構いません。 <video autoplay loop poster="images/bg.png" id="video-background" muted> <source src="movie/bg.mp4" type="video/mp4"> </video> video要素に#video-backgroundを指定しておきます。 CSSでは、以下のように記述します。 #video-background { position: fixed; left: 0; top: 0; mi
bxSlider でスライドを3つ表示して中央寄せする (レスポンシブ対応) - Qiita
bxSlider はとても便利なのですがちょっと作り込もうと思うとやはりCSSなどで手を入れなくてはいけません。 特によく使われるであろう、画像を3つ表示させて両端の画像を切れさせるというようなことは標準ではできないです。 なので、CSSを使って実装する必要があります。 Codepenにデモを置いておきますのでコードと動作を確認して下さい。 See the Pen Centering bxSlider (support Responsive) by Shingo Matsui (@shingorow) on CodePen. こちらにもコードを掲載しておきます。 <div class="slider-wrapper"> <div class="slider"> <div class="slider-1 slide"> <p>Slider 1</p> </div> <div class="s
Half Second Hamburger Helper
About HTML Preprocessors HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug. Learn more · Versions Adding Classes In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-
CSSで括弧を表現したサンプル - NxWorld
丸括弧（） 頭から微妙な見栄えですが、**丸括弧（）**を表現してみたものです。 HTMLとCSSはそれぞれ下記のようになっており、擬似要素を使って生成したものにborder-radiusを指定します。 <div class="parenthesis"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. ... </p> </div> .parenthesis { position: relative; width: 500px; padding: 15px 30px; -webkit-box-sizing: border-box; box-sizing: border-box; } .parenthesis::before, .parenthesis::after { position: absolute; top:
Webサイトを使いやすく！UIデザインのCSS小技テクニック21個まとめ（実例サンプルコード付）
素敵なインターフェースを心がけ、ユーザーエクスペリエンスを格段に改善することができる、UIデザインの重要ポイントを具体的なHTML/CSSのサンプル例と一緒にご紹介します。これらの各ポイントは、もともと@steveschogerがTwitterでツイートした内容となります。 1. アイコンはラベルよりも少しだけ明るくしよう。 文字ラベルの横にアイコンを配置するときは、少しだけ色を明るくしてみましょう。こうすることで、もっとも重要な情報（文字ラベル）をうまく強調することができます。 See the Pen Little UI Details : 小技テクニック01 by PhotoshopVIP (@vipcrew) on CodePen. 2. 明るい背景色では、白文字に少しだけ影を追加しよう。 背景色が明るく、白文字を利用するときは、文字に少しだけ素敵な影を加えることで、より読みやすくな
フェードイン・フェードアウトをcssのみで実装 - Qiita
フェードイン・フェードアウトは、JQueryで実装されていますが、cssアニメーションを含めたクラスの付け替えのみで行う方法がありましたので、投稿いたします。 事前知識 display: none; → display: block この遷移をさせる要素に対して、transitionをかけることは、できません。 （transition: display 1s ease 0sの指定は動作しません。） 恐らく、レンダリングツリーからの削除が影響していると思われます。 （レンダリングにおいて、レンダリングツリーの生成・変更が先に行われてから、位置や色の調整が行われるため） モーダルの表示・非表示 検索すると、opacityを使用してアニメーションを行う方法をよく見かけると思いますが、 opacity: 0だけでは、クリックできてしまいます。そこで、pointer-events: noneを使用し
ホームページにアニメーションを実装するライブラリ＆プラグイン12選
アニメーションは、もはやホームページを作る上で必須の要素と言えます。 単調な動きをする静的なページは、ユーザーの興味がなくなった瞬間に離脱率が劇的に高まります。 一方、少しでもアニメーションを取り入れるだけで、親しみや好感を持つことができるので、ユーザーのホームページに対するエンゲージメントが高まりやすいと言われています。 今回は、眼球を捉えるようなユニークな動きをするアニメーションを簡単に実装することができるCSSやJavaScriptのライブラリをご紹介します。 10年前にはAdobe Flashを使わないと表現できなかったリッチな動きをするアニメーションも、短いコードで実装することが可能です。 ぜひ使いやすいライブラリを見つけてみてください。 ホームページにアニメーションを実装するライブラリ＆プラグイン12選 1. Animate.css https://daneden.github
jQueryスライダープラグイン9選！スライドショーを手軽に作成
JavaScriptは非常に便利ですが、ゼロスクラッチでイチからコーディングを行うのは非常に大変です。そのため、何らかのフレームワークやライブラリを使うのが標準的ですが、その中でもjQueryはいまだに根強い人気を誇っています。 「脱jQuery」という言葉も耳にしますが、プラグインを読み込むだけで基本機能のほとんどが実装できてしまうjQueryプラグインは、初心者には大変ありがたいものです。 今回は、その中でも手軽で便利なjQueryスライダープラグイン9選をご紹介します。2018年に新規に立ち上げるサイトなどに、こうしたプラグインを採用してみましょう。 ▼こちらもチェック▼ UX向上の鍵！マイクロインタラクションにも使えるアニメーションプラグイン15選 手軽で便利なjQueryスライダープラグイン9選 1. slick slickは、最も便利で手軽に使えるjQueryスライダープラグイ
様々なテイストが揃うミニマルなフリーフォントまとめ「50+ Best Free Fonts for Minimalist Designs」
TOP > Font > 様々なテイストが揃うミニマルなフリーフォントまとめ「50+ Best Free Fonts for Minimalist Designs」 デザインの印象を決めるフォント。流行りやデザインの雰囲気を考えながら、数多くの中から選定するのはとても大変な作業です。だからこそ、トレンドを押さえたフォントを幾つか手元にストックしておきたいもの。今回紹介するのはそんな時に役立つ、ミニマルなフリーフォントまとめ「50+ Best Free Fonts for Minimalist Designs」です。 Fresh Ultramodern Free Fonts for Designers | Fonts | Graphic Design Junction スタイリッシュから可愛らしいものまで50種類のフォントが紹介されていますので、デザイナー必見のまとめとなっています。
2018年のウェブフォントについて
少しの間Noto Sans Japaneseを利用していたが、すぐに止めた。やはりFOITが気になる。かといってFOUT強制も苦肉の策という印象しかない。……このような記事を書いていたら、先にうまくまとまったfont-displayデスクリプターについての記事が広まっていたので、そちらを読むのが良い。 他が高速・即時化しつつある現在、1MBくらいを超えるウェブフォントはどうにもならない。動的なサブセット化はわからなくもないが、労多くして……という印象だ。自前で作るのも難しいし、安心して任せられる速さの提供者は知らない。 回線の状況(種別ではなく)に応じてうまいこと切り替える仕組みを導入しなければならないだろう。そうなるとデバイスから「今、回線あんま速くないです……」といった動的な情報を得たいが、プライバシーにかかわるので難しい。残る可能性はfont-displayデスクリプターのみだ。 @
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Webサイトを常時https・常時SSLにしておく理由と注意点 | 株式会社メディウィル
http://www.okuni.me/entry/simple-h2-design
【CSSコピペ】カーソルを合わせるとふわっと浮かぶアニメーションカスタマイズ - オークニズム
最近のWebサイトで見かけるヘッダのアイデア・実装方法のまとめ
画像を斜めに切り抜いてかっこよく「Angled edges」:phpspot開発日誌
【医療広告規制】規制対象外だったホームページの2017年11月末時点の現状 | 株式会社メディウィル