さくらのレンタルサーバーで無料SSL証明書が使えるようになったということで、このブログも常時SSL化してみました。やっぱりブラウザに緑のロックアイコンが表示されてると安心しますねw さくらのレンタルサーバーの無料SSL証明書の設定はすごく簡単で、説明通り にやればものの5分くらいで設定できちゃいました。設定後しばらくしたらすぐにhttpsでサイトにアクセスできるようになったので「お、楽勝か！？」と思ったのですが、そんなことはありませんでした。 このブログはWordPressを使ってるんですが、さくらサーバー特有の設定とかテーマのテンプレートに使っていた古い関数とか、けっこういろいろなところでハマったのでメモっておきます。 サーバー環境やWordPressについて 一応、ざっくり環境を書いておきます。 さくらのレンタルサーバーのスタンダードプランを独自ドメインで使ってます WordPress

シンプルなスクロールアニメーションを実装したいときに使えそうなライブラリを見つけたのでご紹介します。「ScrollReveal 」というやつです。 無意味にたくさん動くアニメーションはUIやユーザの情報消費の邪魔をするので好きではないですが、単調なページをより魅力的に見せるための「気の利いた」アニメーションならいいですよね。 ScrollRevealのいいところ 3.3KB（minified / gzipped）で軽量 単体で動く。jQueryなどのライブラリに依存しないし別途CSSも必要ない 実装がシンプル アニメーションを細かく調整できる まだ開発中でv4がそろそろ完了しそう？（2017年内にと書いてあります が…） animate.css のようなCSSアニメーションのライブラリと連携させるスクリプト や他にもAOS とかDelighters.JS とかもあるんですが、単体でサクッと

レスポンシブなレイアウトにはメディアクエリが欠かせないわけですが、CSS GridやFlexboxを使えばメディアクエリなしでもレスポンシブなレイアウトが可能です。メディアクエリが全くいらなくなるということはないと思いますが、CSS GridとFlexboxを使えば、メディアクエリの記述を減らす方法があります。しかもコンテンツの幅に合わせて中身のレイアウトを調整するようなエレメント・クエリ的な使い方も、ある程度なら実現できます。 応用すれば今後のレスポンシブなレイアウトのCSSの組み方を変えてしまうような方法です。 ※デモはFirefox 58.0.2、Chrome 64.0.3282.140、Safari 11.0.3でテストしています。 CSS Gridを使ったレスポンシブレイアウト CSS Gridで以下の2つのCSS関数を使うと、メディアクエリなしでレスポンシブなレイアウトが実現で

Do You Need A Media Query? The first rule of using media queries is to ask yourself if you really need to use a Media Query at all. In this article, Rachel Andrew will take a look at the use of media queries for responsive design today, how they work alongside Flexbox and Grid Layout, and also have a look at what is coming in the future. Back in July 2010, I wrote an article for Smashing Magazine

完成図 Pugテンプレート作成 _inc_head.pug _inc_header.pug _inc_nav.pug _inc_footer.pug layout.pug index.pug config.pug JavaScriptについてばかりでしたので、たまには違うメモを。 といってもなぜか、サーバーサイド寄りの内容になりますmm 前にCodePenを漁っていたら、これ↓が目に入ったのがきっかけで 気になってしょうがなくてそのままPugをずっと調べてました。 Pugは元の名がJadeで、ちょっと前にPugに名前が変わったそうです。 私も馴染みのあるHamlに影響を受けたJavaScriptテンプレートエンジンなんだそうです。 ↓試しに作ったこれを元にメモしていきます。よければ見てみてください。 github.com 完成図 Pugテンプレート作成 まずテンプレートを用意します。 開発

