Webサイトのユーザーフローを設計する、美しくデザインされたワイヤーフレーム用の素材を紹介します。 通常は有料ですが今週末まで無料なので、ダウンロードはお早めに！
Illustratorで美しくデザインされた、ユーザーフローを設計するワイヤーフレーム用のAI素材
Webサイトのユーザーフローを設計する、美しくデザインされたワイヤーフレーム用の素材を紹介します。 通常は有料ですが今週末まで無料なので、ダウンロードはお早めに！
日本の伝統工芸士
※伝統マークは経済産業大臣指定伝統的工芸品のシンボルマークです。伝統マークをデザインした「伝統証紙」が貼付された製品は、所定の検査に合格した「伝統的工芸品」です。 本ホームページに掲載されている図版やデータ等の無断複製・使用を禁じます。
指定した要素がスクロールで画面内に入った時、イベントを発動させるjQueryプラグインjquery-scrollInFunc.js
指定した要素がスクロールで画面内に入った時、イベントを発動させるjQueryプラグインjquery-scrollInFunc.js 前回公開した「指定した要素がスクロールで画面内に入った時、内包要素を順番にフェードインするjQueryプラグインjquery-scrollInTurn.js」ですが、最近このプラグインだけでは物足りなくなってきました。 「指定した要素がスクロールで画面内に入った時」、特定のアニメーション効果などを実装したいときが多々あったので、その部分に特化したプラグインをもうひとつ作りました。 その名も「指定した要素がスクロールで画面内に入った時、イベントを発動させるjQueryプラグインjquery-scrollInFunc.js」です！ ファーストビューに入っていない要素に対してのアニメーションを、スクロール位置によって発動させることができます。 もくじ Demo Do
ブログ収益が月10万円を越えたので、SEO対策とアフィリエイトについてまとめてみる - Literally
2015-01-17 ブログ収益が月10万円を越えたので、SEO対策とアフィリエイトについてまとめてみる TIPS WEB 今日から3回に分けてブログ運営のテクニックを知っている限りすべて書いていく。 とくに理由はないのだがせっかくここまで多くの人に見てもらえるようになったので忘れないうちにここまで試してきたノウハウをまとめておきたかったのだ。教えたくないこともあるが、ブログに対する執着心もそんなにないので全て書いてしまおうと思う。 今回は①このブログのPV数等の振り返りと ②SEO対策の手法 ③アフィリエイト等のマネタイズについて 次回は「ブログの運営テクニック全般」について、5つのポイント（ライティング、コンセプトメイキング、読者登録、バズ、ネタ選定）に分けて説明していく その次の回には「ブログ・Webメディアの未来」について仮説を基に書く予定 このブログの現状について PV数 2
[CSS]ビューポート(vw, vh)とパーセント(%)、レスポンシブに適した単位の賢い使い分け方法
先日の記事「フォントサイズの指定方法（翻訳版）」で、CSSの比較的新しい単位「ビューポートの単位(Viewport Units)」について触れました。この単位「vw, vh, vmin, vmax」はブラウザのビューポートのサイズに基づくもので、これらの単位で指定した実際の大きさはビューポートの大きさによって変化するため、レスポンシブデザインにあった単位と言えるでしょう。 これらの単位を使うことは「フォントサイズの指定方法」でフォントサイズに使うことを反対しましたが、レイアウトでは非常に役立つ単位です。 Viewport vs. Percentage Units 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 ビューポートの単位(Viewport Units)とは 要素を幅いっぱいに指定 (% > vw) 要素を高さいっぱいに指定 (
![[CSS]ビューポート(vw, vh)とパーセント(%)、レスポンシブに適した単位の賢い使い分け方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/9632aee4416db718e0899706ace859f7fdcdf363/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015072201.png)
fullPage.jsの使用方法メモ
ブラウザいっぱいにコンテンツを表示できる、シングルページ用のjQueryプラグイン「fullPage.js」の使い方メモ。 使い方 下記からダウンロードできます。 alvarotrigo/fullPage.js · GitHub ダウンロード後、必要なファイルを読み込みます。 <link href="jquery.fullPage.css" rel="stylesheet" type="text/css" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="jquery.fullPage.min.js"></script> 使用するオプションによっては、下記ファイルの読み込みも必要になります。 jQuery Easing Plugin
フォントジャンプ率のセオリーを考える | フォントの話 | つみきブログ
株式会社つみき UI/UX事業終了のお知らせ 拝啓 時下ますますご清祥のこととお喜び申し上げます。 平素より格別のご高配を賜り、厚く御礼申し上げます。 この度、弊社は創業以来続けて参りましたUI/UX事業（受託制作事業）につきまして、2024年4月30日をもって終了することを決定いたしました。 今後は、弊社の主力事業であるFilmarksをはじめとした、映像関連事業に注力して参ります。 ご愛顧を受け賜りました皆様には、深く感謝申し上げますとともに、ご理解賜りますようお願い申し上げます。 敬具 株式会社つみき 代表取締役社長 鈴木 貴幸 事業終了予定日：2024年4月30日 biz@tsumikiinc.com
Create LaTeX tables online
How to use the LaTeX tables generator? Set the desired size of the table using Table / Set size menu option. Enter the table data into the table: copy (Ctrl+C) table data from a spreadsheet (e.g. Google Docs, LibreOffice Calc, webpage) and paste it into our editor -- click a cell and press Ctrl+V or double click any cell to start editing it's contents -- Tab and Arrow keys can be used to navigate
fullPage.jsで１つのコンテンツをスクロールして表示させたあとにJavaScriptを実行する
フルスクリーンでコンテンツを表示するWebページが増えましたね！ 私も制作に携わることがあり、「fullPage.js」というjQueryプラグインを利用しました:) 「fullPage.js」は、１つのコンテンツをフルスクリーン表示させて、スクロールすることで１ページ分が自動でスクロールし、次のコンテンツが表示されるページを簡単に作ることができます。 わかりにくいかもしれないので、デモをご確認ください。 このfullPage.jsを使い、スクロールしてコンテンツが表示されたらJavaScriptを実行させたい！と思い、色々と調べました。 コンテンツが表示されてからアニメーションなどが動作するとカッコイイですよね！ （onLeaveというオプションを使えば可能であることがわかりました） せっかくなので、基本の使い方や他のオプションなど調べたことをまとめます。 fullPage.jsの使い方
それからデザイン スタッフブログ
Web基礎知識2023.06.13 ホームページの作り方 ─中小企業・個人事業主・これから起業される方へ 私は、2004年にWebデザイナーとして独立し、2007年に株式会社それからデザインを設立、これまで20年近く、中小企業〜小規模事業（個人事業主も含む）のホームページ制作に関わる仕事を続けてきました。 そのあいだに「ホー… イベントレポート2019.03.27 ことばでブランディングする ─言葉の力で企業の意思を浸透させるコピーライターの思考 ≪後編≫ ビジネスとデザインの関わりを学ぶトークイベント「“besign” talk meeting(ビザイントークミーティング)」。2018年12月11日に開催された第6回のゲストは、広瀬さとし事務所株式会社 代表 広瀬さとし氏…
レスポンシブのサイトでスマホの時だけtelリンクを有効にする ｜ Tips Note by TAM
PCサイトに電話番号を記載する場合は、テキストか画像で電話番号を表示し、 スマホサイトなら、電話番号にtelリンクを貼って、スマホから 直接電話をかけられるようにすると思います。 PC・スマホ・タブレットと、さまざまなデバイスにワンソースで対応している レスポンシブのサイトの場合はどうでしょうか。 ソースにあらかじめtelリンクを設定しておくと、PCで見た際に 「プロトコルが不明」「開けません」というメッセージが返ってきてしまいます。 （もともとtelリンクは、ガラケーやスマホ向けの機能なので、当然と言えば当然です） telリンクを設定しなければ問題ないのですが、そうすると、スマホで見たときに、 電話番号をタップして電話をかけることができません。 電話をかける機能があるのに直接電話できないのは、ちょっと不親切です。 こういう時は、JS・jQueryを使って、スマホの時だけ電話番号にtelリ
【jQuery】スクロールして対象の要素が見えた時にメニューの色を変える｜ツーブロッカ
LP（ランディングページ）などでよく使われている、ある特定のエリアに差し掛かった時にパッと色が変わるナビゲーションの実装をしていきます。 今回は、セクションが画面に登場する度に、それに応じたid指定のサイドメニューの色が変わる効果を例にあげますが、そうでない場合にも応用が効くと思います。 HTML <main> <section id=”to_section1″>1</section> <section id=”to_section2″>2</section> <section id=”to_section3″>3</section> <section id=”to_section4″>4</section> <section id=”to_section5″>5<
jQuery：電話番号リンクの有効・無効をUA（ユーザーエージェント）で切り替える方法 - NxWorld
スマートフォン専用で制作されたものはそのままで問題ないと思いますが、レスポンシブで制作した場合などにPC上では電話番号リンクは無効にしたいということがあります。 そこでjQueryとUA（ユーザーエージェント）を用いて、スマートフォンからアクセスされているときのみ電話番号のリンクを有効化するようにします。 電話番号をリンクで設定する際は<a href="tel:0312345678">03-1234-5678</a>という感じで記述し、これをスマートフォンやガラケーで閲覧している場合は、クリックしている際に記述してある電話へ発信ができるという動きになります。 ただ、このように記述をするとPCのブラウザで表示されている場合も同じように電話番号としてリンクされており、例えばFirefoxの場合はクリックすると「アドレスのプロトコルが不明です」という表示が出てしまったり、他のブラウザの場合でもク
大阪のホームページ制作会社プラスデザインカンパニーのブログ Vol.1
プラカンブログ ホームページ制作に関する役立つ記事からおもしろ記事など。 プラスデザインカンパニーの スタッフによるブログです。
【jQuery】実行タイミングの違い - TASK NOTES
jQuery（JavaScript）が実行されるタイミングには以下の3種類があります。 パターン1.$(window).load(function() { }); パターン2.$(document).ready(function() { }); パターン3.インライン サンプルHTML 各パターンのタイミングを確認するために、以下のサンプルHTMLを作成しましたのでブラウザで実行して確認してみます。 アラートが表示される順番が実行タイミングとなりますので、パターン3-1 → パターン3-2 → パターン2 → パターン1 となっている事がよくわかるかと思います。 インラインのイベント HTMLは一番上から読み込まれてDOMが構築されていきますので、インラインで直接記述している箇所はその順番で実行されていきます。 パターン3-1に関してはブラウザの表示が「実行されていません。」のままになって
Web用保存は古い!? JPEG画質が改善したPhotoshop CC 2015の新方式の画像保存機能まとめ – ICS MEDIA
みなさんはAdobe Photoshopでどのように画像を書き出してますか？ 最新のPhotoshopではさまざまな画像書き出し機能が搭載されていますが、どれを選択するかで手間が異なります。 本記事ではPhotoshopのさまざまな画像書き出し機能を紹介し、最適な画像書き出し方法を検証します。 この記事はPhotoshop CC 2022 (23.5.0)で検証しています。 この記事のポイント 新しい画像保存方式（書き出し形式、クイック書き出し）は手間が少ないので、作業効率が良い 新しい画像保存方式はデフォルト設定で、小さなファイルサイズの結果を得られやすい アニメーションGIF保存は「Web用に書き出し（従来）」を使う Photoshopの画像書き出し方法一覧 Photoshop CCにおいて、画像を書き出す方法は分けて5種類あります。 書き出し形式 ［ファイル］→［書き出し］→［書き出
スクロール時にナビゲーションが上部に固定されるレスポンシブ対応のjQueryプラグイン「HeadShrinker」 – bl6.jp
スクロールするとナビゲーションが上部に固定配置されるjQueryプラグイン「HeadShrinker」を使ってみました。レスポンシブにも対応しており、ブラウザの横幅を小さくするとメニューアイコンに切り替わる仕組みになっています。使い方もシンプルなので、あっという間に今風のナビゲーションを実装することができます。以下は使い方です。 [ads_center] 使い方 このようにスクロールすることでナビゲーションが上部に固定されます。 ブラウザ幅を縮小していくと、こんな感じでナビゲーションメニューがアイコンに切り替わります。レスポンシブのサイトでよく見かけますよね。 使い方はとても簡単です。jQuery本体とダウンロードしたプラグインファイルをhead内に読み込みます。 <link rel="stylesheet" href="headshrinker.css" media="all" /> <
jQueryが動かない（動作しない）理由を考察！スクリプトのどの箇所にミスがあるかを調べる裏技も紹介 | 誰かのためのホームページ制作
jQueryが動かない時の悲しさ。筆者も幾度となく経験している。 だが今となっては、粘り強く原因を究明し対応できるようになった。 本稿ではjQueryが動かない主な原因について紹介するとともに、どのように対応し動かせばよいのかの解説もつけてみた。実際のところ対応方法はケースバイケースなので、詳細のアドバイスはなかなか難しいが、トラブル解決のヒントに役立てていただければ幸いだ。 jQueryが動かない原因を考察 jQuery本体を読み込んでいない あるある度：★☆☆☆☆ jQuery本体を読み込んでいないと、スクリプトを書いても動かない。プラグインも動かない。ここは基本中の基本なので、忘れている人は少ないだろう。 jQuery本家サイトにて本体をダウンロードしファイルを読み込むか、GoogleのCDNを読み込もう。後者の方法を推奨する。 <script type="text/javascri
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Hypebeast. Driving Culture Forward
伝統工芸 青山スクエア
要素がスクロールで画面内に入った時、内包要素を順番にフェードインするjQueryプラグインを作りました
http://www.tarappism.com/entry/table-generator
Smoke
HTML／CSSコーディング時間を激減させる「Creative Cloud Extract」と、その真価を引きだすための10のポイント
https://webdesignmagazine.net/javascript/smart-phone-menu/