2017-03-25

Sass の編集にはこれがオススメ「Koala」

今日は、Sass編集時に役立つ、こちらのツールをご紹介させていただきます。

f:id:sntkk3:20180115224117p:plain
ダウンロード先： http://koala-app.com/

Sass (サス) とは

Syntactically Awesome Stylesheets の略だそうです。
一言で言うと、拡張版CSSといったところでしょうか。
CSSが入れ子にできるなど、Sassを使うと、とっても効率的にCSSが書けます。
なので、管理もしやすく、保守性も高まります。
従来のStyleにありがちな、

記述が冗長になる ( コードの記述量が増える )、

(ゆえに)

コードが見にくい、
コードが直しにくい

といった問題を解決できるところがSassのメリットと言えます。

Bootstrapのテンプレートを利用させていただいたりすると、CSSがSassで作られていることがあります。
最近は一般的に広く利用されるようになってきているSass、
自分で書くにも、既成のファイルを編集するにも、
その編集方法を心得ておくのはオススメです。

「Koala」の使い方について

使い方は、こちらの記事が参考になりました。
ぜひご参照ください。
GUIアプリケーション「Koala」でSass、Compassを楽に扱う – WebCake : http://webcake.no003.info/webdesign/koala-sass-compass.html

[ 参考記事 ]
tarahako.com
DreamweaverでSassファイルを編集するには？ | Webデザインのタネ
qiita.com

以上、ご参考まで。

2017-03-24

Bootstrap テンプレート「UNION」でコーポレートサイトを作りました

フレームワークフレームワーク-Bootstrap

今日は、Bootstrapテンプレートでコーポレートサイト(デモサイト)を作成しました。
使用したのは以下のUNIONというFreeのテンプレートです。
f:id:sntkk3:20180115225315p:plain

で、作成したデモサイトがこちらです。↓
SAMPLE PRESS

こういったテンプレートを利用すると、
シングルページのスタイリッシュなサイトがサクッとできてしまうのでとっても便利！
ありがたいですねぇ！

>> UNIONの公式サイトはこちら ↓
https://freehtml5.co/union-free-html5-bootstrap-template/

また、今回デモサイトで使用しているダミーテキストは、
以下サイトを利用して生成させていただきました。

ダミーテキストジェネレータ | Web制作小物ツール - dounokouno.com : https://webtools.dounokouno.com/dummytext/
f:id:sntkk3:20180115232845p:plain

このようなテキストジェネレータのおかげで、ページ内に必要なボリュームテキストがただちに挿入できます。
デモサイト制作時などに重宝してありがたいです。

以上、ご参考まで。

2017-03-23

【現場テク】カンバスサイズから画像を指定サイズに加工(縮小)する方法

ソフトウェアソフトウェア-Adobe ソフトウェア-Adobe-Photoshop

カンバスサイズから画像を指定サイズに加工(縮小)

Photoshopの「イメージ」-「カンバスサイズ」から、画像を指定サイズに変更(縮小)する方法です。

【手順】

準備：
　※この作業時、「選択したレイヤーのバウンディングボックスを表示」はチェックしておいてください。
　「選択したレイヤーのバウンディングボックスを表示」アイコンは、メニューバー直下にあります。

1. Photshop で、対象の画像を開きます。

　ここでは、幅1600pxの以下画像（幅 1600 pixel 高さ 1066 pixel）を開いてみました。

　 f:id:sntkk3:20170402102047j:plain

2. 対象画像のロックを外します。
　「レイヤー」の対象画像レイヤーにある鍵マーク部分をダブルクリックすると外れます。
　「レイヤースタイル」の設定画面が開きますが、×ボタンで閉じてOKです。

　 f:id:sntkk3:20170402110823p:plain

3. メニューの「イメージ」-「カンバスサイズ」を選択（Windowsのショートカットキーでは「Alt」+「Ctrl」+「C」）し、変更後のファイルサイズ「幅」「高さ」を変更します。