この記事は J2complexed Advent Calendar 2016 の14日目の記事です。 みなさんはパグと仲良くできていますか？ パグはかわいいですね。なによりもマークアップの効率が良くなります！ Pugは以前までJadeと名乗っていましたが、Pugの方がいいですね。いいセンスをしてます。 詳しくは公式を見ていただいたほうが、いいと思います！ Getting Started - Pug Pugの簡単な紹介 PugはJST (JavaScript Templates)って言われてるJavaScriptで動くテンプレートエンジンです。 Expressでも動かすことができます。（動かしたことはありませんが） Express でのテンプレート・エンジンの使用 Githubに載っている例を見てみると、書き方がわかると思います。 doctype html html(lang="en") h

游ゴシックではプロポーショナルメトリクスは効果的 WindowsやmacOSに搭載されている游ゴシック体は、仮名が漢字に対してかなり小さめにデザインされています。游ゴシック体ではヒラギノ書体より字間が開いて見えてしまうため、プロポーショナルメトリクスを活用する効果は大きいです。 Webフォントにもプロポーショナルメトリクスは効果的 デバイスフォントだけでなく、Webフォントでもプロポーショナルメトリクスに対応したOpenTypeフォントがたくさんあります。Webフォントに関しては記事「Webフォントサービスの徹底比較！ 和文フォントが使える5つのサービスの利点まとめ」を参考ください。 ▲左側は未指定（和文等幅）の状態でカタカナの開きが大きい。右側はプロポーショナル字形を適用した状態で、カタカナが詰まっている。 対応環境：ほぼすべてのブラウザで利用可能 これだけ便利なCSSですが、どれだけの

@-webkit-keyframes AnimationName { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} } @-moz-keyframes AnimationName { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} } @-o-keyframes AnimationName { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }

Basic gradient animationBasic gradients animation with 3 gradients in queue composed of 2 colors. var granimInstance = new Granim({ element: '#canvas-basic', direction: 'left-right', isPausedWhenNotInView: true, states : { "default-state": { gradients: [ ['#ff9966', '#ff5e62'], ['#00F260', '#0575E6'], ['#e1eec3', '#f05053'] ] } } });

ELI(エリ)は、洋服の襟につける小型マイクデバイスです。 専用のスマホアプリと連携して、あなたが話す日本語を記録・解析、 あなたに最適な英会話レッスンを生成します。 仕事内容や興味関心の領域から、あなたらしい言い方や伝え方まで、 ふだん話していることから、英会話を学ぶことができます。 あなたらしい言葉を伝える英会話が、ELI からはじまります。

日本語組版において、縦書きと横書きの選択肢があるということは極めて自然なことですが、Webサイト制作の中で自由な組版を実装するための技術はこれまで標準化されておらず、縦書きの実装はJavaScript等による強引な手段でしか実現できないという問題を抱えていました。 私たち『縦書きWeb普及委員会』は、縦書きと横書きが混在する日本語組版の文化をWebに継承し、自由な組版を実装するための規格をWeb標準とすべく、Webに関連する各種技術の国際標準化団体であるW3Cと協議を重ねながら、CSSにおける新たな組版規格である〝Writing Modes〟の標準化に向け、様々な取り組みを行なっています。 『たてよこWebアワード2017』は、こうした取り組みのひとつとして、CSS Writing Modesを用いた縦書き実装の指標となるような優れたWebサイトを表彰することを目的としたアワードです。 縦

こんにちは、2017年春アニメは良作揃いで今からワクワクが止まらないデザイナーの奥田です。 さて、ワクワクといえばIE9、10のサポート終了でかなりできる幅が広がりワクワクしますね。 個人的にはjQueryを切り捨て（jQuery今までありがとう！）できるだけコードはネイティブで書きつつ、モダンな環境で構築するという新たなステージに挑戦しました。 今回は僕が構築したWebサイト制作におけるフロントエンド開発環境をご紹介いたします。 「もっといい方法があるよ！」という方はぜひご一報ください。 Table of contents使用するビルドツール必要なパッケージをインストールするgulpfile.jsを作成するwebpack.confg.jsを作成する最後に使用するビルドツール今まではgulpでBrowserifyを使用していましたが今流行のWebpackに移行しました。 本来Webpack

