サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
今年の「#文学」
www.evoworx.co.jp
こんにちは。4回目の登場です。エンジニアのuchimuroです。 存在は知っているけれども実はまだ使用したことのないCSSのプロパティや関数って結構あるんですよね…。 そんな中でも今まで食わず嫌いしていたCSS関数のclamp()・max()・min()をそろそろ実案件でも使ってみようと思っているので、今回はそれらについてまとめてみようと思います。 clamp()関数には最小値、推奨値、最大値の3つの値を設定することができ、その中で条件に合致する1つの値が適用されます。 推奨値：最小値と最大値の間である限り推奨値が適用されます。最小値：許容される最も小さい値で、推奨値がこの値よりも小さくなる場合は最小値が適用されます。最大値：許容される最も大きな値で、推奨値がこの値よりも大きくなる場合は最大値が適用されます。 // プロパティ: clamp(最小値, 推奨値, 最大値); width: c
「Webサイトの黒の文字色は真っ黒（#000000）だと強すぎるからあまり使われない」という噂を聞いたことがあったのですが、実際のところどうなのでしょうか？？ ということで今回は、いくつかのサイトをみて、本文色のカラーコードを調べてみました！ サービス Google（検索結果） EVOWORX検索結果 背景色 #ffffff URL #202124 （明度 14%） 文字 #4d5156 （明度 34%） URLの部分が#202124、青文字のリンクの下の説明文は#4d5156で薄めのグレーになっています。 リンクの青色と合うようになのか、どちらの色も完全な無彩色ではなく、少し青っぽくなっているのですね！ Twitter https://twitter.com/nowanowa2020 背景色 #ffffff 文字 #0f1419 （明度 10%） Twitterも青の入っ
みなさん、こんにちわ。 かれこれマークアップを５年近くやっているのですが、list-styleとcounterプロパティについて見落としていたことがあったので、備忘録として書いておきます。 同じことやっている人がいたら、今日たった今、一緒に卒業しましょう！！ list-styleの種類 まずはlist-styleプロパティについておさらいですが、これだけの種類があります。 reset.cssなんかでnoneにして考えもしない人も多いと思いますが、今一度見直してみましょう！ 意外と知らなかったものありませんでしたか？ わたしは半分以上存在を忘れてました。 続いてcounterプロパティについてですが、指定する際には、以下の３セットを使用する形になります。 親子３代に渡って指定するファミリーセットとして覚えましょう。 親：counter-reset カウントする範囲を指定します。実際にカウント
こんにちは。エンジニアのJackieです。 最近Webでよく見られるSVGのアニメーションが簡単に作れるライブラリー「Vivus.js」を紹介したいと思います。 Vivus.jsは簡単にSVG要素をアニメーション化できる軽量のJavaScriptライブラリーです。SVG画像のパスを、一つひとつの線が描いているようなアニメーションが作れるので、手書きな筆記体や複雑なラインアート・線画アニメーションには適していて、かなり手間を減らしてタイトなスケジュールがあった場合には役立ちます。 では手順を確認しましょう。 SVGを用意する。 アニメーションさせたいSVGを用意しましょう。SVG自体はいくつかの条件があります： 要素がStroke属性があることです。Fill属性は使わないです。 例：fill: "none"; stroke: "#FFF";隠れているパス要素、見えない要素をSVGに入っていな
こんにちはミズノです。 スライダーのライブラリではおなじみのSwiper.jsですが 今回は使い方とカスタマイズを紹介していきたいと思います。(本記事執筆使用バージョン4.5.1) Swiper.jsとは jQuery依存していない豊富なオプション、コールバック関数がありカスタマイズ性に優れているレスポンシブ対応 などなど…詳しくは公式ドキュメントをご参照ください。 読み込み Swiper.jsの読み込みはバージョン5.0からIEサポート対象外のためIE対応が必要な場合は4系を使用する必要があります。今回のDEMOは4系の中で一番新しい4.5.1をCDNで読み込んでいます。 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/css/swiper.css"> <script src
うどんか蕎麦だったらギリ蕎麦派。どうもkikuchiです。 Gulpについて勉強している過程で「Gulp v4ではgulp.task()によるタスク定義は非推奨」という記事を見かけました。 参考記事：絶対つまずかないGulp 4入門(2019年版) インストールとSassを使うまでの手順 公式サイトにも記載されていますね、、 Reminder: This API isn’t the recommended pattern anymore – export your tasks. 引用元：https://gulpjs.com/docs/en/api/task/ これから新たにGulpを勉強するならGulp v4で推奨されている書き方を学ぼう！そうしよう！ということで、Gulpについて勉強したこと、gulpfile.jsの書き方についてまとめました。 Gulp（ガルプ）について GulpはWe
初めまして、今年4月に入社したエンジニアのJackieです。 コーダーとしてはまだ未熟者ですが、よろしくお願いします。 今回弊社の運営しているサイト「チワワnowa」のトップページで表示されるスライダーを実装しました。 可愛いチワワたちの写真をゆっくりと流れ続けるスライダーで見せてます。 チワワのスライダー 失敗談 最初はプラグインで作ってみて、jsの３行くらい変えるだけですぐ作れたと思ったが、どうやら甘かった…！ 確認してみたところ、なぜかウィンドウを拡大・縮小した時に、スライダーが止まったり、速度が落ちたりもしくはすごい速さで走ったり、逆流したりします…！ プラグインのコード読めないし、直し方も全く分かりません。 今回は別の方法を試してみましょう！ CSSだけで書いてみよう まずはHTMLとCSSを用意します。 HTML <!-- スライダー --> <div class="row">
みなさん、こんにちは。山田です。 Sass界ではDart Sassというものが注目を浴びていると小耳に挟みました。 公式でもこちらを推奨しており、Sassの新機能はこちらから実装されるとか。 記述の方法も変わってくるとなれば、フロントエンドエンジニアとして生きていく上では避けては通れなくなってしまう。 @importが@useに変わる、などの変更点についてはすでに多くの方が記事にしているようなので、今回はコピペでサクッと実行してコンパイルできるような形にしていきたいと思います。 今回はこのような構成にして、コンパイルにはGulpを使用します。 CSS設計はFLOCSSを参考にしていますが、この辺はお好みに合わせて編集してください。 / ├ htdocs (閲覧環境) │ └ css │ └ style.css ├ gulpfile.js ├ package.json └ src/ (開発環
久方ぶりのブログです。そういうわけでオオコシです。 コードレビューをしているときに下記のようなマークアップを見かけて、 <footer> <p><small>©2020- EVOWORX</small></p> </footer> そういえばコレsmall要るんだっけ？と思い、改めて確認してみたんですが、最近の日本のリファレンス系サイトを見ると、わりとどのサイトもfooter > p > small で記載するよう書かれていました。 ※ちなみにコピーライトの書式については 著作権表示 – Wikipedia や 年号と©マークと何が必要？Copyright（コピーライト）表記の正しい書き方 を参照してみてください。©と発行年、権利者が書いてあればOKです。 なぜこの書き方に違和感を持ったかと言うと、2014年のものになってしまうんですが、下記の記事を見てからfooterの中身がcopyri
はじめまして。エンジニアのotaniです。 弊社ブログでも以前ご紹介した、シームレスなページ遷移を導入できるJSライブラリのBarba.jsですが バージョンがv2になって記述の仕方が変わっていたので導入方法の紹介と簡単なデモを作成してみました。 Barba.js v2とは WebサイトにSPAのような高速でシームレスなページ遷移を導入できるJSライブラリです。しかも非常に軽量で、7KBしかありません。 もともとBarba.jsがありましたがv2にアップデートされ公式サイトも別ドメインになりました。 注意点 最新のモダンブラウザ（Chrome、Firefox、Edge、Safari、Opera）では問題なく動きますがIE対応するにはポリフィルが必要なようです。詳しくは公式ドキュメントをご覧ください。 DEMO こちらが今回作成したDEMOです。 遷移時のアニメーションにはGSAPを利用しま
Google Chromeは非常に使いやすいブラウザですが、拡張機能を入れればもっと便利になったり楽しくなったりします。 今回はいくつかオススメ拡張機能をご紹介します。 WEB開発系 Web Developer 読み込まれているファイルの無効化とか、要素ごとにアウトライン表示、ブラウザリサイズが簡単にできます。（Chromeに標準搭載のデベロッパーツールとは違います。） Web Maker CSS、JS、HTMLを書いたら瞬時にプレビューしてくれる拡張機能版CodePen。外部のライブラリも読み込み可能。一度閉じても保存されるので作業の続きもできます。環境を作るのが面倒な人、思い立ったらその場で何か実行したい人向け。 Wappalyzer サイトで使われているCMS、解析ツール、ウィジェットを表示してくれる拡張機能。表示されるサービスも豊富。 HTMLエラーチェック その名の通り、閲覧中の
はじめまして！2019年9月に入社したエンジニアのkikuchiです。 エヴォに入ってから最初にぶち当たった巨大な壁【Git】について、自分の備忘録も兼ねて記事にしたいと思います。（超絶初心者向けの記事です） ※作業環境 … macOS Catalina（バージョン 10.15） Gitとは VCSの一つ 分散型バージョン管理システム ファイルの変更履歴を記録・追跡する 後から古い状態に切り戻したり出来る GitHubではない（GitHubとは、Gitを利用したWebサービス） VCS（Version Control System）とは、バージョン管理システムのこと。 VCSの能力は主に次の2つです。 1. 作業履歴を残す 「いつ」「だれが」「どこで」「なにを」「なぜ」「どのように」したかが残るということ。 履歴が残ると何が出来るのか、大まかには次の3つ。 参照 … 誰がいつ何をやったかと
Githubの★の数などで静的サイトジェネレーターを比較できる StaticGenを見ていたら、Nunjucksが使える 11ty(eleventy)というのを見つけました。 そういうわけでオオコシです。 静的サイトジェネレーターというと Jekyll や Hexo などが有名かと思うんですが、11tyは Google Open Source Award にも選ばれており、テンプレートは Nunjucks だけでなく Liquid / PUG / Mustache / Handlebars / EJS / HAML / JavaScript Template Literals、もちろんHTMLやMarkdown が使えるので、例えば Nunjucks やめて PUG 使いたい！っていうケースにも対応できるし、A simpler static site generator. って書いてあるし
Webをさくらのレンタルサーバ、メールを別サービス、ドメイン管理をさくら以外にしてAレコード・MXレコードをそれぞれのサーバに割り当てていた場合、さくらのレンタルサーバ内に設置したphpなどのメールフォームでそのドメインのメールアドレスを入力するとInternal Server Errorが発生します。 わかりにくいのでもう一度。 Webとメールを下記のように運用します。 ・Web：http://www.sample.co.jp ・メール：○○@sample.co.jp Webサーバをさくらのレンタルサーバにして、メールサーバは別サービスを使います。 ドメイン管理は他社で、Aレコードにさくらのレンタルサーバ、MXレコードにメールサーバの情報を入力してもらいます。 Webサーバに送信先を [email protected] のような、同一ドメインを設定したメールフォームを設置します。 送信す
最近、おしゃれなカーソルを実装したサイトをよく見ますよね。 弊社のデザイナーリーダーもカーソルが素敵なWebサイトと記事に取り上げるくらい注目をあびているトレンドでございます。 やってみたいけど、難しそう、、、そうやって食わず嫌いしてるあなたに朗報。 実はコレそんなに難しくないのです。 まず思い浮かべたのは カーソルを変更するといえば、CSSのcursorでしょう。 リンク付きのテキストにはcursor: pointer;ってのは、normalize.cssとか使えば入れたら勝手に付くぐらいのもの。 知らず知らずのうちに使ってる人も多いかと思います。 カーソルのビジュアルを変更するには、こちらを変えるだけで容易にビジュアルを変更することができます。 .hoge { cursor: pointer; } 参考 cursor – CSS: カスケーディングスタイルシート | MDN が、しかし
前回は簡単にテーマを作成する上で準備すべきものを紹介しました。 今回はテーマ作成の中でも基本になるWordPressのアーカイブ・個別記事を表示させるループについて書きたいと思います。 ループとは ループは投稿を表示させるためのコードで、ループを使用すればアーカイブや個別記事を表示させたり、条件にあった内容の投稿を表示させることができます。 以下は基本的なループとなります。 <?php if ( have_posts() ): //投稿ある場合 ?> <?php while ( have_posts() ) : the_post(); //投稿内容を繰り返す ?> <!-- 投稿内容を表示 --> <?php endwhile; //繰り返し終了 ?> <!-- ページナビなど --> <?php else: //投稿ない無い ?> <!-- 投稿が存在しない時の処理 --> <?php
私たちの「ものづくり」は、 野菜作りにとても似ています。 良いクリエイティブを届けるため 今日も私たちの畑である クリエイティブと向き合います。 「ものづくり」は 野菜作りに似てる？ ��w¹U
こんにちは。最近キャンプにハマっているエンジニアのsuganoです。 今回はスマホでよく見かけるハンバーガーボタンをクリックすると 横からスライドして現れるドロワーメニューについて紹介します。 ドロワーメニューはdrawer.jsなど使いやすいjQueryプラグインが存在しておりますが 自身のスキルアップのために、プラグインを使用しないでJavaScriptだけで 実装できるようコードを書いてみました。 HTML/CSS まずは、HTMLです。 全体をwrapperで囲み、「メニュー部分」と「ハンバーガーボタン」は それぞれ「nav」と「button」で囲んでいます。 buttonはハンバーガーボタンを表示するためのHTMLです。 レスポンシブを前提にしたコーディングを意識して書きました。 CSSについては、かなり長くなってしまうので割愛させていただきます。 ポイントとしては、ハンバーガー
Barba.jsとは 今回は、シームレスなページ遷移を実現できる「Barba.js」について書きたいと思います。 Barba.jsとは、 XMLHttpRequestによる非同期通信処理を行い、現在閲覧しているページ以外からも情報を取得することが可能なajax。 閲覧履歴を操作するpush state API。 この二つを利用したpjax。 そして、さらにそれに動きを付けてインタラクティブな画面遷移を可能するのがBarba.jsです。 Barba.js公式ページ http://barbajs.org/ アプリのような動きをしたWebサイトを作ることができて、なおかつUXも高めることができるという優れものなのです！ メリットとデメリット とても楽しく便利なものなので、どんなサイトも使ったらいいじゃないか！ 確かにその通りなのですが、ライブラリにはデメリットは付きもの。しっかりと良し悪しを把握
mac miniの新しいやつは本当に出るんでしょうか。6月に出ると思ってたのに。 そういうわけでオオコシです。 Sierra（macOS10.12）以前のファイル共有 Sierra以前のMacのファイル共有は、Sierraのサポートページにあるように同時接続数に上限（10人）があり、それ以上の人数でファイル共有をしたいときはmacOS Serverをインストールする必要がありました。 macOS Sierra: 「ファイル共有」でファイルを共有する macOS のファイル共有では、「ファイル共有」を使って、お使いの Mac に同時に最大 10 人のユーザが接続することを許可できます。お使いの Mac に 10 台を超えるコンピュータが同時に接続できるようにする必要がある場合は、App Store で入手できる macOS Server を使用してください。 High Sierra（macO
Power Mode が動くから、VS code に乗り換えました。 そういうわけでオオコシです。 VS code用のPower ModeはXP世代にはおなじみのアイツも使えます。イルカじゃない方。 で、エディタの話は置いといて、そうです。Docker です。 なんとなくいつかはやらなきゃなーとは思っていたものの、Webアプリやってるわけじゃないし、Wordpressは Local by Flywheel でサクッと環境つくれるし、MAMP も BrowserSync もあるし、できればそっとしておきたかったんですが、昨今の開発環境の話をみているとどうにも避けて通れないようで。 というわけで、Docker試してみました。 せっかくだから毎回ImageMagickのインストールとかで躓くMovable Typeで。 Docker をインストール まずはDockerのインストールです。 弊社は
もうすっかり定番となって、使わない機会はないぐらいになってきたSVG。 だけど、インラインで使用するのはソースも長くなってしまうし、なかなか面倒！ そこで今回はpathを一回定義すれば、何度でも呼び出せるSVGの書き方について説明します。 今回使用するSVGはこちら。 弊社の年賀状で登場しましたワンコの足跡です。 詳しくは、デザイナーたけださんのブログをご参照ください。 それでは、ワンコの足跡をペタペタする方法を紹介したいと思います。 SVGを書き出す Adobe Illustratorから書き出したSVGのコードはこのような形。 <?xml version="1.0" encoding="utf-8"?> <!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --
こんばんは。コーダーのシマです。 先日たずさわった案件で、SVGにcssアニメーションを付けました。 私、普段のメインブラウザChromeなのですが、いざ実装して確認してみると、 IE/edgeで。。。transformが効いてない！ safari(9)で。。。なんかずれてる！ という悲しい事態に。 というわけで、備忘録兼ねて、実装時のTIPSを共有したいと思います。 準備 まずはSVGの素材を用意しましょう。 今回はICOON MONOさんより、エビの素材をお借りしました。 （初期表示がナナメになっているのでサンプルとしては不向きだったなと、書きながら気づきました。爆） .svg形式でDLしたら、イラレで開きましょう。（私のMacのイラレが古いのはスルーしてください） ナナメだとわかりづらいので、回転させて上を向かせちゃいましょう。（←） 動かす分の余白を考慮して、キャンバスサイズ512
スマホ（iOS）でも動画を自動再生させよう！（iFrame Player API、videoタグ対応） こんにちは、やまだです。 ここ数年、メインビジュアルに動画を入れるサイトが増えてきています。 しかし、iOS10のsafari、つまりiPhoneでは自動再生がされないため、スマホの時は静止画で対応しているサイトも多く見受けられます。 やっぱり動画にしたい！という人のお悩み解決！ スマホでも自動再生させましょう！！ まず結論から サイト内に動画入れる方法として、 iframe APIを使ってyoutubeから呼び出す videoタグを使用する というのが一般的かと思います。 最初に結論を述べると、 どちらの方法でもスマホでは無音でインライン再生なら自動再生することができます！！ どういうことかは、つべこべ言わずにやってみましょう！ iframe APIの場合 まずは、通常の手順で動画を埋
先日某案件でペライチのコーディングを担当しました。ある程度完成したところでサーバーにアップしました。しかし読み込み終わるのに5秒以上かかりすごく重い。。。 パッと見て負荷かかっていそうな部分を修正してもまだ動作がおかしい。なのでこういう時は計測サイトを使って確認する事に。 今回はYellow Lab Toolsというサイトを使って計測してみました。 計測結果は以下 結果はFと診断されました。ダメですね、言い逃れなんぞできない。 最初は何がいけないのかさっぱりわからなかったんですが、よく調べてみると思い当たらなかった原因がいくつか出てきました。 そんなこんなで色々潰しまくった結果なんと Aを叩き出すことに成功しました！諦めないでやった甲斐がありましたよ本当！ なので今回はYellow Lab ToolsでFからAにするために行った事をまとめます。 画像ファイルの圧縮 まず画像は様々なファイル
「フロントエンド開発者」の終焉を読んでモヤモヤしているオオコシです。 早速ですが、Bootstrapのv4が正式版になったということで、他のCSSフレームワークやスタイルガイド、CSS記法なんかをまとめてみました。 ※Bootstrap v4についてはコリスさんの記事が良いと思います。 ■Semantic UI 執筆時のバージョンは2.2.154（2018/1/29）。 gulp/LESSで、classの命名ルールは単語をクラスとして考えるタイプ。 カードのサンプルコード <div class="ui card"> <div class="image"><img src="/images/avatar2/large/kristy.png"></div> <div class="content"> <a class="header">Kristy</a> <div class="meta">
HomebrewはMac用のパッケージマネージャー。ターミナルで使うものなんかをいろいろインストールできたりするわけですが、Homebrew CaskはHomebrewでアプリ（GUI）も管理してしまおうというやつです。 Mac AppStore使いづらい 自動アップデート対応してないアプリだとか、新しいPCにまとめてアプリインストールしたいとかの時に便利です。 QuickLookのプラグインも個別にインストールするとなると面倒だし、何が入ってたかわからなくなることが多いので。 Caskのインストール まずHomebrewが入ってない方はターミナルでこちらを実行。 $ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" そしてCaskをインストー
アドオンの仕様が大きく変わったFirefox Quantumのリリースから約1ヶ月。 前回の記事が「Firefox Quantum 拡張機能」で検索するとかなり上位に来てしまっていてなんかすいませんという感じなんですが、1ヶ月たった現時点で使っている拡張機能を改めてご紹介したいと思います。 まず、Quantumに変わって読み込みが速くなったかというと、正直そんなに実感ないのですが（タブ開きすぎ）、個人的にQuantumで一番大きいと思う変化がコンテナータブ。 Mozilla作の純正プラグイン Firefox Multi-Account ContainersやSwitch Containerといったアドオンを入れることで使えるようになるんですが、簡単に言うとタブごとにログインアカウントが切り替えられる機能なんです。 公式のドキュメントはこちら Containers|Firefoxヘルプ 仕事
EVOWORX（エヴォワークス）の制作実績を紹介します。
次のページ
このページを最初にブックマークしてみませんか？
『株式会社 エヴォワークス -EVOWORX-』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
