投稿日：2019-06-25T22:37:21+09:00

マンガのような画像を並べるHTML

とりあえず、マンガのように並べて表示出来るように作成しました。

静的に作っていますが、フレームワーク的に使えるように作成しています。
クリック場所でページ移動とキーボード移動に対応しています。

改造は今後に期待

https://github.com/karosuwindam/mangahtml

　 Tweet
Qiitaで続きを読む

投稿日：2019-06-25T17:09:08+09:00

４日目：FLOCSSとBEMを混ぜること、その他（初学）

本日の業務での学び

・CSS設計において、FLOCSSとBEMを混ぜ合わせることについて　←メイン
・pタグの中に入れたaタグを、親要素いっぱいいっぱいにする方法

今日は作業中心だったため少なめです。

CSS設計において、FLOCSSとBEMを混ぜ合わせることについて

まず二つについておさらい。

FLOCSS

-Foundation
　初期化やタイポグラフィなどの土台作り

-Layout
サイドバーやメインコンテンツエリアなどのブロックのスタイルを定義（接頭辞l-)

-Object
・Component 再利用できるパターン(接頭辞c-)
・Project プロジェクト固有のパターン(接頭辞p-)
・utility わずかな調整などのお助けクラス(接頭辞u-)
<header class="p-headBlock">  /*FLOCKSS例*/
   <div class="p-wrapper">
      <div class="c-btn">
      </div>
   <div>
<header>
フロックスは、
再利用性:無限大
保守性　:かなり低
の印象を受けた。

BEM

-Block 塊（もっといい表現が思いつかない)

-Element Blockを構成する要素。

-Modifier blockまたはelementのバリエーション違い

自分の勤め先では、mindBEMdingの命名規則通り、
block__Element--modifierで記述する。
<header class="headBlock">  /*BEM*/
   <div class="headBlock__wrapper">
      <div class="headBlock__wrapper__btn--ok">
      </div>
   </div>
</header>
ベムはは、
再利用性:どん底
保守性　:超高
の印象を受けた。

FLOCSSとBEMのキメラ？

実務では、命名規則：BEM中心
　　　　設計思想:FLOCSS中心でいいとこ取りをするらしい。
→一体どういうこと？？

解）BEMのBLOCK ＝FLOCSSのELEMENTとして扱う。
小さなBEMの部品がいっぱい集まってるイメージ！（多分）
例を見ていきます。
<header class="l-headerBlock">
   <div class="p-headBlock__wrapper">
      <div class="c-btn--ok"><div>
      <div class="c-btn--no"><div>
   </div>
</header>
この例では、再利用したいボタン部分をBLOCK = ELEMENTと見做すことで、
再利用が可能になっている。（.l-headerBlock外、.p-headBlock__wrapper外でも使用可）
そしてBEM表記によってクラスのダブりが起きにくい&どれがどの入れ子かわかりやすい。

まぜこぜにすることで、BEM表記部分は繋がりがわかりやすい&CSSで指定が被りにくいし、
FLOCSS設計によって、再利用やユーティリティの恩恵にあずかることができる！
パチパチ。

pタグの中に入れたaタグを、親要素いっぱいいっぱいにする方法

~~そんなことできるのでしょうか。~~ できました。

<p class="memory">
   <a class="memory__link">こちら</a>
   <p class="memory__txt">記憶を飛ばしたいかたはこちら</p>
</p>
/*CSS*/
.memory {
   position: relative;
   width: 100px;
   height: 100px;
}
.memory__link {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   z-index: 2; /*親タグにもよるが、スマホ版で押しにくくなる対策*/
}
こうすると、親タグごとクリックすることができます！
どうしても親タグをaタグにして、要素を入れ子にできない時に効果的です。

今日は以上！

　 Tweet
Qiitaで続きを読む

投稿日：2019-06-25T17:05:33+09:00

Webで游ゴシックをiPhoneやAndroidで表示できない？表示するには？

日本語の中でも美しいフォントとされる「游ゴシック体」、略して「游ゴ」。
Webデザイナーにも評判のサンセリフフォントの一つです。

先日弊社のデザイナーと共に女性向けメディアを作成する際、
游ゴシック体を使用したサイトの作成を行いました。

