gotackのブックマーク - はてなブックマーク

レスポンシブデザインの確認に便利なツールが登場！複数のデバイスサイズで同時確認できる優れもの -Responsivize

Webページのレスポンシブの確認が簡単にできる、新しい無料アプリがリリースされました！ iPhone, Android, Pixelのスマホをはじめ、タブレット、ラップトップ、ワイドスクリーンなどのサイズでWebページを表示して確認ができます。 Windows, macOS, Linux対応のアプリで、しかもオープンソースです！ Responsivize Responsivize -GitHub Responsivizeの特徴 Responsivizeのダウンロード Responsivizeの使い方 Responsivizeの特徴 Responsivizeは、レスポンシブ対応のWebページをさまざまなデバイスのサイズで確認できる便利ツールです！当方の日本語環境（M1 Mac, Windows10）で問題なく動作しました。 Responsivize レスポンシブWebサイトの確認が簡単にで

gotack 2021/09/01

リンク

日本語フォントがGoogle Fontsに大量追加！すべてのフォントが商用利用も無料のフリーフォントです

フリーフォントが大好物な人に朗報です！ 🎉 先週、Google Fontsに日本語フォントが追加されたので、紹介します。これでさらに、たくさんの日本語フォントがGoogle Fontsで使用できます。新しく追加された日本語のGoogle Fonts 他にもたくさんある日本語のGoogle Fonts Google FontsのライセンスはほとんどがSIL Open Font Licenseで、商用プロジェクトでも無料で利用できます。他に採用されているライセンスはAPACHE LICENSE, VERSION 2.0です。フリーフォントが大好物な人には、下記もお勧めです！ 2021年用、日本語のフリーフォント523種類のまとめ -商用サイトだけでなく紙や同人誌などの利用も明記新しく追加された日本語のGoogle Fonts まずは、先週Google Fontsに新しく追加された日本語

gotack 2021/08/30

リンク

[CSS]クリック可能な範囲を広げるスタイルシートのテクニック、a要素はボタンだけでもカード全体をクリック可能に

a要素はボタンだけ、でもクリック可能なエリアはカード全体にしたい、と思う時は少なくないと思います。a要素にdisplay: block;を加えてもボタンだけだし、あとはjQueryのプラグインなどJavaScriptでクリック可能な範囲を広げる感じでしょうか。 CSSだけで、クリック可能な範囲を広げるスタイルシートのテクニックを紹介します。下記のようなa要素がボタンだけでも、クリック可能な範囲がカード全体に広がります。

gotack 2018/09/12

リンク

WordPressのショートコードを簡単に作成・管理できる便利なプラグイン -Snippy

WordPressで自分用のショートコードを作成するのは通常、function.phpを触らないといけないので、少し面倒です。管理画面で簡単にショートコードを作成でき、管理もできるWordPressのプラグインを紹介します。ショートコードはHTML, CSS, JavaScriptに対応しており、単独でも組み合わせても利用できる優れものです。 Snippy Snippyの特徴 Snippyのダウンロードとインストール Snippyの使い方 Snippyの特徴 Snippyは、独自のカスタムショートコードを素早く作成できます。 function.phpを編集する必要はなく、管理画面で簡単に作成できます。 Snippy 対応しているコードは、下記の通り。 HTML CSS JavaScript YouTube動画を埋め込むコード、Googleマップを埋め込むコードなど、自分用にカスタマイズし

gotack 2018/08/28

リンク

写真画像がPhotoshopなどで加工されているかすぐ分かる！デジタル画像を法医学分析できる無料ツール -Ghiro

デジタルの画像を分析し、そこに含まれているさまざまな情報を法医学分析できるツールを紹介します。「この写真、Photoshopで加工しているのかな？」というのもどこらへんを加工しているのかが一発で分かります。オンライン版とダウンロード版があり、どちらも無料で利用できます。 Digital Image Forensics Analyzer サポートしているフォーマットは、下記の通り。 Webページでよく見かける、.jpg, .png, .gifをはじめ、.psd, .epsや各Rawデータに対応。 Windows bit map .bmp Raw Canon .cr2 Raw Canon .crw Encapsulated PostScript .eps Graphics Interchange Format .gif JPEG File Interchange Format .jpg or

gotack 2018/07/23

リンク

ひと昔前といろいろ違う、Webサイトを公開した時に確認しておきたい項目のまとめ -Web Launch Checklist

Webサイトを公開した時に、サイトのパフォーマンス、SEO、セキュリティ、アクセシビリティ、コンテンツ、機能性の面から確認しておきたい項目がまとめられたチェックリストを紹介します。 2017年、最近のWebのテクノロジーや制作事情をふまえたものとなっており、ひと昔前とはいろいろ変化しています。イラスト: Girls Design Materials 「Web Launch Checklist」は2017年最近のWeb制作事情をふまえて、サイト公開時の確認事項をまとめたものです。確認項目は6つにカテゴリ分けされており、それぞれ最新の動向が取り入れられたものとなっています。 Web Launch Checklist Web Launch Checklist -GitHub そのまま利用してもよし、また編集して自分用のリストを作成することもできます。パフォーマンスで確認したい項目 SEOで

