読者です 読者をやめる 読者になる 読者になる

kojiokanoのブログ

コーディング業務で困ったところをまとめています。

LPのBEMルール

BEMルールを共通化して誰が見ても理解できて編集しやすいLPをつくることが目標

 

 

 

使用例

Block__Elements--Modifire

__Elements はアンダーバーを2つ使用
--Modifire はハイフンを2つ使用

例 list__item--big

 ↑なぜこのような書き方かと言うとLPのフレームワークがMDLを採用しているため(MDLはBEMを使用している)MDLで使われている書き方と同じにしたからである。

同じファイル内で2種類以上の命名規則が存在すると混乱するためMDLの命名規則にあわせている。

 

なるべく独自性の強いクラス名は付けない(汎用性が低くなるため)

.mt10みたいなパーツは作らないでBEMに忠実に命名する ※(margin-top:10px;)

classはstyle.sassに記述する_baseにはheaderやh1などのクラスではないオリジナルな要素のstyleを書くのでclassのstyleはstyle.sassに書くこと。

 

例えば下図のようなヘッダーがあったらブロックごとにBEMで命名していく。(headerという大きなブロックの中にエレメントとしてロゴなどが入っているのではなく、headerのブロックにlogoのブロックが入っている構造にすること。親要素を継承し続けるとcssが複雑になりわかりづらくなるので、ブロックの中にブロックがある状態でつくるほうがよい。)

f:id:kojiokano:20161212123625p:plain

 

 

 sass書き方例

.main
  width: 100%
  overflow: hidden
  display: table
  padding: 0

  &__item
    float: left
    position: relative
    vertical-align: top
    height: 24px
    line-height: 24px

    &__item--active
      float: left
      position: relative
 

 BEMの関係: main__item--active      

mainがblock,itemがelement,activeがmodifire

 

 

これから↓調べてまとめること

 

●ブロックのあとにモディファイアをつけてもOK!

 

●汎用性のあるクラスを作る必要は無い。ルール

 

●box-sizing

 

●フレッスボックス

 

iphoneのsafariでボタンの表示がおかしくなる場合の理由と対処法

LPなどのページを作っているとき、PCのブラウザでの互換表示ではちゃんと表示できていたのに、サーバーに上げて実機でみたら表示が違ったなんてことがよくあるとおもいます。

その原因の1つとしてiphoneios)のsafariはinput要素にグラデーションを勝手につけてしまうということがあげられます。

これはiosのみの仕様のようでmacbookでは見られない挙動でした。(2016年12月現在)

これを無効化するためにcssかsassでinput要素に以下の書き込みが必要になります。

 

cssの場合↓

-----------------------------------------------------------------------------------------------

input{

  -webkit-appearance: none;

}

-----------------------------------------------------------------------------------------------

 

 

sassの場合↓

-----------------------------------------------------------------------------------------------

input

  -webkit-appearance: none

-----------------------------------------------------------------------------------------------

 

これでOK

 

参考ページ↓

pressstocker.com

LPへのPDF貼り付け方

無料でガイドを見る系のLPでpdfファイルを見せたい場合があるかと思います。

LPページではpdfは他の画像ファイルとは異なる扱いになっているためフォルダの場所なども特殊です。

以下がpdfの貼り付け方になります。

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

pdfファイルの格納場所

hogehoge-landingpage/app/assets/files/forms/lp_hoge/hoge.pdf

hoge部は任意の数字か文字を設定

※jpg等と同じ画像フォルダにpdfを入れるとコンパイルされず、リンクも貼れないので注意

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

 

haml

= link_to 'PDFをダウンロードする', asset_path("forms/#{@form.prefix}/hoge.pdf"), :rel => "nofollow", :target => "_new"

※この書き方(asset_path)でないとコンパイルされたファイルに対してリンクが貼れないので注意

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

 

参考例は以下のLPのthanksページ(リンク無し)

LP812/thanks

 

スマホでフォームをタップした時にテンキーが表示されるようにする

LPで電話番号などの数字を入力する項目はよくあると思います。スマホユーザーが項目をタップすると通常はテキストのキーボードが立ち上がりますが、最初からテンキーを表示してやることでページからの離脱を減らすことができるかと思います。