PCのインスペクターモードで一通りの確認をパスし、
実機確認に移ったところデザイナーから...

「iPhone、Android　両実機でフォントが違いま〜す」

あれ？
CSSで正しい font-family を設定したのになぁ...

という事があり、どうやったらスマホで游ゴシック体がきちんと出せるのか調べてみました。

Windows&Macではきちんと出せる「游ゴシック体」

游ゴシック体は「Windows」、「OSX」の２大PC向けOSにプリインストールされています。
両OS間には、デフォルトの font-weight: 400　
で表示されるフォントの太さに違いがあるという頭を悩ませる問題があるものの
フォント自体は下のCSSで表示する事ができます。
html, body {
  font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic";
}
AndroidやiPhoneにはプリインストールされていない「游ゴシック体」

「OSX」や「Windows」でプリインストールされているなら
「Android」や「iOS」でも...
と思いたいですが
残念ながらこの２大スマホOSには游ゴシック体がインストールされていません。

OSXに入っているのにどうしてiOSに入っていないのかは謎です。

ですので、上記のCSSだけでは全てのスマートフォンで游ゴシック体を出すのは不可能です。

スマホで「游ゴシック体」を使うには有料のWebフォントを使用する

では、どうすればいいのかというと

https://www.realtype.jp/
から有料のWebフォントとして游ゴシック体を使うのが現実的です。
フォント一覧ページから「游ゴシック体」で検索すると使用できるのが確認できます。
値段は月500円〜1000円です。

事実、游ゴシック体を作成している字游工房様のサイトも
上のサイトのAPIを経由してフォントを表示していました。
http://www.jiyu-kobo.co.jp/

導入は HTMLに
<style type="text/css" id="RT_ID_YuGothicPr6NM">@font-face {font-family:'YuGothicPr6NM';src:url("http://api.realtype.jp/1/font?id=XXXXX&name=YuGothicPr6NM&text=XXXXXX&type=woff&format=woff");}</style>
CSSに
html, body {
  font-family: 'YuGothicPr6NM';
}
という形で実装ができます。
詳しくはRealtype様のドキュメントを確認してください。

まとめ

Windows、OSXの両PC向けOSで游ゴシック体がデフォルトで使えるようになったのもここ数年の出来事の為か、
「游ゴシックがWebサイトでも使える！とってもハッピー！」といった記事や
最初に記したCSSで表示が出来ると唄っている記事をたくさん見かけます。

が、最近のWebサイトの閲覧者はほとんどがスマホからの流入です。

游ゴシック体を使った美しいデザインも
正しくスマホで表示出来るようしていなければ大半のユーザーに届きません。

Webフォントを使うための月々のコスト、Webフォントが適用されるまでのチラツキや遅延
など考えることも多いですが、正しく「游ゴシック体」を使ったサイトが増えていくといいと思います。

　 Tweet
Qiitaで続きを読む

投稿日：2019-06-25T16:37:48+09:00

【Rails】html.erbでの記述

画像

railsで扱う画像は [app-assets-images] がルートとなる
<%= image_tag 'icon/hogehoge.png' %>
テキストリンク

<%= link_to "リンク名","リンクパス" %>
<%= link_to "ホーム",root_path %>
画像リンク
<%= link_to image_tag('shop_images/hogehoge.png'),'/areas/hogehoge' %>

　 Tweet
Qiitaで続きを読む

投稿日：2019-06-25T15:51:13+09:00

WebStorm Live Editの使い方

本稿では、WebStormをはじめとしたJetBrains製IDEの機能であるLive Editについて紹介する。

本稿で知れること

Live Editとはどんな機能か？

Live Editの使い方

Live Editが動かないときの対処法

Live Editとは

Live Editとは、HTMLやCSS、JavaScriptファイルの更新を検知して、ブラウザに即座に反映する機能で、WebStormやPhpStormをはじめとしたJetBrains製IDEに搭載されている。

どういうときに便利か？

HTMLやCSSをいじっていて頻繁にブラウザをリロードしなければならないときに、Live Editを使うと、IDEとブラウザを行ったり来たりしなくて済む。

Live Editの使い方

Live EditしたいHTMLファイルを右クリックし、「Debug」をクリックする。

するとブラウザが立ち上がる。