gotack 2017/07/30

リンク

かわいい女子のイラスト素材が満載！生き生きとした表情やしぐさが魅力たっぷりなガーリー素材集 -Girls Design Materials

とにかくかわいい！そして清潔感もある！生活や人生におけるさまざまなシーンのいろいろなバリエーションが揃ったガーリーイラストの素材集を紹介します。人物をはじめ、動物、花や草木などの植物、食べ物や飲み物やお菓子や雑貨など、全1,250種類のイラストが収録されたお得な一冊です。収録されているイラスト素材はすべて、個人・法人を問わずそのままもしくは加工して利用することができます。Webサイトはもちろん、アプリや映像、パンフレットやポスターなどの紙媒体でもOKで、クレジット表記も必要ありません。以前、ちょっとイラストを使いたい時にイラストレーターさんを探すのが大変だったのですが、こういう素材集を1つ持っておくと便利ですね。

gotack 2017/07/30

リンク

[CSS]Web制作者が知っておきたい、Webフォントを快適に表示するCSSの新しいプロパティ「font-display」

Webフォントを使用しているサイトやブログが増えてきました。そして、近日アップデートされるChrome 60では、Webフォントの使い勝手を向上する「font-display」プロパティがいよいよ正式に実装される予定です（参考: Chromium）。追記: さきほどChrome 60がリリースされました。 Webフォントを適用したテキストが読み込み時に一瞬表示されない現象があり、今まではJavaScriptで対応していた人、仕様だとあきらめていた人は、このfont-displayを積極的に取り入れるべきだと思います。 font-display for the Masses 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。ブラウザでフォントが読み込まれる仕組み font-displayプロパティとはほとんどの場合、swapを使

gotack 2017/07/30

webフォント

リンク

[CSS]コンテンツの区切り hr要素を素敵にデザインするスタイルシートのテクニックのまとめ

