面倒くさがりな私がMacでよく利用している業務効率化アプリ5選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
彼のこの記事を読んで、使い始めました。 タスク管理ツールって、過去いろいろと使っているんですけど、なかなかしっくり来るものがないんですよね。結果的に、Googleカレンダーにタスクを登録したり、メモ帳にToDoを記載したり……。 ただ、このRemember The Milkを使うと、なんかテンションが上がって抜け漏れなくタスク管理ができる。いやいや、絶対褒めすぎでしょって思ってたんですけど、いや、便利っすね。これはマジで。 詳細はここでは説明しません。もう、まさくにの記事を読んでください。 私は、無料プランを使っているんですけど、たしかにこれは有料プランを契約しても良いレベル。 Transmit https://panic.com/jp/transmit/ 続いて、FTP/SFTPクライアントのTransmitです。 今までは、Forkliftを使っていたんですけど、ここ一年くらいでこのソ
jsoff - JavaScriptオンオフを切り替えるGoogle Chrome機能拡張
JavaScriptが高機能化し、もはやJavaScriptを使っていないWebサイトが見当たらないくらいです。しかし、だからこそJavaScriptをオフにした状態でどう表示されるのか気になることがあります。 Google ChromeでJavaScriptをオフにするのは開発者ツールを使わないといけないですが、jsoffを使えば簡単に設定を切り替えられます。 jsoffの使い方 インストールするとツールバーにアイコンが表示されるようになります。 オンオフすると、リロードなしに反映されます。 リロードせずにJavaScriptのオンオフを切り替えられるのは意外と便利です。Webアプリケーションとして開発している場合は気になりませんが、メディアサイトなどの場合はJavaScriptが無効になった状態でも閲覧できるかどうかは大事でしょう。そんな時に確認に便利です。 jsoffはGoogle
Responsible.js - スマートフォン向けにフルサイズ表示をシミュレート MOONGIFT
レスポンシブWebデザインは訪れたブラウザのウィンドウ幅によって見せるコンテンツを切り替えます。そのため、PCのブラウザであっても画面幅を縮めればスマートフォン用の見栄えをチェックすることができます。 しかし時によってはスマートフォンであってもPCブラウザ向けの表示でブラウジングしたい時があるはずです。そんな時に使えるのがResponsible.jsです。 Responsible.jsの使い方 まずは最初の表示。スマートフォンに最適化されています。 Toggle Desktopをクリックすると、フルサイズのブラウザ向け表示に切り替わります。 別なボタンを押せば、いつでもスマートフォン向けの表示に戻せるようになっています。スマートフォン向けとして情報を大幅に削ってしまっている場合、こうした表示切り替えは便利かも知れません。 iPhoneでも類似の機能がありますが、こちらは画面の再読み込みが不
Excelでシート切り替えタブが表示されないときの対処
Excelでシート切り替えタブが表示されないときの対処方法を紹介します。 １．問題点 Excelを起動したとき、通常であれば画面下に「シート切り替えタブ」が表示され、これをクリックすることでシートの切り替えが可能です。 が、仕事で引き継いだExcelファイルを開くとシート切り替えタブが表示されなくなっていました。 シート切り替えタブを表示させたいのですが方法が分かりません。 ２．シート切り替えタブが表示されないときの対処方法 「ファイル」の「オプション」をクリック。 「詳細設定」をクリック。 「次のブックで作業するときの表示設定」にある「シート見出しを表示する」をチェックして「OK」をクリック。 これでシート切り替えタブが表示されるようになります。
レスポンシブWebデザインのサイトにPCとスマートフォンの表示切り替えボタンをつけてみた | A40
スマートフォンサイトには、よくPCの表示とスマートフォンの表示を切り替えるボタンがついています。 通常はPC用のURLとスマートフォン用のURLにリンクさせているのですが、レスポンシブWebデザインはそもそもワンソースなので、そのままでは切り替えることはできません。 そこでレスポンシブWebデザインでも使える切り替えボタンをjQueryを使って実装してみました。 仕様 今回実装してみたのはこんな感じのやつです。 このボタンを以下のような仕様で実装します。 「PC」ボタンを押すとPCの表示、「SP」ボタンを押すとスマートフォンの表示に切り替える 最後に表示した状態をCookieに保存し、次のアクセス時も同じ状態で表示させる 実装方法 基本的には、viewportにデバイスの表示幅を指定することで切り替えることができます。 PC用のviewportの記述 <meta name="viewpor
ページやブロック要素の切り替えがかっこいいプラグイン6選（jQuery・JSなど） | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
お疲れさまです、デザイナーのモモコです。 今回は要素を切り替える際にかっこいいアニメーション表現がつけられるプラグイン、スクリプトを6つご紹介します。 数あるプラグインの中でも実装が難しくない、デザイナーにも優しい仕様のものを選びました。 要素の切り替えがかっこいいプラグイン・スクリプト6選 Animsition http://git.blivesta.com/animsition/ 簡単、シンプルなページ切り替えに動きが付けられるjQueryプラグイン。 フェードアウトや回転、ズームなど58種類のデモが用意されており、それぞれパラメータで細かい調整ができるようになっています。 iconate http://bitshadow.github.io/iconate/ クリックで2つのアイコンフォントをかっこよく切り替えられるJSプラグイン。 全部で19種類のアニメーションがそろっています。
multiscroll.js - split multi-scrolling pages plugin
Powerful jQuery plugin Create split pages with two vertical scrolling panels. Compatible with mobile phones and devices and old browsers such as IE 11. <div id="multiscroll"> <div class="ms-left"> <div class="ms-section">Section 1 left</div> <div class="ms-section">Section 2 left</div> <div class="ms-section">Section 3 left</div> </div> <div class="ms-right"> <div class="ms-section">Section 1 righ
レスポンシブWebデザインでもPC表示切替ボタン｜Webデザイン｜開発ブログ｜株式会社Nextat（ネクスタット）
どうやら世の中には「スマートフォン向けサイトはPC向けサイトより情報が少ないのではないか？」と考えるユーザが一定数いるようです。 ※有意な数のアンケートを取ったわけではないので、割合はわかりませんが。 かく言う私も、スマートフォン向けのサイトで情報を探すときにPC版表示に切り替えたいと思うことはよくあります。 モバイル向けのページをhttp://example.com/s/などのように別ページとして表示している場合はリンクを貼れば済む話です。 しかし、レスポンシブWebデザインを採用している場合は同じようにはいきません。 せっかくレスポンシブWebデザインを採用しているのだから、PC版をわざわざ表示することはないというのが制作側の本音なんですけどね。 前述のスマホでは情報が見られないかもしれないと思っているユーザのために、以下のPC向け表示もどきを導入するのも悪くはないかと思います。 方法
.htaccessのみでSSL対応 | grush-blog
特定ページのみをSSL対応にする場合 本来であればリンクを細かく調整すべきなんだろうけど そうも言っていられない状況もある。 そこで.htaccessのmod_rewriteだけでできないのかな？と探してみたところ、 幾つか発見したのでメモ。 まずはSSLにしたいページのディレクトリに.htaccess作成 以下の例の場合、contact.php、contact_2.php、、contact_3.phpだけをSSL対象にできる。 RewriteEngine on RewriteCond %{REQUEST_URI} .*/contact.php$ [OR] RewriteCond %{REQUEST_URI} .*/contact_2.php$ [OR] RewriteCond %{REQUEST_URI} .*/contact_3.php$ RewriteCond %{HTTPS} of
A Collection of Page Transitions | Codrops
A showcase collection of various page transition effects using CSS animations. Today we’d like to share a collection of creative page transitions with you. We’ve put together a couple of animations that could be applied to “pages” for creating interesting navigation effects when revealing a new page. While some effects are very simplistic, i.e. a simple slide movement, others make use of perspecti
Fullscreen Pageflip Layout | Codrops
A tutorial on how to create a fullscreen pageflip layout using BookBlock. The idea is to flip the content like book pages and access the pages via a sidebar menu that will slide out from the left. We have received a couple of requests on how to use the BookBlock plugin in fullscreen. So, we decided to create a fullscreen layout, apply BookBlock to it and add a sidebar menu. We’ll show you how to c
レスポンシブWebデザインで3カラムと2カラムを切り替えるためのCSS
レスポンシブWebデザインで、Media Queriesを使って3カラムと2カラムを切り替えるためのCSSの設定について紹介します。 １．やりたいこと まず、次のような3カラムレイアウトがあるとします。一番左がメインコンテンツで、その右側にサイドバーが2列並んだものです。 あるいは、左右にサイドバーがあるオーソドックスな3カラムレイアウト。 これらの3カラムレイアウトをデバイス幅によって2カラムレイアウトになったときに、サイドバーを縦1列に並べるというものです。 また、メインコンテンツの高さが、サイドバー（上）の高さより低い場合でも、サイドバー（下）がメインコンテンツ側に回り込まないようにします。 さらに、各レイアウトは固定・リキッドのいずれも実現し、レイアウト全体はセンタリングさせます。 上記のレスポンシブWebデザインのサンプルを作るにあたってウェブを検索したのですが、同様のサンプルが
[JS]ページ全体やコンテンツ（画像や動画）をフルスクリーンで表示するだけのシンプルなスクリプト -BigScreen
指定したエレメントをクリックすると、ページ全体をフルスクリーンで表示したり、画像や動画をフルスクリーンで表示するシンプルで超軽量（1KB）のスクリプトを紹介します。 BigScreen BigScreenの特徴 BigScreenのデモ BigScreenの使い方 BigScreenの特徴 BigScreenはページ全体やコンテンツをフルスクリーンで表示するシンプルで軽量（minified:1KB）のスクリプトです。 対応ブラウザ Chrome 15+ Firefox 10+ Safari 5.1+ 動画コンテンツの表示は下記もサポートします。 Safari 5.0 iOS 4.2+ BigScreenのデモ デモはサイトのタイトル（BigScreen）のテキストをはじめ、画像や動画などをクリックすると、フルスクリーンで表示します。 BigScreenのデモ：動画 動画は右下のボタンをクリ
Flippy : flip effect jQuery Plugin | Guilhem Marty
Flippy is a cross-browser flip effect plugin for jQuery and allows you to flip whatever html element you want.What is Flippy ? Flippy is a cross-browser flip effect plugin for jQuery which allows you to flip whatever html element you want. Download flippy v1.0.1 Options color_target : The targeted background color. (ex.: ‘aliceblue’ or ‘#f0f8ff’ | default: ‘white’) content : The content to show af
[JS]スライダーやタブやページネーションなど便利な機能を少ないコードで実装する超軽量（8kb）のスクリプト -vanity
スライダー、タブ、ページネーション、ツールチップなど、ウェブページでよく使用するコンテンツをシンプルにより少ないコードで実装できるよう開発されたjQueryのプラグインを紹介します。 vanity jquery toolset [ad#ad-2] vanityは7種類のツールがあり、それぞれ8kbと超軽量のスクリプトとなっています。 機能はシンプルで、より少ないコードで簡単に実装できるように設計されています。 以下、7つのツールとそのコードを紹介します。 ※外部ファイル・スタイルシートは省略 スライダーのデモページ div要素やリスト要素で実装するスライダーです、スライドのエフェクトやスピードも調整できます。 HTML <!-- the slider content holder --> <div class="slider"> <!-- the elements inside the s
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Paper Slider Demo - html5beta.com
alessandroferrini.it
Redirecting...
Slider Pagination Concept - with jQuery UI Slider
Blog - Diamond Casino Online