　 f:id:sntkk3:20170402105046p:plain

　ここでは、画像サイズを、幅 600 pixel 高さ　350 pixel に設定してみます。
　※この時、サイズの単位がpixel以外になっている場合、メニューの「編集」-「環境設定」-「単位・定規」で単位「定規」の値を変更します。

　この時、以下のような警告メッセージが表示されますが、かまわず「続行」します。
　 f:id:sntkk3:20170402105349p:plain

　結果、画像が一部切り取られた以下のような状態となります。
　 f:id:sntkk3:20170402113816p:plain

4. メニュー「編集」-「自由変形」(Windowsのショートカットキーでは「Ctrl」+「T」)を選択します。

5. 指定サイズに画像を収めるため
　「Shift」キーを押しながら、バウンディングボックスの角を画像範囲内に向かってドラッグします。
　右側に余白が少しできますが、左に寄せてみます。

　こんな感じになります。
　 f:id:sntkk3:20170402115749p:plain

小さすぎると操作しづらいので、「Ctrl」+「+」で少し大きい表示に変更します。

6. 画面を確認し、うまく収まっているようなら、変更を確定します。

7. 長方形選択ツールを選択した状態で、以下水色箇所あたりを選択します。
f:id:sntkk3:20170402115854p:plain

8. 移動ツールを選択します。

　 f:id:sntkk3:20170402112850p:plain

9. 画像内の先程の選択範囲に表示されるハンドルをドラッグして横に広げます。

　 f:id:sntkk3:20170402120013p:plain

10. 右側の余白部分が右端部分と同色で塗りつぶされます。

f:id:sntkk3:20170402120146p:plain

作業は以上で完了です。

2017-03-16

ヒートマップ一覧

Webサイト分析 Webサイト分析-ヒートマップ Webアプリ

f:id:sntkk3:20170722173613p:plain

< 目次 >

ヒートマップを利用する

ヒートマップを利用する

「ヒートマップ」ってご存知ですか？

ヒートマップとは？
サイト訪問者がページのどこを見ているのか、
暖色(多)←→寒色(少)で表すツールです。
サイト運用者にとっては、サイトの解析ツールとして役立ちます。

以下、ヒートマップのサービス一覧をまとめてみました。

無料でも使えるサービス

無料ヒートマップ解析ツール User Heat : どこが読まれているか見えるアクセス解析 :
http://userheat.com/

【無料】ヒートマップ分析ツール - MIERUCA（ミエルカ） :
https://mieru-ca.com/heatmap/

ヒートマップ - [無料]GA連携でらくらくセグメント別分析｜brick : https://www.brick.tools/applications/heatmap/

スマホからPCまで解析できるヒートマップツールとは｜Ptengine : https://www.ptengine.jp/

自作しようと思う時に参考になる情報

ヒートマップツールを無料でとても簡単に自作してWebサイトに導入する方法（heatmap.js＋Milkcocoa） | Milkcocoa Engineers' Blog :
http://blog.mlkcca.com/frontend/heatmap-with-milkcocoa/

はてなブログユーザーなら使いたいヒートマップツール「Ptengine」

以下記事が参考になります。
こんなのがあったとは嬉しい！

ヒートマップツール「Ptengine」がはてなブログ限定特典で無料で使える - 攻めは飛車角銀桂守りは金銀三枚 : http://www.fair-skinned-monster.com/entry/2017/01/06/070000

Ptengine（外部サービス） - はてなブログヘルプ :
http://help.hatenablog.com/entry/partners/ptengine

WordPressでヒートマップを使おうと思う時に参考になる情報

wordpress プラグイン『Ptengine』が超便利すぎる！アクセス解析やら色々できるよ！ | ブログマーケッターJUNICHI :
https://junichi-manga.com/plugin-ptengine/

2017-03-14

Google Apps 更新日自動入力

