GulpでPugとSassをビルドしてBrowserSyncでライブプレビューする - Qiita
var gulp = require('gulp'); var notify = require("gulp-notify"); var plumber = require("gulp-plumber"); var sass = require('gulp-sass'); var autoprefixer = require('gulp-autoprefixer'); var pug = require('gulp-pug'); var browserSync = require("browser-sync"); //setting : paths var paths = { 'scss': './src/sass/', 'css': './dist/css/', 'pug': './src/pug/', 'html': './dist/', 'js': './dist/js/' } //
伊藤詩織さん、中傷やセカンドレイプに「法的措置をとる」
元TBSワシントン支局長の山口敬之さんに対し、「酩酊状態で意識のない伊藤詩織さんに合意がないまま性行為をした」などとして慰謝料など330万円の支払いを命じた東京地裁の判決。 12月19日に日本外国特派員協会で記者会見を行った伊藤詩織さんは、記者の質問に答え、これまでに受けてきたセカンドレイプに対して「法的措置を考えている」と明かした。
光るボタンをHTMLとCSSで実装する方法
目立つボタンでコンバージョン率を上げたい ということであれば、光るボタンを実装するのも1つの手かもしれません（もちろん、必ずコンバージョンが上がるわけではないです）。 ということで以下では、CSSとちょっとしたHTMLで「数秒ごとにキラっと光るボタン」を実装する方法です。 こんな感じのやつ。 通常のHTMLでも利用できますが、以下ではWordPressに実装する方法として紹介します。 主な手順 主な手順としてはこちら。 CSSを貼り付ける ボタン用のHTMLを書く 基本的にコピペのみで実装する方法です。 CSSを貼り付ける まず、WordPressに実装するには、テーマ（子テーマ）のstyle.cssに以下のCSSを貼り付けます。 /* ボタン */ .btn-shine { color: #fff; background-color: #c9171e;/*背景色の変更*/ font-we
imagesLoadedを使って画像の読み込みタイミングを管理する | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうもですよ、はやちですよ:D＜わあい 今回はですね、画像の読みこみの管理ができるimagesLoadedをご紹介します:D 導入方法 npmからはこちらからインストール npm install imagesloaded Bowerからはこちらからインストール bower install imagesloaded –save ファイルからのDLはこちらからも可能です。 基本的な使用方法 jQueryからも、Vanilla.jsからも使用することができます。 jQueryからの使用方法 $('#container').imagesLoaded( function() { // 画像が読みこみ終わった時の処理 }); Vanilla.jsからの使用方法 imagesLoaded( document.querySelector('#container'), function( instance
ゼロからはじめるストックイラスト。｜トラノスケ｜note
■ストックイラスト（以下ストック）とは、、 コンテンツ提供者の目線で言うと、様々な媒体に向けて予め想定したシチュエーションのイラストを制作、販売するものです。 通常のイラストレーターのお仕事の場合ほとんどが請負、描き捨て（著作権譲渡のことではなく、他所で使い回しが効かないという意味です）になると思いますが、ストックでは１度登録してしまえばサイトが消滅しない限り半永久的に販売できます。つまりイラストを資産にすることが可能です。 では、１点の単価が低いストックで実際どの程度稼げるものなのでしょう。 世界ではもちろん国内でもすでに億単位で稼いでいる方がいらっしゃいます。「でも、そんなのは氷山の一角。ほんの一握りでしょ」そんな声が聞こえそうですね。その通り、現時点はほんの一握りの超成功者の話です。 では、私のような凡人は幾らくらい稼げるのでしょう。 （内容が長くなるので以前ツイッターで流したのをリ
gulp＋webpack＋jQuery＋pug＋sassで開発環境構築 | BLOG | フロントエンド・コーディングの受託/請負制作専門フリーランス JWS
長いこといつか更新しないとと思っていた開発環境を時間があったので作り直しました！ あれもこれもと機能充実させていったら、トータル 3 日ぐらい使ったかもしれません。。 LP ～数ページレベルの案件だと使い勝手が良いかなと思います。 大型案件向きではありません。 だいぶオレオレ開発環境なのですが、GitHubに置いておきますので、使いたい方は clone して使ってみてください。 開発環境を変えた理由 開発環境を変えた理由はいくつかあります。 gulp・node・webpack を最新にしたかった。 gulp の watch 機能が微妙で、ファイル追加したときいちいち再起動が必要だった。 js を webpack で bundle して 1 ファイルにまとめたかった。 js を module 化して機能ごとに分離したかった。 meta 周りを一括で変更できるようにしたかった。 UnCSS で
開発しやすい環境の作り方~Web系~ - Qiita
はじめに 何か記述等にミスやこうした方がいいとのことがあればコメントで教えてくださると幸いです。 目的 開発を円滑するために行ったら良いと思われることについての紹介 概要 タスクランナーのGulpを用いて開発の効率化を図る。 内容は、SassやPugで書いた内容を変換し、ファイルの内容が変更された場合は自動的にブラウザのリロードを行う流れを作成する。 Windows 8.1 npm 2.15.1 node 4.4.3 gulp 3.9.1 環境構築 フォルダ構成 まず初めに、フォルダ構成を作成します。今回の場合私はポートフォリオサイト作ろうと思っていたので以下のようにしました。 今回はこのフォルダ構成で説明していきます。 root/ ├ js/ | └ index.js ├ css/ | └ style.css ├ img/ | └ hoge.png ├ sass/ | └ style.s
Firebase Hostingを使って静的Webサイトを独自ドメインかつSSL証明書付きで公開する - araya's reservoir
ブログのホスティング先を GitHub Pages から Firebase Hosting に変えてみた。 Firebase Hosting とは その名の通り Firebase が Web サイトをホスティングしてくれるサービス。 https://firebase.google.com/docs/hosting/ 嬉しいポイントは Zero-configuration SSL is built into Firebase Hosting so content is always delivered securely. ここにあって、なんと独自ドメインでも SSL をサポートしてくれる。 料金も、フリーでそこそこ使えて、ホスティングしてくれるファイルの最大容量は計 1GB・ 月 10GB まで配信できる。 個人ブログくらいならフリーで間に合うし、足りなくなっても月$25 払えば 10GB
Firebaseを使って独自ドメインWebサイトを公開する方法 - Qiita
1. はじめに Firebaseを使って独自ドメインWebサイトを公開する方法をまとめました。 一般的にはレンタルサーバーなどへFTPツールなどを利用してHTMLファイルをアップして、Webサイト公開という流れですが、Firebaseを使用すると、コマンド一発でWebサイト公開できるようになります。 ただ、独自ドメインを設定するのは少し複雑です。 ボク自身も数ヶ月経ったら独自ドメインの設定方法忘れそうなので、備忘のために当記事を書きました。 ぜひ参考にしていただければと思います。 2. 前提事項 今回ドメイン取得はお名前.comを利用する前提で解説していきます。 3. ドメイン取得 まずは、お名前.comでドメイン取得します。 取得したいドメインを入力し、検索ボタンをクリックします。 お名前.com 次にトップドメインを選択します。 オプションは特に不要なので、すでにIDを持っている方はI
Customizing html.js | Gatsby
Gatsby uses a React component to server render the <head> and other parts of the HTML outside of the core Gatsby application. Most sites should use the default html.js shipped with Gatsby. But if you need to customize your site’s html.js, copy the default one into your source tree by running: And then make modifications as needed. If you need to insert custom HTML into the <head> or <footer> of ea
まいのこマート：追従ハンバーガーメニューを実装 - Qrac BLOG
まいのこマート：追従ハンバーガーメニューを実装Closedfirst published: 2019/01/20last updated: 2019/01/31 かねてより実装して欲しいと言われていた追従ハンバーガーメニューを「まいのこマート」へ設置した。コンテンツも100を超えているので、追従メニューがないとカテゴリーの移動が不便だった。 例によってReactで既存コンポーネントを探したのだけど、良いものが見つからなかった。セッティングがコンポーネントをまたいで複雑になっていたり、中にはFontAwesomeの古いバージョンがインクルードされていたりw 個人的にはオンオフ切り替えられれば、残りはCSSで完結させるつもりだったため、大げさな仕組みは必要なかった。 最初は既存コンポーネントの書き方を参考にしたつもりが、propsやstateがundefinedになってうまくいかず。結局、Ga
Gatsby + NetlifyでWebページを作って、公開するところまでやってみた - むにえる牧場
概要 とある友人から頼まれてポートフォリオサイトを作るという案件を趣味でやることにしました。 せっかくだからReact製の静的サイトジェネレーターGatsby.jsを使って、ホスティングサービスにはNetlifyを使ってモダンな感じで作ろうと、技術選定を行いました。 (僕はReactの経験、はたまたフロントエンドの経験全然ないです) 今回は、 Gatsbyを利用してジェネレート Netlify上でサイトを公開する まで備忘録として書き残します。 Gatsbyとは GatsbyJS Node.js環境で動作するWebサイトジェネレーター 静的サイトを製作することに特化している React Webpackとモダンな技術てんこ盛り PWA(Progressive Web App)として生成することもできる どんなに適当に作っても爆速で動作する設計になっている(らしい) とメリットだけ見ると良い感
Gatsbyプラグイン45選 - Qiita
なにこれ React.js製の静的サイトジェネレーター Gatsbyは、プラグインを使って簡単に機能拡張できる仕組みを持っています。公式プラグインとコミュニティ提供のものをあわせると、なんと502個もあるそうです。今回はその中でも、おすすめ45個をユースケース別にご紹介します。 ※ 本記事はブログの転記です。Qiitaで使えない機能（コードブロックの指定行強調表示など）の表示結果はスクリーンキャプチャにしています。HTMLでの表示結果を見たい場合はブログをご覧ください。 ユースケース別目次 ※クリックすると説明セクションにとべます。 マークダウン系 コードブロックでシンタックスハイライトする コードブロックにタイトルを追加する 見出しにGitHub風ホバーリンクをつける 絵文字を使う Graphvizでグラフを描画する 数式を使う コードブロックにJavaSriptファイルなどを埋め込む
Gatsby.js で Sass .sass .scss を使う
Gatsby で CSS を扱う方法は様々ありますが、伝統的な Sass を使ったコーディングをすることもできます。 https://www.gatsbyjs.org/packages/gatsby-plugin-sass/ まず必要なプラグインを二つインストールします。
Gatsbyでreact-helmetを使用しmetaタグを設定する
SEOコンポーネントを作成 metaタグを管理する為のコンポーネントを作成する。僕の場合、Gatsbyのスターターテーマであるgatsby-starter-defaultをベースに作っている。このテーマ内にSEOコンポーネントというmetaタグを設定するコンポーネントが存在しreact-helmetを導入済みため、特に変更する必要はなかったのでそのまま使用する。 2019/6当記事執筆時点では下記のようなコードとなっている。 import React from "react" import PropTypes from "prop-types" import Helmet from "react-helmet" import { useStaticQuery, graphql } from "gatsby" function SEO({ description, lang, meta, k
CSSのクラス名を決めるときに使うリストをつくりました
CSSは設計手法も大事ですが、どういう単語で名前をつけていくかも大事だと思っています。 個人個人でばらつきが出るところでもありますし、「単語名 英語」で検索をして探した単語を使ったけど若干意味合いが違ったといったこともあると思います。 クラス名を決めるためのリストを見かけることもありますが、英単語の読みは書かれていても意味合いが書かれていることは少ないように思います。 自分の確認用と、チームで製作するさいの基準になるようなものを作りたいと思い、単語とその意味を短くまとめてGitHubにあげています。 CSS クラス名リスト | GitHub 以下投稿時の内容です。 名前をつけることは難しいですが、とても重要なことです。 CSSには設計思想が必要ですが、実践するにあたり、名前と機能の意味がとおり、名前のつけ方にブレがないようにするべきです。 このドキュメントでは、CSSでよく使われる単語を分
ステマ検証 アナと雪の女王 アベンジャーズエンドゲーム キャプテンマーベル(後半メンタンタンドン)
20191213更新箇所 電通の関与疑惑について追記 肥大化したためインプレッションの低い(色の変わっていない)コメント、暴言を含むコメントを順次削除、暴言を含むコメントをしたユーザーのブロックしています。 ※注釈 ・当まとめでの二軍の漫画家さん表記の意図している範囲はマイクロインフルエンサー相当の影響力を持つことが想像される”ツイッターを主戦場とする漫画家さんたちの中での知名度的に二軍の漫画家さん”とします。 ・当まとめは現在進行しているステルスマーケッティングという現象を観察記録することが目的です。ステルスマーケティング行為は一部法やSNSでの利用規約に抵触しますが当事者に私刑を加えようとする行為も同様です。義憤を拗らせていやがらせ行為を行い自らもルールを犯すよりも正式な機関への通報をお勧めします。 参考文献 経済産業省 不正競争防止法 Wikipedia ステルスマーケティング 通報
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ステマ騒動のディズニー、アベンジャーズとキャプテンマーベルでも同様のステマを行っていた。
猫が信じられない
position:fixedしている要素内のinputにフォーカスが入ると、ページトップへスクロールしてしまう