はじめに 何か記述等にミスやこうした方がいいとのことがあればコメントで教えてくださると幸いです。 目的 開発を円滑するために行ったら良いと思われることについての紹介 概要 タスクランナーの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

Overlay simply slides down with the content. Open Overlay If you enjoyed this demo you might also like: Perspective Page View Navigation Animated Border Menus

【jQuery】レスポンシブには欠かせないドロワーメニュー系jQueryプラグイン10選に引き続き、jQuery等を使ったナビメニュープラグイン。今回はフルスクリーン系のみに絞ってみました。 レシポンシブになっているウェブサイトで使われているナビゲーションは色々ありますが、その中でもフルスクリーンは段々と多くなってきているような気がします。 そんなフルスクリーンナビメニューを10個選んでみました。 ライセンス等は各自で確認して下さい。 Full Screen Burger Menu

「CSSブレンドモード」CSSの比較的新しいプロパティである「mix-brend-mode」について。 もはやご存じの方も多いと思いますが、PhotoshopやIllustratorで見かける、オーバーレイなどの、重なりあうオブジェクトの色どうしを計算して表示の方法を変える技がCSSでも実現できるようになってきました。 国内のサイトでは見かけませんが、ポートフォリオや、最新ブラウザをターゲットにした実装の際には試してみたいものです。ということで、デモを載せます。そのまえに！ mix-brend-modeを使用するメリットとは？canvasやWebGLでは美しく独特な表現が可能になります。 が、静的なページでの実装については、2016年ではほぼその意味が見当たらないです・・・IEがあるがゆえに実際の案件では使いづらいでしょうし。 ただ、その壁を取っ払えば、テキストの急な変更で画像の差し替えが

mix-blend-modeの指定方法 mix-blend-mode:overlay; これだけです。とっても簡単。 それでは、使用例を見てみましょう！ mix-blend-modeの使用サンプル サンプルを見る ・HTML <div class="blend-sample"> <div class="blend-back"> <img src=""> </div> <div class="blend-front"> <p> SAMPLE TEXT </p> </div> </div> ・CSS /*これは適宜変えてね*/ .blend-sample { width:100%; position:relative; height:100vh; overflow:hidden; } /*背景画像*/ .blend-back img { width:60%; height:auto; } /*

2019年2月3日 CSS 要素の四隅の角を丸めるためのCSSプロパティー「border-radius」。ボックスや画像などの要素に対して適応でき、角丸にしたりまん丸にしたりと、様々な表現が可能です。このプロパティーが使えるようになってから、どれだけコーディングが楽になったか…！今回はそんなborder-radiusの基本的な使い方と、応用表現を紹介します！ ↑私が10年以上利用している会計ソフト！ 無難で王道！正円の円弧を使った角丸 border-radius は「border」とついているものの、border プロパティーの指定がなくても大丈夫。background によって与えられた背景や、img 要素で指定された画像の四隅も丸まめられます。 四隅に同じ値の丸みを与えるなら border-radius: 10px; と記述すればOK。半径10pxの正円の円弧をベースにした角丸を実装で

CSSはPhotoshopライクなグラフィカルなブレンドモードを搭載しています。デザイナーやモーションクリエイターにとっては直感的に利用しやすいのではないでしょうか。しかし、CSSのブレンドモードは執筆時点（2015年9月現在）はMicrosoft EdgeやInternet Explorerが対応していないのがデメリットです（追記：2022年現在はほぼすべてのブラウザで利用できます）。 Canvas要素は旧式ブラウザを含め多くのブラウザで利用できるものの、Canvas要素はブレンドモードの種類が少ないという制約があります。ここで挙げたように、それぞれのテクノロジーには一長一短があるのでコンテンツに応じて最適な手段を検討するのが現実解となります。 デモ作成で選んだのはCSS3のブレンドモード デモ作成にあたり2つのレイヤーを作成しました。1つはカラフルな背景のレイヤー、もう1つはドローイン