サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
大谷翔平
glatchdesign.com
横浜市・東京都内を中心に活動するフリーランスのWebデザイナーとフロントエンドエンジニアのWeb制作事務所です。BtoBのLPやコーポレートサイトの制作を得意としています。
最近動画を作る機会があり、無料で使える動画素材を探していました。 今回はその際に見つけた、Webサイトの背景や結婚式ムービーに使える無料の動画素材サイトをまとめました。 いくつもの動画素材サイトを見て回りましたが、国内サイトより海外サイトのほうが数も豊富で検索しやすく、使いやすい印象です。 (広告の多すぎるサイトや、動画を探しにくいサイトは除いてご紹介します) ※動画のダウンロード・使用の際はライセンスを必ず確認してください。
2018年1月時点ではモジュールバンドラーのデファクトスタンダードと言える存在のwebpack。JavaScriptはもちろんcssやsass、画像、webフォントなどあらゆるリソースが扱えます。 一方、webpackと同じような役割を担うことができるツールにgulpがあります。確かにwebpackとgulpは、場合によっては同じようなこともできるのですが、私はこの2つを役割分担させて両方使っています。 今回はgulpとwebpackを併用する方法と、Babelを使用して古いブラウザに対応しつつ最新の文法でJavaScriptを書ける環境の構築をします。 対象の読者 もともとgulpを長く使っていて、これまでの資産を活用しながらwebpackの恩恵に預かれないかなと考えている人には今回の方法は期待に添えると思います。 gulp・webpack・Babelの役割 環境構築の前にそれぞれの役割
CSSで透過グラデーションを作った時、safari・iphoneのみ、透明にならず黒の透過になってしまう現象があったので解決方法をメモしておきます。 safariでの現象 background: linear-gradient(to bottom, transparent 0, #fff 30%); 上記のようにlinear-gradientを使用して白のグラデーションを作成しました。 左のキャプチャが期待する表示ですが、safariでは右のようにグラデーション部分が黒くなってしまっています。 原因は透過部分に指定しているtransparentです。 transparentは「透明」という意味ではなく、rgba(0, 0, 0, 0)のショートハンドで、「黒の透明度0」だそうです。 transparentではなくrgba()指定で なので、transparentで指定している部分をrgba
最近では当たり前のようにWeb制作時にGulpを使用していましたが、npm-scriptsを使用すれば、Node.js + npmのみで同等の環境を構築できることを知りました。いつ廃れるとも知らない、それに潰しの効かないGulpの学習にも疲れてしまったので、気分転換も兼ねてnpm-scriptsで開発環境を作ってみました。 npm-scriptsとは Gulpでもお馴染みのpackage.json内にある「scripts」というフィールドに、シェルスクリプトやエイリアスコマンドを登録できます。これがnpm-scriptsです。 このファイルに記述したスクリプトは、npm run SCRIPTNAMEで実行が可能です。今回はこの「script」にGulpで定義していたタスクと同等のスクリプトを登録し、Gulpを介さずにビルドツールを構築することが目的です。 Gulpの問題点 Gulpの使用に
簡単な解決法はドメインを変更すること 解決法としては自己署名証明書で対応するなどの方法がありますが、今回はおそらく一番簡単なドメインを変更することで対応する方法をご紹介します。 参考記事によると推奨する下記のようなドメインに変更で解決します。 .localhost .invalid .test .example VCCWを使っている私の場合 私はローカル環境の構築はVagrant + VCCWを使用しているのでご紹介しておきます。 site.yml内のローカルのホスト名を「.dev」から「.test」などに変更 Movefile内のローカルのホスト名を「.dev」から「.test」などに変更 vagrant upを実行 念のためデータベースのバックアップを取っておくと安心です。 補足 この事象はChrome固有のものですので、Firefox等のブラウザでは問題は起こりません。
ある要素を絶対位置指定で固定表示をすることを可能にするposition:fixed;というプロパティがあります。 ページ上に一枚レイヤーを重ねるような形で、メニューやモーダルなどのコンテンツを全画面表示させる場合などに用いられますが、その際にある条件を満たすと、iOSのSafariで絶対位置で指定した要素内をスクロール出来ない事象が発生してしまいます。 実案件でこの事象に遭遇したので、備忘録を兼ねて共有します。 発生する条件 具体的には以下の条件を満たすと、スクロールが出来なくなってしまうようです。 発生環境 iOS9 Safari(他バージョンは未確認) 発生条件 positionプロパティにabsoluteかfixedを指定している heightプロパティとoverflowプロパティを指定している -webkit-overflow-scrollingプロパティにtouchを指定している
WordPress4.4以降は、それ以前までにタイトルを生成する為に使用されていたwp_title関数を使用して生成する方法が非推奨となりました。それに代わって新たにwp_get_document_titleと言う関数が登場し、カスタマイズ方法もこれまでと変わりました。 これまでのtitleの記述方法 これまでtitleタグは前述のwp_title関数を使用して以下のように記述していました。 <title><?php wp_title( '|', true, 'right' ); ?></title> WordPress4.4以降のtitleの記述方法 しかし、WordPress4.4以降はfunctions.phpにadd_theme_support( 'title-tag' );と記述をするだけでタイトルを出力してくれるようになりました。 <?php add_theme_support
メタ 文字コード、ディスクリプション、キーワードなどメタ情報に関して記述事項があれば明示します。個人的には文字コードを明示するくらいです。 規約例 文字コードはUTF-8(BOMなし)とする。 HTMLに関するルール 基本ルール マークアップを行う上での基本的なルールを明示します。 規約例 HTMLのバージョンはHTML5とする。 インデントは半角スペース2つとする。 JavaScriptの読み込みは、動作に影響がある場合を除いて</body>タグの直上とする。 head内に記述するコード head内に記述するコードを明示します。 規約例 head内に記述するコードは下記を最低限とし、制作コンテンツに応じて指示があれば追加・変更する。 <head> <meta charset="UTF-8"> <meta name="format-detection" content="telephone
似たようなhtmlを複数ページ制作するような案件があると思いますが、地道に複製して制作するのは非効率で管理も面倒でミスもしやすいです。 そこで今回はGulpとEJSというテンプレートエンジンを使用してJSONファイルに設定した値を読み込み、複数のhtmlファイルを量産する方法を備忘録を兼ねてご紹介します。 今回使用するもの 今回はGulpを使用してEJSを動かします。Gulpの導入方法などは検索するとたくさん記事が出てきますので、そちらをご確認下さい。 テンプレートエンジンであるEJSと、生成したファイルごとに名前を付与するリネーム用のプラグインを導入します。 gulp-ejs gulp-rename pages.json template.ejs gulp.js 各ファイルの設定 pages.json ユニークな値を格納するJSONファイルは下記の通りです。 { "pages": [ {
背景画像を画面いっぱいに設定する際、上に乗る文字などを読みやすくするために背景画像を暗くすることがあると思いますが、写真を加工せずにCSSで暗くしようとしてopacityを使うと、中の要素に文字などを含めている場合、文字を含めた全体が暗くなってしまいます。 そこで、opacityを使わずに、内包する要素を含まずに背景画像のみをCSSで暗くする方法をご紹介します。 HTML 背景を指定するdiv.bgの中に、position: absolute;で浮かせるボックスdiv.boxを作ります。 <div class="bg"> <div class="box"> <h1>HEADDING</h1> <p>Lorem ipsum</p> </div> </div> .bgに背景画像をひき、position: relative;を指定します。 .bgのbefore要素にRGBaの記述で黒を重ねます。
このページを最初にブックマークしてみませんか?
『Glatch(グラッチ) - 夫婦で活動するフリーランスWeb制作ユニット』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く