Webアプリ Webアプリ-Google Webアプリ-Google-Google Apps

f:id:sntkk3:20190114102859p:plain

更新日自動入力機能をGoogle スプレッドシートに追加

Google スプレッドシートは、最近仕事でチーム利用することが多くなりました。

今日は、スプレッドシートで管理している表中の値が更新された場合、その更新日を記録したいとのメンバー要望により、該当行に最終更新日が入るスクリプトを設定しました。

スクリプトは下記記事を参考にさせていただいております。

【参考記事】

[超簡単] spreadsheetを更新したら自動で更新日付を入れるGAS - Qiita : http://qiita.com/Yamotty/items/888ae6f93a05a8cfc16f

手順

1. Google スプレッドシートを起動
2. メニューの「ツール」-「スクリプトエディタ」を選択
3. エディタに下記コードを入力
4. トリガーを「値の変更」で設定します。(下図参照)
⇒　これで、値を更新した行にその最終更新日が設定されます。

サンプルスクリプト紹介

[コード]

function insertLastUpdated() { 
  var ss = SpreadsheetApp.getActiveSheet();  
  var sheet_name = ''; 
  sheet_name = ss.getName(); 
  //Browser.msgBox(sheet_name);   
  var currentRow = ss.getActiveCell().getRow();  
  var currentCell = ss.getActiveCell().getValue();  
  var updateRange = ss.getRange('A' + currentRow) //更新日をいれる列をstringで指定。この場合はA列 
  var str = "注意点" 
  Logger.log(updateRange); 
  //更新日の記入 
  if (str.indexOf(sheet_name) == -1) { 
   if(currentRow>4){  
    if(currentCell) {  
      updateRange.setValue(new Date()); 
    } 
   } 
  } 
}

[トリガー]
f:id:sntkk3:20170722184744p:plain

