[B! html] kimixのブックマーク

cssで作るシェアボタンのデザインパターン36種類 - FOXISM

cssで作るシェアボタンのデザインパターンをたくさん考えてみました。とりあえずシェア数の表示がない、単純なボタンとして36種類あります。（色違いなども若干含みます。）記述するhtmlはどれも同じようなものですが、一部微妙に異なるものもあります。基本的にはcssだけでデザインを決めています。アイコンフォントに関してもcssだけでほとんどやっていますが、そのコードは省略していますのでソースを見てください。コピペでもだいたい使えると思いますが、それぞれ微調整が必要なものもあると思います。なのでコピペだけでなく自分のサイトに合わせて調整できるcss中級者以上向けですね。スマホ表示も考えてないし。（スマホで見ると崩れてるやんwと思う人はこの記事の対象外です。）というか、ローカルなhtmlで作っていたものをここにコピペしたらうまく動かないものやフォントが反映されていないものがありました。面倒なの

kimix 2017/10/05

リンク

画像 + タイトルと説明 + ボタンというアフィリエイトリンクを、レスポンシブさせるCSSの一例 - わたしと納豆ごはん

よく「画像＋タイトルや説明＋ボタン」という組み合わせがあると思います。主にAmazonアソシエイトといったアフィリエイトとかで。この組み合わせ自体はよくあるのですが、サイトがレスポンシブデザインのとき、画像と文章とボタンの配置がうまくいかずイライラすることはありませんか？レイアウト的に変な空間ができたり、ボタンが大きくなりすぎたり…。ボタンが一つならまだ簡単なのですが、2つ3つと増えたり減ったりと、ボタンの数自体もその都度変わるものなら、全部に通用するCSSを作るのは面倒ちぃものです。今回、Amazonや楽天のアフィリエイト用に自作のものを作ったので、何かの参考なるかなぁーと思い紹介したいと思います。スポンサーリンク画像+タイトルと説明文+ボタンのHTMLとCSSでは紹介していきます。こういうのってなんて言うのでしょう？アフィリエイトリンクかな？今回のコード紹介は Code

kimix 2017/09/28

リンク

画像を使わずに、CSSのみでリストアイコンを表現したサンプル 10 - NxWorld

いずれもli要素と組み合わせて使えそうなリストアイコンのサンプルで、画像は使用せずに全てCSSのみで実装してみたものです。最近ならwebフォントやSVGで使い勝手良いものが実装できたり、あとは使用できるブラウザは限られてきたりしますが、問題ないブラウザであればサイズやカラー変更といったこともCSSのみで簡単に変更できます。はじめに最後のサンプルのみol要素使ってますが、その他に関しては全てHTMLは下記のように単純なul, li要素を使ってます。 <ul> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li> <li>Lorem ipsum dolor sit amet,