HarmonyEngineってなんやねん

まあ端的に言うと、うちの兄貴が作ろうとしている新しいサービスの実装です。
以下HEと呼称していきますね。人生で初めてこういった記事を書くので下手糞ですがお付き合いください。その際使った技術などのアウトプットのために記事を作成していこうと思います。ブログに書くかQiitaに書くか迷ったのですが、結局Qiitaにしました。

HEの内容

HarmonyEngine、通称HEは普段埋もれてしまっている才能あるクリエイター達を発掘するための新しいサービスのプロトタイプネームです。と兄貴は言っていますが今のところ概要はあんまし掴めてません。でもサービスの内容的にちょっと面白そうなので制作に加わりました。あと、私のTwitterを見ている方ならわかるとは思いますが、将来やりたいことのためのポートフォリオとして有効活用していきたいなと。

ちなみに

このサービスの名前は某小説家の中に出てくる名前からとったそうです。まあsteins;gateみたいでカッコいいと思うけどね。

仕様

一応今後のポートフォリオにするために、やりたい言語を詰め込んでいく

フロント

• HTML
  • HTML5
• CSS
  • CSS3
• Javascript
  • vue.js
  • jquery

なお現在js系は頑張って勉強中です・・・

サーバーサイド

• PHP
• python
  • django

今のところこれ以外に思いつきません・・・

んじゃ

2020/01/15現在で何も情報がないので書きようがないのですが、これからサービスを構築していこうと思います。がんばるお(^ω^)

はじめに

CSSでスタイルを定義する際、クリック/タップ可能な領域は、「カーソルをホバーさせることができるか」に応じて変更したい場合があります。これは例えば、マウスカーソルが使えない場合はタップ可能であることを認識させるデザインにしたい、タップ可能領域を大きくしたい、などのケースが考えられます。

ホバー可能か否かでスタイルを変更する

ホバー可能かどうかにおいて異なるCSSを適用したい場合、 max-width などのメディアクエリを使用して「スマホっぽいサイズ」かどうかで識別しようとしても、Viewportのサイズはデバイスによって様々であるため確実ではありません。そこで役に立つのが、 hover メディアクエリです。

hover は、ユーザーの入力方法が要素をホバー可能かどうかを識別するメディアクエリであり、以下のように使用することが可能です。

@media (hover) {
  .something {
    /* ホバー可能な場合に適用するスタイル */        
  } 
}

@media  (hover:none) {
  .something {
    /* ホバーできない場合に適用するスタイル　*/
  } 
}

その他の方法

ここで説明したのは hover を使う方法ですが、その他の方法として pointer メディアクエリを使用する方法も考えられます。これは、ユーザーが持つポインティングデバイスの正確さを識別するメディアクエリであり、マウスなどの正確なポインティングデバイスを使っている場合は pointer: fine、指などのタッチスクリーンを使っている場合は pointer: fine として定義することができます。

参考

• Using Media Queries For Responsive Design In 2018