方法は以下これを足すだけ↓

<input type="tel">

↑をつけてやるだけでブラウザが最初からテンキーを立ち上げてくれます。

(アンドロイドもiphoneも最新のosが入っていれば対応していました)

LPの場合はhamlでさらにフォームを吐き出す感じなので↓のように赤文字部分を足すだけでOK

= f.text_field :tel, class: 'w100 validate[required]',type: 'tel',placeholder: '例:03-1234-5678',:"data-errormessage-value-missing" => '電話番号を入力してください。'

 

cv率上がりそうなので、スマホからの流入がある場合すべての数字入力フォームに使いましょう。

 

備考

input type="password" にすると英語のキーボードを表示

input type="text" にすると日本語キーボードを表示

input type="date" にすると日付の選択を表示

他にも色々とありますが、アンドロイドとiosによって表示が変わったりもするので検証して使ってみてください。

LPのフォーム作成方法2

任意の項目を作る場合の注意点

必須ではない項目を複数作る場合↓のようなコードで書くと遷移先のページの項目が重複して表示されることがある。

●1つのフォームが複数表示されるのを直す。2行目のbodyform_part_idに変更する

 

 

                  = f.fields_for :answers do |a|

                    -if a.object.body.nil?

                      = a.hidden_field :form_part_id, value: @parts[0].id

 

そこで赤文字部分を↓のように変えてやると無記入の項目に空白が記入されるので次のページで項目が重複されることがなくなる。

 

 

                  = f.fields_for :answers do |a|

                    -if a.object.form_part_id.nil?

                      = a.hidden_field :form_part_id, value: @parts[0].id

 

 

 

 

要検証!

ステップ分けのあるLPの遷移方法

例.3ステップ後に完了ページへと遷移する場合

-------------------------------------------------------

●ページ構成

1ページ目・・・_form.html.haml

2ページ目・・・_form_1.html.haml

3ページ目・・・_form_2.html.haml

完了ページ・・・_thanks.html.haml

-------------------------------------------------------

1ページ目(_form.html.haml)に必要なリンク設定

赤文字部分が次のform番号

 

= form_for @customer, url: answers_path do |f|
  = f.hidden_field :page, value: "form_1"

 

・・・・・・・・・・・・・・・・・・・・・

2ページ目(_form_1.html.haml)に必要なリンク設定

赤文字部分が次のform番号

 

= form_for @customer, url: answers_path do |f|
  = f.hidden_field :page, value: "form_2"

 

・・・・・・・・・・・・・・・・・・・・・

3ページ目(_form_2.html.haml)に必要なリンク設定

緑文字部分が完了ページ(_thanks.html.haml)ヘの遷移を意味する

 

= form_for @customer, url: answers_path do |f|
  = f.hidden_field :page, value: "last"

 

-------------------------------------------------------

 

LPのフォーム作成方法

専用項目があるものに関しては1行書けば良い↓(専用なのでvalueで番号を設定する必要がない。カイポチシステムでフォームに部品を追加する必要もない。)

 例.氏名入力テキストフォーム

= f.text_field :name, class: 'w100 validate[required]',placeholder: '例:介護花子',:"data-errormessage-value-missing" => 'お名前を入力してください。'

 

=======================================

●専用項目リスト(上の4つくらいしかデザイナーは使わなそう)

名前:name

電話番号 : tel

施設(事業所)名 : company

Eメール : email

応募番号 : id (自動で割り当てられるので入力項目にしても意味がない)

 

 =======================================

専用項目がない自由項目は answers  , body で作る↓(セレクトボックスだろうがテキストボックスだろうが選択項目だろうがこれで作れる)

 例.住所入力テキストフォーム

= f.fields_for :answers do |a|
-if a.object.body.nil?
= a.hidden_field :form_part_id, value: @parts[0].id
= a.text_field :body, class: 'w100 validate[required]',value: '',placeholder: '例:港区芝公園2-11 芝マンション101',:"data-errormessage-value-missing" => '都道府県以下の住所を入力してください。'

 

=======================================

