サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
デスク環境を整える
www.evoworx.co.jp
「Webサイトの黒の文字色は真っ黒(#000000)だと強すぎるからあまり使われない」という噂を聞いたことがあったのですが、実際のところどうなのでしょうか?? ということで今回は、いくつかのサイトをみて、本文色のカラーコードを調べてみました! サービス Google(検索結果) EVOWORX検索結果 背景色 #ffffff URL #202124 (明度 14%) 文字 #4d5156 (明度 34%) URLの部分が#202124、青文字のリンクの下の説明文は#4d5156で薄めのグレーになっています。 リンクの青色と合うようになのか、どちらの色も完全な無彩色ではなく、少し青っぽくなっているのですね! Twitter https://twitter.com/nowanowa2020 背景色 #ffffff 文字 #0f1419 (明度 10%) Twitterも青の入っ
こんにちはミズノです。 スライダーのライブラリではおなじみの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
初めまして、今年4月に入社したエンジニアのJackieです。 コーダーとしてはまだ未熟者ですが、よろしくお願いします。 今回弊社の運営しているサイト「チワワnowa」のトップページで表示されるスライダーを実装しました。 可愛いチワワたちの写真をゆっくりと流れ続けるスライダーで見せてます。 チワワのスライダー 失敗談 最初はプラグインで作ってみて、jsの3行くらい変えるだけですぐ作れたと思ったが、どうやら甘かった…! 確認してみたところ、なぜかウィンドウを拡大・縮小した時に、スライダーが止まったり、速度が落ちたりもしくはすごい速さで走ったり、逆流したりします…! プラグインのコード読めないし、直し方も全く分かりません。 今回は別の方法を試してみましょう! CSSだけで書いてみよう まずはHTMLとCSSを用意します。 HTML <!-- スライダー --> <div class="row">
Google Chromeは非常に使いやすいブラウザですが、拡張機能を入れればもっと便利になったり楽しくなったりします。 今回はいくつかオススメ拡張機能をご紹介します。 WEB開発系 Web Developer 読み込まれているファイルの無効化とか、要素ごとにアウトライン表示、ブラウザリサイズが簡単にできます。(Chromeに標準搭載のデベロッパーツールとは違います。) Web Maker CSS、JS、HTMLを書いたら瞬時にプレビューしてくれる拡張機能版CodePen。外部のライブラリも読み込み可能。一度閉じても保存されるので作業の続きもできます。環境を作るのが面倒な人、思い立ったらその場で何か実行したい人向け。 Wappalyzer サイトで使われているCMS、解析ツール、ウィジェットを表示してくれる拡張機能。表示されるサービスも豊富。 HTMLエラーチェック その名の通り、閲覧中の
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サイトと記事に取り上げるくらい注目をあびているトレンドでございます。 やってみたいけど、難しそう、、、そうやって食わず嫌いしてるあなたに朗報。 実はコレそんなに難しくないのです。 まず思い浮かべたのは カーソルを変更するといえば、CSSのcursorでしょう。 リンク付きのテキストにはcursor: pointer;ってのは、normalize.cssとか使えば入れたら勝手に付くぐらいのもの。 知らず知らずのうちに使ってる人も多いかと思います。 カーソルのビジュアルを変更するには、こちらを変えるだけで容易にビジュアルを変更することができます。 .hoge { cursor: pointer; } 参考 cursor – CSS: カスケーディングスタイルシート | MDN が、しかし
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
「フロントエンド開発者」の終焉を読んでモヤモヤしているオオコシです。 早速ですが、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をインストー
EVOWORX(エヴォワークス)の制作実績を紹介します。
次のページ
このページを最初にブックマークしてみませんか?
『株式会社 エヴォワークス -EVOWORX-』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く