(2019/01/14 追記)
補足説明：
上記スクリプトでは、
「注意点」という名前のシート以外で、5行目以下で値が入力・変更された場合、その行のA列に更新日を自動設定するという動作を実現しています。
なので、入力行が5行目より上、あるいは、もっと下の場合、
if(currentRow>4){
の 4の数字を適宜変更してください。

また、更新日時を設定したいシートが複数あるうちの特定のシートのみの場合、
if (str.indexOf(sheet_name) == -1) {
の箇所を書き換えて以下のようなスクリプトにします。

function insertLastUpdated() { 
  var ss = SpreadsheetApp.getActiveSheet();  
  var sheet_name = ''; 
  sheet_name = ss.getName(); 
  //Browser.msgBox(sheet_name);   
  var currentRow = ss.getActiveCell().getRow();  
  var currentCell = ss.getActiveCell().getValue();  
  var updateRange = ss.getRange('A' + currentRow) //更新日をいれる列をstringで指定。この場合はA列 
  var str = "注意点" 
  Logger.log(updateRange); 
  //更新日の記入 
  if (sheet_name === "注意点") { 
   if(currentRow>4){  
    if(currentCell) {  
      updateRange.setValue(new Date()); 
    } 
   } 
  } 
}

"注意点"のところはここでのシート名を表しているので、ここを必要なシート名に適宜変更してください。

[結果]
バッチリ、思った通りの動作となりました。

2017-03-08

【CSS3】アニメーション(ゆらゆらバナー)

HTML/CSS HTML/CSS-CSS3

ECサイト設置用 CSS3のアニメーションバナー

ECサイト設置用にCSS3のアニメーションバナー、
作りました。 ※以下はDemo用ダミーです。

f:id:sntkk3:20170406231359p:plain

Demo

以下、サンプル用のソースを共有します。

<style> 
/*   基本設定   */ 
html, body { 
  margin: 0; 
  padding: 0; 
} 
body { 
  font-family: 
  'Hiragino Kaku Gothic ProN', 
  Meiryo, sans-serif; 
  font-size:16px; 
  -webkit-text-size-adjust: 100%; 
} 
img{ 
  border-width:0px; 
} 
.article{ 
  font-size:16px; 
  line-height:170%; 
} 
/*記事・カテゴリ中の画像調整*/ 
img.slide_arrow { 
  max-width:100%; 
  height:auto !important; 
} 
/*   レイアウト設定   */ 
#arrowbutton { 
  float: left; 
  box-sizing: border-box; 
  background-color:#fff; 
  border-radius: 4px; 
  margin-bottom: 30px; 
} 
.clear{ 
  clear:both; 
} 
/*** ゆらゆらアニメーションバナー設定 ***/ 
@-moz-keyframes skew_button { 
0% { -moz-transform: skewX(9deg); } 
10% { -moz-transform: skewX(-8deg); } 
20% { -moz-transform: skewX(7deg); } 
30% { -moz-transform: skewX(-6deg); } 
40% { -moz-transform: skewX(5deg); } 
50% { -moz-transform: skewX(-4deg); } 
60% { -moz-transform: skewX(3deg); } 
70% { -moz-transform: skewX(-2deg); } 
80% { -moz-transform: skewX(1deg); } 
90% { -moz-transform: skewX(0deg); } 
100% { -moz-transform: skewX(0deg); } 
} 
@-o-keyframes skew_button { 
0% { -o-transform: skewX(9deg); } 
10% { -o-transform: skewX(-8deg); } 
20% { -o-transform: skewX(7deg); } 
30% { -o-transform: skewX(-6deg); } 
40% { -o-transform: skewX(5deg); } 
50% { -o-transform: skewX(-4deg); } 
60% { -o-transform: skewX(3deg); } 
70% { -o-transform: skewX(-2deg); } 
80% { -o-transform: skewX(1deg); } 
90% { -o-transform: skewX(0deg); } 
100% { -o-transform: skewX(0deg); } 
} 
@-webkit-keyframes skew_button { 
0% { -webkit-transform: skewX(9deg); } 
10% { -webkit-transform: skewX(-8deg); } 
20% { -webkit-transform: skewX(7deg); } 
30% { -webkit-transform: skewX(-6deg); } 
40% { -webkit-transform: skewX(5deg); } 
50% { -webkit-transform: skewX(-4deg); } 
60% { -webkit-transform: skewX(3deg); } 
70% { -webkit-transform: skewX(-2deg); } 
80% { -webkit-transform: skewX(1deg); } 
90% { -webkit-transform: skewX(0deg); } 
100% { -webkit-transform: skewX(0deg); } 
} 
@-moz-keyframes skew_arrow { 
0% { -moz-transform: translateX(0px); } 
45% { -moz-transform: translateX(20px); } 
50% { -moz-transform: translateX(25px); } 
55% { -moz-transform: translateX(20px); } 
95% { -moz-transform: translateX(0px); } 
100% { -moz-transform: translateX(0px); } 
} 
@-o-keyframes skew_arrow { 
0% { -o-transform: translateX(0px); } 
45% { -o-transform: translateX(20px); } 
50% { -o-transform: translateX(25px); } 
55% { -o-transform: translateX(20px); } 
95% { -o-transform: translateX(0px); } 
100% { -o-transform: translateX(0px); } 
} 
@-webkit-keyframes skew_arrow { 
0% { -webkit-transform: translateX(0px); } 
45% { -webkit-transform: translateX(20px); } 
50% { -webkit-transform: translateX(25px); } 
55% { -webkit-transform: translateX(20px); } 
95% { -webkit-transform: translateX(0px); } 
100% { -webkit-transform: translateX(0px); } 
} 
.a-btn { 
position: relative; 
display:block; 
width:100%; 
max-width:600px; 
padding:10px; 
padding-left:10%; 
-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box; 
box-sizing: border-box; 
margin-left:auto; 
margin-right:auto; 
} 
.shake 
{ 
-webkit-animation-duration:2s; 
-moz-animation-duration:2s; 
-ms-animation-duration:2s; 
-o-animation-duration:2s; 
animation-duration:2s; 
-webkit-animation-timing-function: ease-in; 
-moz-animation-timing-function: ease-in; 
-o-animation-timing-function: ease-in; 
animation-timing-function: ease-in; 
-moz-animation-iteration-count: infinite; 
-webkit-animation-iteration-count: infinite; 
-o-animation-iteration-count: infinite; 
-ms-animation-iteration-count: infinite; 
animation-iteration-count: infinite; 
margin-left:auto; 
margin-right:auto; 
z-index: 8; 
-webkit-animation-name: skew_button; 
-moz-animation-name: skew_button; 
-o-animation-name: skew_button; 
animation-name: skew_button; 
width:90%; 
} 
.slide_arrow { 
position: absolute; 
top:30%; 
left:-5px; 
-webkit-animation-duration:1s; 
-moz-animation-duration:1s; 
-ms-animation-duration:1s; 
-o-animation-duration:1s; 
animation-duration:1s; 
-webkit-animation-timing-function: ease-in; 
-moz-animation-timing-function: ease-in; 
-o-animation-timing-function: ease-in; 
animation-timing-function: ease-in; 
-moz-animation-iteration-count: infinite; 
-webkit-animation-iteration-count: infinite; 
-o-animation-iteration-count: infinite; 
-ms-animation-iteration-count: infinite; 
animation-iteration-count: infinite; 
-webkit-animation-name: skew_arrow; 
-moz-animation-name: skew_arrow; 
-o-animation-name: skew_arrow; 
animation-name: skew_arrow; 
z-index: 9; 
width:20%; 
max-width:100px; 
} 
.a-btn:hover img{ 
opacity:1; 
} 
p { 
    display: block; 
    -webkit-margin-before: 1em; 
    -webkit-margin-after: 1em; 
    -webkit-margin-start: 0px; 
    -webkit-margin-end: 0px; 
} 
</style>

<div id="arrowbutton"> 
<p><a class="a-btn" href="#" target="_blank" rel="nofollow"><img class="slide_arrow" src="画像ファイル01" alt="" width="100"><img class="shake aligncenter" src="画像ファイル02[f:id:sntkk3:20170406231359p:plain]" alt="" width="500" height="120"></a></p> 
</div><!--#arrowbutton-->

バナーデザイン　参考サイト

ついでにと言っては何ですが、
以下、バナーデザインの参考になるサイトです。

バナーデザイン・サンプルデータベース｜ホームページ作成 AKAIRO株式会社（アカイロ） :
http://aka-design.sub.jp/bd/

2017-03-07

Webサイト解析の第一歩、Google Analyticsの設置・導入方法

Webサイト分析 Webサイト分析-Google Analytics Webアプリ Webアプリ-Google Webアプリ-Google-Google Analytics

今日は、新しく作ったサイトに Google Analytics を設置するなどの作業を行っておりました。

Google Analyticsとは

　
公式サイト： https://analytics.google.com

Googleが提供するアクセス解析ツールのことです。
サイトに導入(※)すると、サイト訪問者の動向・属性などを知ることができるようになる、とても便利なマーケティングツールです。

※トラッキングコードと呼ばれる専用のコードをサイトに埋め込むと、自身のAnalyticsサイトで各種データを確認することができるようになり、サイトの効果測定・改善に大いに役立ちます。

有料版もありますが、無料からでもサイト分析に充分すぎるほどのデータが得られます。

たとえば、アナリティクスの収集結果から、次のようなことが明らかになります。

例).