<hr class="style**"> <style> hr.style1{ border-top: 1px solid #8c8b8b; } hr.style2 { border-top: 3px double #8c8b8b; } hr.style3 { border-top: 1px dashed #8c8b8b; } hr.style4 { border-top: 1px dotted #8c8b8b; } hr.style5 { background-color: #fff; border-top: 2px dashed #8c8b8b; } hr.style6 { background-color: #fff; border-top: 2px dotted #8c8b8b; } </style>

gotack 2017/02/17

css3
CSS

リンク

こんな便利なのがあったとは！Web制作やビジネスに欠かせない無料ツール・サービス・素材 400+種類総まとめ

こんな便利なのがあったとは！Web制作やビジネスに欠かせない無料ツール・サービス・素材 400+種類総まとめ +400 Awesome Free Tools To Build Your Business 5つのジャンルに、Web制作やビジネスに役立つさまざまな無料ツール・無料サービス・無料素材がまとめられています。 Business -ビジネスサイト作成・ロゴ作成・請求書作成・法律文書作成・アイデアのマネジメント・かっこいいドメインなど Marketing -マーケティングライティングツール・ブログツール・サイト分析・SEO・画像最適化・画像編集加工・マーケティング情報・ソーシャルメディア・カスタマーサービス・A/Bテストなど Design & Code -デザイン・コードデザインの無料素材・カラーや配色ツール・デザインのインスピレーション・写真素材・フォント・アイコン・コードやマ

gotack 2015/11/15

webサービス

リンク

Chrome デベロッパーツールの使い方: プロのように華麗に使いこなすための20のテクニック

Chromeのデベロッパーツールをプロのように使いこなすための20のテクニックを紹介します。いやー、本当にデベロッパーツールは機能が豊富ですね。 How to use Chrome DevTools like a Pro 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 HTMLの要素をクイック編集指定した行番号に移動すべての子ノードを展開デベロッパーツールの位置を変える CSSのセレクタによるDOM検索 Material Designとカスタムカラーパレット複数のカーソル画像をData URIとしてコピー疑似クラスのトリガー複数のコラムをドラッグで選択「$0」で現在の要素を手に入れる要素の表示「Event Listeners」の表示イージングのプレビュー Media Queriesの検証ネットワークをフィルム

gotack 2015/09/25

chrome

リンク

写真の勉強にいい！被写界深度とボケの作り方がよく分かり、レンズと被写体・背景の関係を学べるシミュレーター

カメラのレンズの焦点距離や絞り、被写体・背景の距離を設定し、被写界深度とボケを計算して、その写真がどのように仕上がるかシミュレートしてくれる写真の勉強になるサイトを紹介します。写真の被写界深度とボケのシミュレーターサイトはHTML5+CSS3で作成されているので、最新のモダンブラウザでお楽しみください。 IEは10+対応です。また、左上のボタン「Mobile Version」で、スマホにも対応しています。

gotack 2015/08/28

リンク

ロゴのデザインの楽しさを再認識！アイデア満載のクリエイティブなロゴデザインのまとめ

眺めているだけで創作意欲がどんどん沸いてくる、アイデア満載のクリエイティブなロゴデザインを紹介します。最近はロゴデザインのよくないニュースしか聞きませんが、本来の楽しさを感じてもらえたらなと思います。

gotack 2015/08/22

リンク

フォームはラベルの配置場所で使いやすさが全然変わる！ユーザーが利用しやすいフォームを徹底考察 | コリス

あなたのフォームは、ユーザーが簡単に利用できますか？もし簡単でないなら、フォーム入力を完了するのも予想以上に難しいとも言えます。ユーザーが入力しやすく、そして入力内容の確認も簡単なフォームについての考察を紹介します。 Why Infield Top Aligned Form Labels are Quickest to Scan by anthony 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。フォームは入力前、入力後の分かりやすさが大切最近のフォームで見かける問題 1つ目：ラベルとフィールドを上から順番に配置した場合 2つ目：ラベルをフィールドの内側に配置した場合 3つ目：ラベルをフィールドの内側のトップに配置した場合ラベルの配置を内側トップに変えるとどうなるかラベルを内側トップに配置するのが機能するフォームとはまと

gotack 2015/06/09

リンク

スマホ・タブレットのさまざまなデバイスの表示チェックに対応！レスポンシブの確認ができる無料オンラインツール -.resizr

iPhone 4, 5, 6, 6+をはじめ、Android各機種のスマホ、iPad, Surface, Kindleなどのタブレットのさまざまなスクリーンサイズをエミュレートし、それぞれのサイズでWebページがどのように表示されるかチェックができるオンラインツールを紹介します。

gotack 2015/04/21

リンク

[JS]気持ちいいアニメーションを伴ったさまざまなスクロールエフェクトが簡単に実装できてしまうスクリプト -Space.js

スクロールすると、ページに配置されているあらゆる要素が3D空間にあるみたいに気持ちよくアニメーションするjQueryのプラグインを紹介します。さまざまなエフェクトが驚くほど簡単に実装できるので、お試しあれ！ Demo 2: Out of Space Space.jsの使い方 Step 1: 外部ファイル当スクリプトとjquery.jsを外部ファイルとして記述します。 <head> ... <script type="text/javascript" src="[jquery]"></script> </head> <body> ... コンテンツ ... <script type="text/javascript" src="space.min.js"></script> </body> Step 2: エフェクトの設定まずは、コアとなるフレームを作成します。この中に

gotack 2015/04/09

リンク

WordPressでさまざまなタイプのかっこいいページが簡単に作成できるカスタマイズ性にも優れたテーマ -Optimizer

ランディングページ、スモールビジネス、ポートフォリオ、ギャラリーなど、企業や個人サイトを簡単に構築できる多目的用のWordPressのテーマファイルを紹介します。「Optimizer」の名の通り、あらゆるデザインに最適化できるようカスタマイズ性に優れています。 Optimizer Optimizer -WordPressテーマディレクトリ OptimizerにはFree版とPro版があり、Free版ではいくつかの機能が利用できませんが、CC0ライセンスで個人でも商用でも無料で利用できます。 Optimizerのデモ Optimizerの特徴 Optimizerのデモ Optimizerを使うと、本当にいろいろなタイプのページやサイトが作成できます。

gotack 2015/04/02

リンク

[JS]かっこいい！ブラウザや要素いっぱいに背景画像やスライドショーをアニメーションで表示するスクリプト -Vegas 2

画像をブラウザやDOM要素の背景いっぱいに表示し、フル表示の画像にかっこいいエフェクトを加えたり、スライドショーを設置できるjQuery/Zeptoのプラグインを紹介します。アニメーションやオーバーレイが数多く用意されており、画像にスタイリッシュなエフェクトを加えることが簡単にできます。 Vegas 2 Vegas -GitHub Vegas 2は以前紹介した1の単なるバージョンアップではなく、大きく進化しました。 ※1との互換性はありません。 Vegas 2のデモ Vegas 2の使い方 Vegas 2のデモデモでは写真画像をブラウザや要素の背景としてフル表示し、スライドショー機能を伴ったコンテンツを楽しめます。 Doc -Animations 表示方法にも多彩なエフェクトが用意されています。 Vegas 2の使い方 Step 1: 外部ファイル当スクリプト・スタイルシートとjQu

gotack 2015/03/25

リンク

クレジット表記無しで無料利用できる写真画像を簡単に選べて、ダウンロードできるPhotoshopの機能拡張 -SplasHolder

個人でも商用でも無料で、クレジットの表記義務がない写真画像をPhotoshop上から簡単に選べて、ダウンロードして利用できる機能拡張を紹介します。画像を探すのにブラウザを開く手間がなくなり、普通に便利です。 SplasHolder 写真画像は全てUnsplashの画像を使っており、画像のライセンスはCC0で個人でも商用でも無料、そしてクレジットの表記義務はありません。データをひっぱるのにはUnsplash.itのAPIを利用しており、今後これを利用したサービスが増えそうですね。 Photoshop用の機能拡張「SplasHolder」のダウンロードは、下記ページの下の方です。 Photoshopの対応バージョンは、CCです。