BLOG

ブログ

2019.05.18.

photoshopのエクステンションRemove.bgが本当にスゴかった

ここ最近、個人的に購読しているWEBデザイン系のブログで度々目にしていたRemove.bgを使ってみました。 このRemove.bgを使えば、一瞬にして画像から人物だけを切り抜くことが出来ます。これまではWEBサービスのみだったようなのですが、最近photoshopのエクステンションもリリースされたとのこと。しかも無料。これが本当に凄かったので使い方を含めて …

2019.05.17.

CSS/Javascriptで実装するテキストエフェクト【ゆがみ系】

ここ数年でHTML、CSS、Javascriptだけで表現出来ることが非常に増えてきています。ほんの少し前まではFlashや動画に頼らないといけなかったことも、今やそんな必要が無くなってきました。 非常に複雑な動きをするテキストエフェクトもその一例です。今回はCSS、Javascriptのコピペだけで実装可能なちょっとユニークなテキストエフェクトを紹介します …

2019.05.16.

無料で使えるシンプルで見やすいSVGアイコン

無料でつかえるアイコンといえばfontawesomeが有名ですが、今回紹介するREMIX ICONにも使いやすそうなアイコンがたくさん揃っています。 Remix Icon – Open source icon library REMIX ICONでつかえるアイコン このREMIX ICON内には、「ビルディング」、「ビジネス」、「コミュニケーショ …

2019.05.15.

CSSとGIFアニメで表現するインパクトのあるテキスト

今回はCSSとGIFアニメだけでテキストをかっこ良く表現する方法をご紹介します。 具体的に説明すると、まずGIFアニメ画像を背景に敷いて、任意のテキストでマスクをかけるという感じです。サイトやページのファーストビューにこれをポンと配置するだけでインパクトを出すことが出来ます。 サンプル まずはサンプルで確認してみてください。背景に敷くGIFアニメ次第では、ソ …

2019.05.14.

Edgeで電話番号に自動的に貼られるリンクを無効にする方法

MicrosoftのブラウザEdgeでの表示時、ページ内に電話番号(と、電話番号っぽい数字の羅列)が記載されていると、勝手にリンクが貼られてしまいます。 今回はそのリンクを無効にする方法をご紹介します。 方法(1)番号を囲むタグで制御 1つ目の方法としては、下記のような記述でリンクを無効にすることが出来ます。 <p x-ms-format-detect …

2019.05.13.

coffというアーティストの「Tiny Music」がスゴく良い

4月にリリースされたらしい、coffというアーティストのアルバム「Tiny Music」がすごく好きな感じで、ここ最近繰り返し聴いている。CDとしての販売はもちろん、spotifyやapplemusic等のサブスクリプションでも配信されているので是非一度聴いてみて欲しい。 coffとは 元々は「どついたるねん」というバンドのベーシストだったDaBass。昨年 …

2019.05.9.

iPhoneで表示したときのinputボタンにCSSを適用させる方法

WEBページやサイトでフォームをコーディングしていて、普通にCSSを書いていても、iPhone(iOS)環境ではinputボタンにCSSが反映されません。 そんなときの解決方法を紹介します。 iPhoneでのinputボタンにCSSを適用させるCSS -webkit-appearanceプロパティの値をnoneにすることで、iPhone独自のスタイルを無効化 …

2019.05.8.

電話番号のリンクをスマホのときだけ有効にするCSS

レスポンシブ対応でサイトやページを制作するとき。問い合わせ先の電話番号を記載することがよくあると思います。 PCでの表示時は電話番号を記載するだけで良いですが、スマホ表示のときはその電話番号をタップすることで電話をかけられるようにしたい。 今回は、そんなときにつかえるCSSを紹介します。 実装方法 例えば、下記のようなコードがあるとします。 <a hr …