タグ

2016年4月4日のブックマーク (3件)

  • Semantic UI

    Design Beautiful Websites Quickly Semantic is a development framework that helps create beautiful, responsive layouts using human-friendly HTML. Concise HTML Semantic UI treats words and classes as exchangeable concepts. Classes use syntax from natural languages like noun/modifier relationships, word order, and plurality to link concepts intuitively. Get the same benefits as BEM or SMACSS, but wit

  • SNSのシェアボタンの設置方法まとめ (サンプルコード付き)

    サンプルデモ真ん中寄せをして、ウィンドウの横幅が480px以上の場合は、5つのシェアボタンを横並びで表示し、スマホなど、ウィンドウの幅が狭いブラウザでは、LINEを含めた6つのボタンを1行に3つずつ表示するレスポンシブ仕様になっています。ここで表示している個々のボタンは画像を使用していますが、実際と同じように動作するので、ウィンドウの幅を広げたり縮めたりしてみて下さい。実際のシェアボタンでのデモを見たい人は、「サンプルデモを見る」のボタンから別ページにアクセスして下さい。 HTML <h2>シェアボタンの表示</h2> <p>横幅を狭めると、2行になり、LINEボタンが出現します。LINEボタンの画像は、<a href="https://media.line.me/howto/ja/" target="_blank">公式ウェブサイト</a>よりダウンロードする必要があります。</p> <

    SNSのシェアボタンの設置方法まとめ (サンプルコード付き)
  • オリジナル画像のツイートボタンを設置する方法 | design Edge

    Twitterのツイートボタンを設置する機会がありましたので、自作のオリジナル画像にする方法を備忘も兼ねてまとめておきます。 独自の画像を使用したボタンの設置は過去にも経験がありましたが、あまり機会がなくすっかり忘れていました…。今後のためにもここにメモしておきますので、デザイン重視でのWebサイトを作成など、ボタンをカスタマイズする際のご参考になれば幸いです。 基的な構造は以下ソースの通りです。 HTML <a href="http://twitter.com/share?text=【ツイート文】&url=【共有するURL】&hashtags=【ハッシュタグ】" onClick="window.open(encodeURI(decodeURI(this.href)), 'tweetwindow', 'width=650, height=470, personalbar=0, toolb

    オリジナル画像のツイートボタンを設置する方法 | design Edge
    site159
    site159 2016/04/04
    オリジナルボタン