SlackとTrello(トレロ)の連携方法。タスク管理もこれで完璧！ ｜ ビジネスチャットマスター｜コミュニケーションをもっと効率的に「Slackと相性の良いタスク管理アプリを使いたい」とお考えではありませんか？そんな方におすすめなのがSlackとよく一緒に使われているTrello(トレロ)です。Trelloは、手軽にタスク管理ができる上に、Slackとの親和性も高いアプリです。 本記事では、SlackとTrelloを連携させる手順を画像キャプチャ付きで紹介します。 ☝︎関連記事
SSLの秘密鍵ってどんなデータですか？またパスフレーズを解除するにはどうすればいいのでしょうか？
質問をすることでしか得られない、回答やアドバイスがある。15分調べてもわからないことは、質問しよう！新規登録して質問してみよう
知っておきたい！人気JavaScriptフレームワーク10選
JavaScriptでフレームワークを使うという発想は、以前にはあまりなかった。 JavaScriptはライブラリさえあれば十分に機能していたからだ。 しかし、Webアプリケーションが複雑になるにつれてJavaScriptフレームワークも一般的になりつつある。 現在注目を集めているJavaScriptフレームワークに、どのようなものがあるかを今からご紹介していく。 色々なフレームワークがここ数年で登場してきており、それぞれ特徴が大きく違っている。 今人気のJavaScriptフレームワークを知ることで、学習や構築をはじめる際の参考にして頂ければ幸いだ。 JavaScriptフレームワークその1 AngularJS 概要 AngularJSは、もっとも有名なJavaScriptフレームワークのひとつだ。 エンタープライズ系(企業向けのシステムを作る企業の事)のフレームワークとして人気が高く、
CSS Grid Layout を極める！（場面別編） - Qiita
0. はじめに この記事では、CSS Grid Layoutの基本は知っているという前提で、いろいろな場面を想定して更なる使い方を書いていきたいと思います。 この記事は4部構成の中の 場面別編 です。 CSS Grid Layout を極める！（基礎編） CSS Grid Layout を極める！（場面別編） ←これ 作成中：CSS Grid Layout を極める！（アルゴリズム編） 作成中：CSS Grid Layout を極める！（番外編） トラックの大きさを柔軟に指定したい (grid-template-rows / grid-template-columns) トラックの幅・高さの指定は grid-template-rows / grid-template-columns で行いました。 基礎編では px を主に使いましたが、他にも様々なものが使えます。そして、以下で挙げる値は自
CSS Gridを使ったレスポンシブ対応の基本レイアウト
2022年4月27日 CSS 以前「CSSグリッドレイアウトで、サイズが違う複数のボックスをタイル状に配置する」という記事で紹介したCSSグリッドレイアウト。皆さん使っていますか？前回はちょっと複雑なレイアウトに挑戦しましたが、今回はCSSグリッドを使った基本的な2カラム・3カラム・カードスタイルのマルチカラムレイアウトの作り方を紹介します！ ↑私が10年以上利用している会計ソフト！ CSSグリッドの基本の書き方は動画で確認！ 基本的な記述方法は動画でも紹介しています。初めてCSSグリッドに挑戦するよという方はまずはこちらで基礎を覚えておきましょう！ 2カラム まずは基本の2カラム。CSSグリッドのいいところは、横並びの指定や各ブロックの幅、余白をひとつのセレクターに対して指定すればいいという点ですね。どのように記述していくか見てみましょう！ 可変幅 2カラム カラムを画面の幅に合わせて伸
【Movable Type】カスタムフィールドで登録した画像出力まとめ | バシャログ。
10月に入りましたね。 残り3ヶ月で2017年も終わってしまうのが、全然実感沸かない ishida です。 さて今回は Movable Type の画像まわりについてです。 毎回毎回カスタマイズする際にタグなどが 思い出せずいつもタグリファレンスを参考にしています。。。 そろそろちゃんと覚えようと思いましたので、サンプルとともにまとめてみます。 管理画面より、画像カスタムフィールドを用意する 今回は、ブログ記事に画像用のフィールドを作成する場合です。 管理画面より、以下のようにフィールドを定義しています。 そしてブログ記事に1600x900サイズの画像をカスタムフィールドに設定してみます。 登録した画像を出力する MTAssetURL MTAssetURL タグが画像のURLを表示するためのMTタグです。 実際に表示させるには、上記タグの他に mt:〇〇〇Asset で囲む必要があります。
Google+, Facebook, Twitter それぞれのシェアリンクを HTML a タグから直接作る方法
ウェブサイトを作られている方で SNS のシェアリンクを作成するときに, SNS のアイコンが表示されたボタンのようなものではなく, サイトのデザインにより合わせられるように HTML 要素の <a> タグから直接シェアリンクを作りたい場合ってありませんか. まさに僕がそういうシェアリンクを作りたかったので, <a> タグの href アトリビュートにどのような URL を入力すると, それぞれの SNS のシェアリンクが作成できるのか調べて見ました. シェアリンクの作り方 <a> タグの href アトリビュートに入力する URL は次のように作ります: ベースとなる URL の末尾に ? を付け加える クエリパラメータのキーと値を KEY=VALUE という形式でさらに付け加える 値は URL エンコード (パーセントエンコード) する キーと値のペアを複数指定する場合, それぞれのペ
Webサイトやブログで使えるCSSアニメーションのテクニック！Animate.cssでの実装方法を詳しく解説
CSSアニメーションが簡単に利用できるAnimate.cssを使って、Webページにアニメーションを実装するチュートリアルを紹介します。 ページを表示した時に要素をアニメーションで表示、スクロールした時に要素をアニメーションで表示、フォームのエラーをアニメーションで表示など、最近見かけるアニメーションを実装する方法を詳しく解説します。 Level Up Your Websites with Animate.css by Hudson Allen 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Animate.cssとは Animate.cssの使い方: 準備 Animate.cssの使い方: シンプルなアニメーション Animate.cssの使い方: スクロールでアニメーション Animate.cssの使い方: クリックでアニメ
便利すぎ！jQuery不要のスライダー「Swiper.js」で色々と遊んでみよう | WordPressテーマ／DigiPress
汎用性に優れている、超定番のjQueryベースのスライダーライブラリといえば、「slick」、「bxSlider」、「FlexSlider」 あたりでしょうか。 しかし、これらの名だたるライブラリよりも、総合的に機能が豊富でカスタマイズ性にも富み、しかもjQueryに依存しないJavaScriptスライダーライブラリとして人気を集めているのが、「Swiper.js」です。 試してみたところ、モバイルデバイスとレスポンシブ表示にも対応しているだけでなく、パラメータが豊富で非常に凝ったスライドショーでもあまりに簡単に実装できる優れものだったので、いくつかのサンプルと共にご紹介します。 Swiper.js の基本的な使い方 Swiper.js を使用するには、headセクション内にCSSと、</body>の前にメインのJavaScriptファイルを読み込んでおきます。 ライブラリ自体をダウンロー
ウェブ制作で差がつく！コピペ可能なHTML/CSSスニペット50個まとめ 2016年10月度
ウェブ制作で差がつくテクニックをつかった、コピー&ペーストで利用できる HTML/CSS スニペットをまとめてご紹介します。最新のデザインテクニックを駆使したレイアウトやスライダー、ボタンエフェクト、ホバーエフェクトなどユーザーがたのしむことができる工夫のつまった作品が数多く公開されています。これらのスニペットを利用することで、他とは一味違うユニークなウェブサイトを制作してみてみましょう。 「Run Pen」をクリックすることで読み込みが開始されます。右下に表示された「Return」で再読み込みし、左上のHTML/CSS/JSタブを切り替えることで、それぞれのスタイリングを確認できます。実際にカスタマイズしたいときは、右上の「Edit on Codepen」をクリックしましょう。 詳細は以下から。 ウェブ制作で差がつく、コピペ可能なHTML/CSSスニペット50個まとめ 01. Fixed
CSSで実現！目を奪われる素敵ホバーエフェクト用HTMLスニペット32個まとめ
普段からユーザーが何気なく利用しているホバーエフェクトやマウスクリックを、CSSアニメーションを使ってより魅力的に表現してみませんか。動きに目が奪われるアニメーションエフェクトは、デザイン的な見た目だけでなく、画像やハイパーリンクのクリックしやすさなど、ユーザビリティや操作性を大幅に改善することができます。 今回は、ユーザーの印象に残る効果的なホバーエフェクト用HTML/CSSスニペットをまとめてご紹介します。 HTML/CSSのみでスタイリングされたスニペットも多く、自由にカスタマイズできるだけでなく、コピペでサイトに利用することも可能です。ユーザーのハートをがっちり掴むエフェクトを、今後のプロジェクトに活かしてみてはいかがでしょう。 コピペ可ですぐに役立つ！マテリアルデザインを極めるHTML/CSSスニペット30個まとめ コピペで利用可！思わず押したくなるボタンエフェクト用HTMLスニ
.htaccessを使ったよく使うリダイレクトまとめ
Webサイト公開後、.htaccessを使って旧ページから新ページにリダイレクトをかけます。何度も同じようなことをしているのですが、やはり忘れっぽいので、よく使うリダイレクトの書き方をまとめておきます。 私と同じような誰かのお役に立てれば幸いです。 私がよく使うリダイレクトは301リダイレクトのため、この記事のコードは全て301リダイレクトとなっています。302リダイレクトを用いる場合は、適宜変更してください。 0. .htaccessとは？1.あるURLから別のURLへのリダイレクト2.ディレクトリまるごとリダイレクト3.類似したファイル名のURLをまとめてリダイレクト4.特定のディレクトリをリダイレクトから除外する5.特定のファイルをリダイレクトから除外する6.wwwなし / ありを統一する7.https(SSL)のURLへリダイレクトまた、上手く動作しない場合のパターンも挙げてみまし
.htaccessによるアクセス制御をしたい | さくらのサポート情報
充分な動作確認の元、運用を開始してください。 本ページに記載の内容は、あくまで設定方法の一例です。 前後の記述や記述方法によっては適用できない場合があります。 ウェブコンテンツの構築方法によっては、想定外の動作をする場合があります。 お客様で修正・解決いただけますようお願いします。 Optionsの設定は可能ですが、AllおよびFollowSymlinksは指定できません。 このページでご案内しているのはあくまで一例です。 詳しい設定方法や機能についてはWebサーバー(Apache)の専門書籍をご確認ください。 注意事項 さくらのレンタルサーバで利用不可、非推奨としている記述例 さくらのレンタルサーバでは、一部.htaccessの記述についてサーバーのシステム設計上動作を保証できない場合があります。 よくある例として以下を紹介いたしますので、これらに該当する場合は速やかに記述の修正、運用変
あなたの知らない"mt-config"の世界 | MONSTER DIVE
Movable Type（MT）についてこれまでいくつかのTipsをご紹介してきました。 「もっとマニアックに!!」という声が特に聞こえたわけではありませんが、今回は一部のニーズにお応えして、MTの初期設定で実はとっても便利なmt-config.cgiの設定（環境変数）を取り上げてみます。 ちょっとした設定で、MTがもっと安定する、安全性や軽量化にもつながるTipsです。SixApartの公式リファレンスも開きながらスタディしていただければ！ mt-config 環境変数 基礎編 AdminScript 管理画面「mt.cgi」のファイル名を指定することが出来ます。 管理画面のURLを推測されにくいファイル名に変更することで、セキュリティ的にも安心！ AdminScript mt-kanrigamen.cgi 的な感じで書き換えます。 同様に「mt-search.cgi」や「mt-chec
iPhoneの電話番号自動リンク：下線と文字色の修正方法 | 創kenブログ
リンクをコピー iPhoneなどのiOS端末でWEBサイトを見ると、 電話番号に自動的にリンクが貼られることがあります。 同じWEBサイトでも、PCだとこういう表示なのに↓ iPhoneで見るとこんな感じになる↓ これはiOSの機能の一つです。 その電話番号をクリックすることで、そのまま電話を掛けることが可能となります。 これは便利な機能ではありますが、困るのが勝手に電話番号に下線が付いて、文字色も変わってしまうこと。 これは修正したい場合はどうすればいいのか？ 今回はこの対処方法について。 下線消去と文字色の変更 たとえば、電話番号を記述したHTMLコードが以下だったとします。 <p class="tel-number">TEL : 080-0000-0000</p> これに対してCSSで、 .tel-number { color:#カラー番号 !important; text-deco
pictureタグを使ったレスポンシブイメージの実装方法
マツカワ Webサイト制作／コンテンツ企画／Web広告／SEO／マーケティングを経験してきた雑食系Webクリエイター・プロデューサー プロフィール / Twitter / Facebook 画像のレスポンシブ対応には、これまでずっとベストな解決策と言えるものはありませんでした。 しかし、ようやくレスポンシブサイトにおける画像最適化の問題に決着がつきそうです。 それが、picture要素によるレスポンシブイメージの実装です。 複雑なスクリプトを使うことなく、HTMLだけで画像を切り替えられる picture 要素の書き方と実践的な使い方を紹介します。 picture要素とは picture要素は、HTML5.1で追加されたタグです。 pictureは要素単体では動作せず、source と img の要素を子要素に持つことで機能する入れ物要素です。 複数の画像リソースの中から、 ブラウザの状況
ページ遷移時のページ内リンクのスムーススクロール - Qiita
2021.05.29 修正 codepenのサンプル内からのリンクを別タブで開くと警告されるようになったので、 別でサンプルHTMLを準備しました よく出回ってるhoge.html?id=sec01など、URLのクエリパラメータでIDを指定するようなURLでページ内アンカーをさせるやり方はアクセシビリティ、マシンリーダブルの面では疑問です。 JavaScriptをOFFにされてもきちんと動作し、またGoogleなどのbotにも適切な箇所にリンク先を指定できるページ内アンカー(#id)で指定する方が好ましいと個人的に考えてます。 ✕悪い例 <a href="hoge.html?id=sec01"> ◎良い例 <a href="hoge.html#sec01"> なので素直にハッシュ(#)でID指定してページが自動スクロールするJavaScriptをjQueryで書きました。 Sample h
Nuxt.jsの本格導入で遠回りしないためのTips v1.1 - Qiita
本記事はVue meetup #5で発表させていただいた「Nuxt.js本格導入で遠回りしないためのTips」のスライド発表の内容をQiita向けの記事としてまとめ、内容を一部追加したものです。これからNuxt.jsを本格的に使ってみようという方の助力になれば幸いです。 本記事では、そこそこな規模の本格的なアプリケーションにNuxt.jsを導入する場合に多くの方が直面するであろう問題や、知っていると助かりそうなことを紹介します。 Tips 1. ドキュメントを読もう 本格的なウェブアプリケーションをNuxt.jsで作ろうとしているならば、VueとNuxtのドキュメントを先にしっかり読みましょう。VueやNuxtは使い始めるのに多くのことを知る必要がなく、少しずつ利用の幅を拡げていけます。これはVueやNuxtの良いところです。しかし、本格的なウェブアプリケーションを構築する場合、結局のとこ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
.htaccessでサイトのリダイレクト | Webお役立ちネタ帳
Vue.js を vue-cli を使ってシンプルにはじめてみる - Qiita