●自由項目を複数作る場合↓value: @parts[0].idの数字を変えることで別の項目とすることができる。

 例.都道府県セレクトフォーム+住所入力テキストフォーム

= f.fields_for :answers do |a|
-if a.object.body.nil?
= a.hidden_field :form_part_id, value: @parts[0].id
= a.select :body, [["北海道"], ["青森県"], ["岩手県"], ["宮城県"], ["秋田県"], ["山形県"], ["福島県"], ["茨城県"], ["栃木県"], ["群馬県"], ["埼玉県"], ["千葉県"], ["東京都"], ["神奈川県"], ["新潟県"], ["富山県"], ["石川県"], ["福井県"], ["山梨県"], ["長野県"], ["岐阜県"], ["静岡県"], ["愛知県"], ["三重県"], ["滋賀県"], ["京都府"], ["大阪府"], ["兵庫県"], ["奈良県"], ["和歌山県"], ["鳥取県"], ["島根県"], ["岡山県"], ["広島県"], ["山口県"], ["徳島県"], ["香川県"], ["愛媛県"], ["高知県"], ["福岡県"], ["佐賀県"], ["長崎県"], ["熊本県"], ["大分県"], ["宮崎県"], ["鹿児島県"], ["沖縄県"]], {:prompt => "選択してください"}, { :class => "pref validate[required]",:"data-errormessage-value-missing" => '都道府県を選択してください。' }

 

= f.fields_for :answers do |a|
-if a.object.body.nil?
= a.hidden_field :form_part_id, value: @parts[1].id
= a.text_field :body, class: 'w100 validate[required]',value: '',placeholder: '例:港区芝公園2-11 〇〇マンション101',:"data-errormessage-value-missing" => '都道府県以下の住所を入力してください。'

 

=======================================

 ●専用項目と自由項目がある場合のカイポチシステムのフォームの作り方

↓のような専用項目と自由項目が複数混ざっている場合(名前テキスト+電話番号テキスト+都道府県選択+住所テキスト)

= f.text_field :name, class: 'w100 validate[required]',placeholder: '例:介護花子',:"data-errormessage-value-missing" => 'お名前を入力してください。'

 

= f.text_field :tel, class: 'w100 validate[required]',placeholder: '例:0300000000(ハイフンなし)',:"data-errormessage-value-missing" => '電話番号を入力してください。'

 

= f.fields_for :answers do |a|
-if a.object.body.nil?
= a.hidden_field :form_part_id, value: @parts[0].id
= a.select :body, [["北海道"], ["青森県"], ["岩手県"], ["宮城県"], ["秋田県"], ["山形県"], ["福島県"], ["茨城県"], ["栃木県"], ["群馬県"], ["埼玉県"], ["千葉県"], ["東京都"], ["神奈川県"], ["新潟県"], ["富山県"], ["石川県"], ["福井県"], ["山梨県"], ["長野県"], ["岐阜県"], ["静岡県"], ["愛知県"], ["三重県"], ["滋賀県"], ["京都府"], ["大阪府"], ["兵庫県"], ["奈良県"], ["和歌山県"], ["鳥取県"], ["島根県"], ["岡山県"], ["広島県"], ["山口県"], ["徳島県"], ["香川県"], ["愛媛県"], ["高知県"], ["福岡県"], ["佐賀県"], ["長崎県"], ["熊本県"], ["大分県"], ["宮崎県"], ["鹿児島県"], ["沖縄県"]], {:prompt => "選択してください"}, { :class => "pref validate[required]",:"data-errormessage-value-missing" => '都道府県を選択してください。' }

 

= f.fields_for :answers do |a|
-if a.object.body.nil?
= a.hidden_field :form_part_id, value: @parts[1].id
= a.text_field :body, class: 'w100 validate[required]',value: '',placeholder: '例:港区芝公園2-11 〇〇マンション101',:"data-errormessage-value-missing" => '都道府県以下の住所を入力してください。'

 

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

↓カイポチシステムで下のようなフォームを作れば良い(自由項目に割り当てられる数字はカイポチシステムでは1~はじまり、hamlのソースでは0~はじまる。1ずれる。)

 

f:id:kojiokano:20160914114807p:plain