サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
Wikipedia
glatchdesign.com
先日Glatchのポートフォリオサイトをリニューアルしました。 前回の記事では妻がポートフォリオの設計・デザインプロセスに関して投稿してくれました。 今回は実装編です。 普段は技術系の記事はテックブログに書いているのですが、ポートフォリオの宣伝も兼ねているので今回はこちらに投稿します。良かったらテックブログも見ていただけると嬉しいです。 さて技術面に関してはせっかくリニューアルするのでこの機会に新しい技術を試したい、でもWordPressで管理してきた資産はできればそのまま活かしたい、という2つの要望が自分の中にありました。 この2つを両立させるためにコンテンツ管理には引き続きWordPressを使用し、フロント部分にモダンなフレームワークを採用することで要望を満たしました。 検討の結果WP REST API + Nuxt.jsというJAMstackな構成で構築することにしました。 本記事
先日、ちょっとしたアイソメトリックなアイテムを作りたいと思い制作方法を調べてみたのですが、変形して回転して3面作ってペンツールでパスをあれこれして色を変えて…、と手順の多い制作方法が多く出てきました。 より簡単に作れる方法がないか調べたところ、3Dエフェクトを使用して簡単に作れる方法があったので紹介します。 アイコンやアルファベットなど単純な図形であれば数クリックでアイソメトリックなイラストが作れます。 アイソメトリックにしたい図を用意 イラストレーターにアイソメトリック化したい図を用意します。 今回は六角形を使おうと思います。(テキストを使いたい場合はアウトライン化しておきます。) 3D「押し出しとベベル」を使う 効果→3D→押し出しとベベルに進みます。 「アイソメトリック法」を選ぶ 「位置」のドロップダウンから、「アイソメトリック法 – 左面」を選びます。 (他に、右面、上面、底面が選
見出し例としては「〇〇を使えば解決できます」、「〇〇が選ばれる3つの理由」等となります。 商品・サービスのスペックを羅列するのではなく、どんな悩みをどのように解決できるか&解決できる理由を伝えます。 説明文を長々と並べただけでは分かりにくく読まれないので、文章は簡潔にし、理解の助けになるようであればグラフやイラストを活用します。 特に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
サイト制作で忘れられがちな印象があるfaviconの設定ですが、とっても重要なので正しい書き方で設定しましょう! <link>でfaviconを指定することがありますが、以下の記述をよく見かけるかと思います。 <link rel="shortcut icon" href="/path/favicon.ico"> rel属性にshortcutの記述が必要なのは、IE8以下の対応が必要なときのみです。 shortcutは非準拠ですので使わないようにしましょう。 古いブラウザに対応する必要がないサイトであれば、rel属性にshortcutは不要ですし、ファビコンの画像もpngやgifが問題なく使用できます。 そこで、どのブラウザまで対応するかによりどう記述すればよいかが変わってくるので、一覧にまとめました。 IE8以下も含めたIE、Chrome、Firefox、Safari、Opera、Edge
似たような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の記述で黒を重ねます。
ダウンロードしたdmgをダブルクリックすると、インストーラーが開きます。 イラストの通り、SourceTree.appをApplicationsフォルダにドラッグ&ドロップします。 アプリケーションにSourceTreeが入ります。 セットアップ インストールしたSourceTreeを起動すると、セットアップウィザードが開きます。 規約に同意するため、「I agree…」にチェックをつけ、Continueをクリックします。 すると、画面が変わるので、アカウントを持っていない場合は「Go to My Atlassian」を押して登録に進みます。 アトラシアンアカウントは、HipChatやBitbucketなどの他サービスと一括で使えるアカウントです。 (以前からSourceTreeを使っている方は、新しくバージョンアップする際にアカウント取得が必要になります。) 新規登録の流れ ブラウザにこ
横浜市・東京都内を中心に活動するフリーランスのWebデザイナーとフロントエンドエンジニアのWeb制作事務所です。BtoBのLPやコーポレートサイトの制作を得意としています。
このページを最初にブックマークしてみませんか?
『Glatch(グラッチ) - 夫婦で活動するフリーランスWeb制作ユニット』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く