どれくらいの人がサイトに訪問しているか
どのページがどれくらい閲覧されているか
どういったデバイスからサイトが閲覧されているか
サイトを訪問しているユーザー属性(年齢層、性別)はどうか
サイトの滞在時間はどれくらいか

など、

では、以下よりその設置方法についてお伝えします。

取得・設置方法

前提：Googleアカウントが必要です。

1) トラッキングID・コードの取得

1. ブラウザで以下アドレスにアクセス
https://analytics.google.com

2. Googleアカウントでログイン

3. Googleアナリティクス使用開始申し込みを実行(初回のみ)

　 f:id:sntkk3:20171029181352p:plain

4. 設置サイトのための新しいアカウントを作成

4.1. 以下必要項目を入力
　　 f:id:sntkk3:20171029182819p:plain

　　①アカウント名　　　　　：　好きなアカウント名を設定
　　②ウェブサイトの名前　　：　サイトタイトル
　　③ウェブサイトのURL　　：　サイトのURL(http://は入力不要)
　　④業種　　　　　　　　　：　サイトのジャンルを設定
　　⑤レポートのタイムゾーン：　「日本」を設定

　　「データの共有設定」は初期設定のままでOK　

　4.2. 「トラッキングIDを取得」ボタンをクリック
　　 f:id:sntkk3:20171029183511p:plain

5. 利用規約確認画面の内容を確認し、「同意」ボタンをクリック
　 ※利用規約画面左上の国名で「日本」を選択すること

　以上を経て、晴れてトラッキングID、トラッキングコードの取得完了です。

2)トラッキングコードをサイトに設置

