アイコン型WebフォントをCSSでデザインしたボタン10個
アイコン型WebフォントをCSSでデザインしてボタンをいろいろ作ってみました。よく似た記事を書いたことがある気もしますが、今回はフラットな感じにしてみました。 ということで、まずこちらを読み込みます。 <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> これで準備はオッケーですので１つずつ解説します。 1. アイコンのみ 無駄な装飾はせず、普通にアイコンを並べるだけです。こういうのも意外と多いですね。 <div id="social-icon"> <a href="#"><i class="fa fa-facebook fa-2x"></i></a> <a href="#"><i class="fa fa-twitter fa-2x"></i
「Embedly」他社サービスを紹介する際のレスポンシブ対応ブログカード作成サービス
本サイト内のコンテンツはNORILOGが独自に制作しています。メーカー等から商品提供を受けることもありますが、その場合は記事内に明記しております。コンテンツの内容や評価に関するランキングの決定には一切関与していません。メーカー等の指示による表示部分にはPRを表記します。記事内で紹介する商品を購入することで、当サイトに売り上げの一部が還元されることがあります。詳しくはサイト運営ポリシーをご覧ください。 最近ブログを書いている上でクールで便利な外部リンク作成ツールだと思ったものを紹介。 それが無料で使える「Embedly」（エンベッドリー）。 はてなのブログカードに近い感覚で記事を貼り付けられる上に、レスポンシブ対応ときたら・・・これはもう使わないという理由が見つかりません。しかし世界中には面白いWEBサービスがいろいろありますね！
50音のボタンを並べるCSSを考える
検索システム実装の案件で、ひらがな50音のボタンを並べる必要がありました。子どもの頃によく見る、右上から縦にあ・い・う・え・お...と並んでいる表のようなデザインです。 今回はIE8にも対応しなければならなかったため、いろいろ考えた結果、あ行・か行といった行毎にリストを作り、floatを利用して並べました。 <ul class="list-syllabary-ja"> <li><span class="linename">あ行</span> <ul> <li><a href="#">あ</a></li> <li><a href="#">い</a></li> <li><a href="#">う</a></li> <li><a href="#">え</a></li> <li><a href="#">お</a></li> </ul> </li> <li><span class="linename
Facebook LikeButton のコメントパネル（flyout）を非表示にする
この記事は投稿されてから１年以上経っています。内容が古くなっているかもしれませんので、ご注意ください。 Facebook いいねボタンを（デザイン上）残念な位置にレイアウトしてしまい、コメントパネル（フライアウト）が表示されているページの width または height を越えてしまって、パネルを閉じることもコメントを投稿することもできなくなる状態になることがある。 Facebook ログイン済み いいね済み いいねしている状態で再度ボタンを押下すると表示 Layout：Button まぁなんというか超残念な状態である。WordPressで「いいねボタン」のコメント投稿用パネルが途中で見切れてちゃんと表示されないという問題とは違い、とても恥ずかしいから何とかしたいという状況。 Facebook Like Button .fb_iframe_widget { display: inline
[49-10] input要素で 送信ボタンなどを作ろう (submit, reset, button)
本日のINDEX ほかの属性で機能を追加できます type="submit" で「送信ボタン」を作ろう value属性で表示のテキストを変えられる formnovalidate属性で <form>要素のバリデート機能を無効にできる type="reset" で「リセットボタン」を作ろう type="button" で「汎用ボタン」を作ろう 戻る・進む などの「動作」は JavaScript を使います javaScript でアラートを出そう（alert()メソッド） javaScriptでキャンセルも（confirm()メソッド） リセットボタンを押した時のキャンセル 送信ボタンを押した時のキャンセル 汎用ボタンを押した時のキャンセル <input>要素で作る送信ボタンには、もう１つ<input type="image"> があます。 これは「画像で送信ボタンを作る」部品のため、今回の3
![[49-10] input要素で 送信ボタンなどを作ろう (submit, reset, button)](https://cdn-ak-scissors.b.st-hatena.com/image/square/592027f3e8ef20097cc905941f6f4f240992b1ad/height=288;version=1;width=512/https%3A%2F%2Fblog-imgs-45.fc2.com%2Fh%2Fo%2Fn%2Fhonttoni%2Ftsubu_icon2s.jpg)
[jQuery] プラグインを使わずに横からスライドインするメニューを簡単に作る
Modified 2015-10-17 更新情報 メニュースライドイン時スクロールできるサンプルを追記しました。コメント欄での返答で誤りがあった箇所を削除しました。 コンテンツ 部分をクリックしても閉じることができるようにするコードを追記しました。 スマートフォンやレスポンシブサイトなどでよく見かける、メニューボタンをクリックするとコンテンツを押し出してメニューがスライドインしてくる動きを jQuery と CSS で作る方法です。やってみると意外と簡単なコードで作ることができます。 サンプルデモとダウンロード ◆ 横からスライドインするメニュー demo｜memocarilog このサンプルコードは以下よりダウンロードできます。 ◆ SaoriMiyazaki/SlideIn_Menu HTMLコード スライドインしてくるメニューとメニューボタンの記述をします。 <!-- スライドメニュ
![[jQuery] プラグインを使わずに横からスライドインするメニューを簡単に作る](https://cdn-ak-scissors.b.st-hatena.com/image/square/90e0d5fd2040a360e7449fe29a2efc39e3dd577c/height=288;version=1;width=512/https%3A%2F%2Fmemocarilog.info%2Fwp-content%2Fuploads%2F2014%2F11%2FjQueryicon.png)
FacebookのOGPキャッシュ問題に終止符。キャッシュクリアボタン実装！
大変です。 Facebookのデバッガーに、明確にキャッシュクリアボタンが実装されました。 Open Graph Object Debugger https://developers.facebook.com/tools/debug/og/object/ The new function has been available on “Open Graph Object Debugger”(old “URL Linter”). That is the function that “definitely” clear the cache. Open Graph Object Debugger https://developers.facebook.com/tools/debug/og/object/ 今までこのキャッシュ問題には世界中の制作者が苦しめられてきました。 特に画像はなかなかキャッシ
Feedly購読ボタンを自分のブログやサイトに設置する方法
最近、色んなブログやサイトを見ていて気になったボタンはありませんか？ そう、主にブログ記事の下やサイドバーにあったりする緑のボタンです！ 「follow」って書いてますね。 そう、これこそGoogleリーダー亡き後に日の目を浴びるようになったRSSリーダー「Feedly」のRSSボタンです。 FeedlyはGoogleリーダーと同じように、PCブラウザ、iOS、Androidなどあらゆるデバイスで使える事と、Googleリーダーからの移行がアカウントの登録だけと簡単なので、人気を集めるようになりました。 ブログを日々書いている人、これからブログを初められる方は、アクセスアップやファン獲得の為にも必然的に設置しておきたい、押さえておきたい「Feedly」のRSSボタン設置です。 下記にFeedlyのRSSボタンの設置方法を綴っていきます。 スポンサーリンク その前に、Feedly購読ボタンの
cssとは？使い方と学び方の基礎まとめ - プログラミング学習の窓口
プログラミングの基礎であるhtmlを勉強していると、必ず出てくる言葉がcss。 現代のwebサービスにおいて、htmlとcssはいわば兄弟のようなもので切っても切れない関係と言えるでしょう。 では、cssとはいったいどういうものなのでしょうか。 簡単に言うと、Webページの文字の色や大きさ、背景、配置といった見た目を設定する言語の一種です。 静的ページも動的ページも見た目の部分の多くはこのcssで制御されています。 もしcssを詳しく学ぶなら、独学もいいですがプログラミングスクールがおすすめです。費用は当然かかりますが、アドバイスがもらえることと、学習スケジュールが管理されるので、強制的に頑張れる仕組みが作れるのもメリットと言えるでしょう。 The post cssとは？使い方と学び方の基礎まとめ first appeared on プログラミング学習の窓口.
これなら出来る！Facebookソーシャルプラグイン設置方法まとめ★具体的な導入手順を徹底解説【保存版】
これなら出来る！Facebookソーシャルプラグイン設置方法まとめ★具体的な導入手順を徹底解説【保存版】 自社サイトやブログに簡単にFacebook関連のボタンを配置できるFacebookソーシャルプラグイン機能。今回は、全11種類あるソーシャルプラグインの中でも特に利用頻度の高い「Like Button」と「コメントプラグイン」を例に、ソーシャルプラグインの具体的な導入方法をご紹介します！ こんにちは、アライドアーキテクツ株式会社 制作部 プロデューサーの久保田です。 オウンドメディアをソーシャル化できるFacebookの「ソーシャルプラグイン」機能。以前の記事で、この「ソーシャルプラグイン」は全11種類あり、導入の際は5つの基本ステップを押さえましょうとご紹介しました。 そこで今回はその続きとして、全11種類の中でも特に利用頻度の高い「Like Button」と「コメントプラグイン」を
[css] フォームのボタンをスタイルシートで画像ボタンに変更する
フォームのボタンについては以前、buttonタグにボタン画像をそのまま入れるという手法を書きましたが、 もう一つ、ボタンの見た目をCSSで変更する手法がございます。 この記事ではCSSでスタイリッシュなフォームボタンを作る方法について解説します。 メリットとしては、ロールオーバーアクションをCSSで制御出来るという点と、 タイプ属性にimageを指定しないので、送信やリセットなどの機能を殺さないという点があります。 ただし、CSSでのロールオーバーはIE6未対応なので、気になる方はJavascriptと併用してください。 （個人的にはスルーしても問題ないと思っています） (X)HTMLソース buttonとinputどっちでもOK <button id="submit" type="submit">Submit</button> <input id="submit" type="submi
![[css] フォームのボタンをスタイルシートで画像ボタンに変更する](https://cdn-ak-scissors.b.st-hatena.com/image/square/8d71ff5111e05619a10d29bb40d7aebaa75c8fbc/height=288;version=1;width=512/https%3A%2F%2Fs0.wp.com%2Fi%2Fblank.jpg)
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://e0166nt.com/blog-entry-263.html
http://www.designwalker.com/2007/05/photoshop_gradient.html