これで、ファイルを書き換えて保存したタイミングで、変更がブラウザに反映されるようになる。

トラブルシューティング

Live Editが動作しないとき

LiveEditプラグインが有効になっているか？

Preferences→Pluginsで「LiveEdit」プラグインがインストールされていて、かつ、有効になっているか確認する。

Live Editの設定が正しいか？

「Preferences」→「Build, Execution, Deployment」→「Debugger」→「Live Edit」の「Update application in Chrome on changes in...」にチェックが入っているか確認する。

　 Tweet
Qiitaで続きを読む

投稿日：2019-06-25T11:30:10+09:00

Vueで複数条件(and,or,フリーワード)の絞り込みを実装する

まずはサンプル

https://kackie.github.io/sort/vue.html

こちらの記事で作ったお店のリストを改良しましたｗ
今回は管理するデータがより複雑になったので、データはjson形式でまとめてaxiosで読み込んでいます。

絞り込みの条件

グループ化されたカテゴリがあり、同グループ内を複数選択した場合はor（和食||洋食）、グループを跨いで選択した場合はand（和食||洋食&&肉）での絞り込みになります。
またフリーワード検索を作り、これもフリーワード&&選択したカテゴリというふうにandで絞り込まれます。

jQuery版との比較

データバインディングの面でVueが圧倒的に優れています。さすが。
そのおかげでjsのソースもシンプルに書くことができました。
必然的にオブジェクト指向に則って書いていくので、ソースが整理されて見やすくわかりやすいです。
またVueのtransitionクラスを利用して切り替えのインタラクションを簡単に作ることができました。

今後実装したいもの

URLにパラメータ付与
jQuery版にあったやつ。管理する情報が増えたので書き方を新しく考えないと..。

時間による絞り込み
開店時間で絞り込んだり、早い順でソートしたりできればよいかなと。
インターフェースはプルダウン？

json更新のシステム
手動でもいいけど、PHP等の勉強用に作ってみたい。

複数キーワードでの検索
今は単一キーワードでの絞り込みしかできないので、スペース区切りで複数入力された場合の処理が必要。

その場合はand検索のほうが良いか？

非表示時のインタラクション
これはどうしようもないかもしれないけど、非表示のものが左上に集約されていくのがちょっと気持ち悪いｗ
おそらくflex配下の要素にposition:absolute;を指定すると親要素基準で左上に移動してしまうせい（初めて知った）。
flexをやめると高さ揃えをjsでやることになるしうーん。

感想

jsonを手動で作成し管理するなんてことを初めてやりましたが、このインターフェースを組み合わせれば色々できそうですね。
何かの実績を整理してみたり、読んだ本や見た映画をまとめてみたり、料理のレシピを材料やジャンル別でカテゴライズしてみたり...。
思いついたら自分用にでも使ってみようと思います。

　 Tweet
Qiitaで続きを読む

投稿日：2019-06-25T10:27:45+09:00

偏差値40の未経験プログラミング学習.ver6

2019年6月25日（火）所要時間：1時間半

個人的に社内ツールを作成する予定で社内のプロダクト部の方にお願いして手伝ってもらっている。
7月末までに1つサービスをリリースする目標で取り組んでいる。

〜学んだこと〜

<li>〇〇</li> リンクについて

【2つリンクを作って同じ画面上の移動を行なった】

・リンクをクリックし表示させるには、まず親要素を作ってその中の子要素に反映させる。
・パターンによっていろいろあるけど、基本的に親要素→子要素ってのを学んだ。

※エラーの原因の理由として多いのがcss側の確認ミス※
※あと個人的に【#】←これめっちゃ忘れやすいので注意※

2019年6月26日（水）所要時間：20分

【メニューバーの追加】

◎HTML↓
<ul id="nav">
  <li><a href="#">MENU1</a></li>
  <li><a href="#">MENU2</a></li>
  <li><a href="#">MENU3</a></li>
  <li><a href="#">MENU4</a></li>
</ul>
◎CSS↓
#nav {
  list-style: none;
}

#nav li {
  width: 140px;
  text-align: center;
  background-color: #333;
  display: inline-block;
}

#nav li a {
  text-decoration: none;
  color: #fff;
  font-weight: bold;
}