1. 以下管理アイコンをクリックし、管理画面を表示
　 f:id:sntkk3:20171029184630p:plain

2. 先程作成したアカウントのプロパティで「トラッキングコード」をクリック
　 f:id:sntkk3:20171029185025p:plain

3. 「ウェブサイトのトラッキング」にある、トラッキングコードをコピー

4. 設置したいサイトのheadタグ終了直前の箇所に貼り付け

　設置は以上で完了です。

補足

　上記設置作業に問題がなければ、設置から1～2日後にはサイトのデータが確認できるようになります。
　
　ちなみに、このはてなブログの場合、
　ダッシュボード＞設定＞詳細設定＞解析ツールの「Google Analytics 埋め込み」にトラッキングIDを入力するだけで設置完了です。
　
　以上、ご参考まで。

2017-02-16

CSSのみで簡単実装ハンバーガーメニューの作り方

HTML/CSS

f:id:sntkk3:20170722153324p:plain

スマホサイトでおなじみ、ハンバーガーメニュー

今日は、CSSのみで実装可能、
開閉動作付きハンバーガーメニューを作成しました。

f:id:sntkk3:20170711230110p:plain

Demo

以下、このたびのソースを公開しておきます。

ソース公開

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link rel="stylesheet" href="/css/style.css" type="text/css" />
<script></script>

</head>
<body>
<div id="search">
<h2 class="search">条件を選んで絞り込む</h2>
<input type="checkbox" name = "checked"class="menuopen" id="checked">
      <div class="codecontent">
        <fieldset class="members">
          <legend>条件</legend>
          <ul>
            <li><input id="members01" type="checkbox" name="members[]" value="members01"><label class="check" for="members01">条件1</label></li>
            <li><input id="members02" type="checkbox" name="members[]" value="members02"><label class="check" for="members02">条件2</label></li>
            <li><input id="members03" type="checkbox" name="members[]" value="members03"><label class="check" for="members03">条件3</label></li>
            <li><input id="members04" type="checkbox" name="members[]" value="members04"><label class="check" for="members04">条件4</label></li>
          </ul>
          <span class="select">
          <select name="members_sp">
            <option value="members_all">こだわらない</option>
            <option value="members01">条件1</option>
            <option value="members02">条件2</option>
            <option value="members03">条件3</option>
            <option value="members04">上記以外</option>
          </select>
          </span>
        </fieldset>
      </div><!--.codecontent-->
</div><!--search-->
</body>
</html>

CSS

<style>
ul {
  list-style: none;
}
/******************** search ********************/
#search {
    width: 100%;
    margin: 0;
    padding: 15px 0 2px;
    background: #bafef8;
    box-sizing: border-box;
}