　 Tweet
Qiitaで続きを読む

投稿日：2019-06-25T10:27:45+09:00

未経験からのプログラミング学習.ver6

2019年6月25日（火）所要時間：1時間半

個人的に社内ツールを作成する予定で社内のプロダクト部の方にお願いして手伝ってもらっている。
7月末までに1つサービスをリリースする目標で取り組んでいる。

〜学んだこと〜

<li>〇〇</li> リンクについて

【2つリンクを作って同じ画面上の移動を行なった】

・リンクをクリックし表示させるには、まず親要素を作ってその中の子要素に反映させる。
・パターンによっていろいろあるけど、基本的に親要素→子要素ってのを学んだ。

※エラーの原因の理由として多いのがcss側の確認ミス※
※あと個人的に【#】←これめっちゃ忘れやすいので注意※

2019年6月26日（水）所要時間：20分

【メニューバーの追加】

◎HTML↓
<ul id="nav">
  <li><a href="#">MENU1</a></li>
  <li><a href="#">MENU2</a></li>
  <li><a href="#">MENU3</a></li>
  <li><a href="#">MENU4</a></li>
</ul>
◎CSS↓
#nav {
  list-style: none;
}

#nav li {
  width: 140px;
  text-align: center;
  background-color: #333;
  display: inline-block;
}

#nav li a {
  text-decoration: none;
  color: #fff;
  font-weight: bold;
}

　 Tweet
Qiitaで続きを読む

投稿日：2019-06-25T00:32:01+09:00

Vue.jsでinput type="number"としてもvalueは常に文字列を返すので注意！number装飾子を追加しよう

はじめに

Vue.jsで投稿機能を実装していたときにハマってしまったことをメモしておきます。

ハマってしまったこと

価格入力をするためにinput type="number"として、情報を送信したのですが、うまくデータベースに保存できませんでした。
<div class="form-group">
  <label>価格</label>
  <input type="number" v-model="price" name="price">
</div>
model
price: DataTypes.INTEGER
priceはinteger型なので、input type="number"でいけるかなと思ったのですが、そうではなかったようです。

原因

type=number と書いたときでさえ、 HTMLのinput要素のvalue は常に文字列を返すようです。
なのでvue上で文字列を数値に変換します。

解決策

v-modelに管理された入力にnumber修飾子を追加するだけです。
これで数値として値を保存することができました！！
<div class="form-group">
  <label>価格</label>
  <input type="number" v-model.number="price" name="price">
</div>

　 Tweet
Qiitaで続きを読む

20190625のHTMLに関する記事は9件です。

マンガのような画像を並べるHTML

４日目：FLOCSSとBEMを混ぜること、その他（初学）

本日の業務での学び

CSS設計において、FLOCSSとBEMを混ぜ合わせることについて

FLOCSS

BEM

FLOCSSとBEMのキメラ？

pタグの中に入れたaタグを、親要素いっぱいいっぱいにする方法

Webで游ゴシックをiPhoneやAndroidで表示できない？表示するには？

Windows&Macではきちんと出せる「游ゴシック体」

AndroidやiPhoneにはプリインストールされていない「游ゴシック体」

スマホで「游ゴシック体」を使うには有料のWebフォントを使用する

まとめ

【Rails】html.erbでの記述

画像

テキストリンク

画像リンク

WebStorm Live Editの使い方

本稿で知れること

Live Editとは

どういうときに便利か？

Live Editの使い方

トラブルシューティング

Live Editが動作しないとき

LiveEditプラグインが有効になっているか？

Live Editの設定が正しいか？

Vueで複数条件(and,or,フリーワード)の絞り込みを実装する

まずはサンプル

絞り込みの条件

jQuery版との比較

今後実装したいもの

感想

偏差値40の未経験プログラミング学習.ver6

〜学んだこと〜

【2つリンクを作って同じ画面上の移動を行なった】

【メニューバーの追加】

未経験からのプログラミング学習.ver6

〜学んだこと〜

【2つリンクを作って同じ画面上の移動を行なった】

【メニューバーの追加】

Vue.jsでinput type="number"としてもvalueは常に文字列を返すので注意！number装飾子を追加しよう

はじめに

ハマってしまったこと

原因

解決策

日付別

タグ一覧