#search h2.search{
  background: #fff;
  border-radius: 10px;
  box-sizing: border-box;
  font-size: 26px;
  font-weight: bold;
  padding: 16px;
  margin: 0 auto;
  position: relative;
  width: 800px;
}

#search h2.search:before {
    content: "";
    border: 15px solid transparent;
    border-top: solid 20px #fff;
    position: absolute;
    left: 20px;
    bottom: -35px;
}
/***************** menuopen button ********************/

/*@media screen and (max-width: 480px){*/

#search_form{
  width: 90%;
}

div.codecontent {
  display:none;
}

#checked:checked ~div.codecontent {
  display:block;
}

input.menuopen {
  display: block;
  position:absolute;
  top: 48px;
  right: 60px;
}


/*チェックボックスを消す*/
.menuopen {
    -webkit-appearance: none;
    -moz-appearance: none;
    border-width: 0;
    width: 0;
    height: 0;
    outline:0;
}
.menuopen:focus{
    outline:0;
}

.menuopen:before,.menuopen:after{  
    position: absolute;
    content: "";
    display: block;
    height: 8px;
    width: 40px;
    border-top-style: solid;
    border-bottom-style: solid;
}
.menuopen:before{
    top: 2px;
    border-top-width: 4px;
    border-bottom-width: 2px;
    border-color: #000;
}
.menuopen:after{    
    top: 16px;
    border-top-width: 2px;
    border-bottom-width: 4px;
    border-color: #000;
}

/*閉じるボタン*/
.menuopen:checked:before, .menuopen:checked:after {
    top: 14px;
    height: 0;
}

.menuopen:checked:before {
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    transform: rotate(135deg)
}

.menuopen:checked:after {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg)
}

</style>

《参考サイト》

jQueryを使った開閉式スライドトグル＆フェードトグル（slideToggle, fadeToggle） – Diglog :
http://diglog.org/javascript/943.html

CSSで実装するハンバーガーメニュークリック時のエフェクト 10＋ | NxWorld :
http://www.nxworld.net/tips/12-css-hamburger-menu-active-effect.html

メニューの三本線「ハンバーガーメニュー」を HTML と CSS だけで実装する方法 :
https://jquery.nj-clucker.com/humberger-menu-by-html-css/

ハンバーガーアイコンに様々なアニメーションを実装できるスタイルシート「Hamburgers」！｜ Web Design Magazine :
http://webdesignmagazine.net/html-css/hamburgers/

CSS3とjQueryで作る「開閉に合わせて×ボタンに変化させる」ハンバーガーメニュー | クリエイタークリップ :
https://creatorclip.info/2015/06/css3-jquery-hamburger-menu-cross-mark-toggle/

2017-01-27

【CSS3】transparent で右向き三角を表現する

HTML/CSS HTML/CSS-CSS3

f:id:sntkk3:20160411101626j:plain

CSSで右向き三角ボタンを作る

transparentを使って下のボタンを作ってみました

f:id:sntkk3:20170717135833p:plain

ECサイトなどに使えそうなボタンです。
備忘録として、ソースを記載します。

[ソース] html

<a href="#" class="see_detail">詳細を見る</a>

[ソース] css

a.see_detail {
  width: 160px;
  font-size: 16px;
}
.see_detail::before {
  content: "";
  /* width: 0; */
  /* height: 0; */
  border: 10px solid #fff;
  border-top: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid transparent;
  /* left: 5px; */
  margin-top: 5px;
  display: inline-block;
}
.see_detail {
  font-weight:bold;
  text-decoration:none;
  color: #FFF;
  font-size: 12px;
  display:block;
  text-align:center;
  vertical-align: middle;
  margin-top: 70px;
  padding:6px 0 8px;
  background-color:#01991a;
  border-radius:6px;
  float: right;
}