まずは完成品をどうぞ 渋谷のギラギラ感を出したかったのでネオンライト風CSSを使った。 スクロールするとこんな感じ。 試しにGoogleMapAPIも使ってみた。 スマホで見るとちょっとデザインが変わります。 実際にWeb公開しているURLはここです。 ちょっと重たいかも。 作り方 まずは作った動機 vue-CLIとGitHub Pagesの組み合わせで簡単にweb公開できることを知って 試しに何か作ってみたくなったというお話。 総制作時間6時間くらいで、もちろん費用はかかっていない。 結局一通り出来上がってからレスポンシブやらなんやらの調整に一番時間かかった。 割と見た目ができていればOKくらいの気持ちで作った。 Web公開の方法 まずGitHubでリポジトリを作ってクローンして、vue-CLIを使って実装をしていく。 実装する前にまずPagesの設定をして、vueのサンプルページがうまく表示されるかを確認した。 実際にvueの生成物をPagesでの公開する方法の詳細はこちらの記事から。 XDを使ってデザインをなんとなく考える XDはadobeのデザイン作成ソフト。 Web制作ではよく使われる上に、無料で使える模様。 adobe公式サイトのスターターキットダウンロードで入手できる。 トップのイメージを探す 素材に関してはおなじみのunsplashで見つけた。 無料とは思えないクオリティの素材を発掘できるので重宝している。 vueでトップページを作成 詳しい説明は割愛するが、HTMLとCSSに関しては、ドットインストールのはじめてのWeb制作とvue-cliの使い方をググればできるレベル。 ドットインストールは初心者におすすめ。 ネオンライト風のCSS CSSで美しいネオンライトのエフェクトをテキストやボタン、ボーダーに実装するテクニックのまとめを参考にした。 GoogleMapAPI ライブラリなしでGoogle MapをVue.jsで使う方法を参考にした。 レスポンシブデザイン PCで見るのとスマホで見るのとで幅が変わるのでデザインを変更した。 これも"レスポンシブデザイン"でググったら出てくるレベルで作成。(全然解説になってない) まとめ 以上が全貌。 結局何が難しいってフレームワークを決めることとデザイン自体の2つ。 この2点に関しては正解がないので常に最適解に近づけていく必要がある。 それ以外に関しては大体ググったら正解が手に入る。 あとは、デザインの勉強のためにWebサイト制作をしてみたが、 正直XDでお絵描きして終わりでもいいような気がする。 デザイン＋実装するなると半日はかかるので、量産ができない。 いずれにしても、今後も架空のWebサイトデザインを作っていきたい。

はじめに これまでVuejsで開発をしてきたのですが、新しいプロジェクトでReactを利用することになりました。 キャッチアップのために、CSS in JS の代表的なライブラリの1つであるstyled-componentsを利用して簡単なWebサイトを作成しました。 実装を進める中で自分が調査して、なるほどと思ったポイントをまとめました。 [作成したサイト] [Github] CSS in JS について Reactのスタイリングの方法について CSS in JS について説明する前にまず基本として、Reactでは要素をどのようにスタイリングするかについて記載します。 Reactでは、要素のスタイリングに下記の2つの方法を用意しています。 通常のHTMLでスタイリングをするようにcssファイルを別に指定して、classNameプロパティに指定する Reactエレメントのstyleプロパティにcssに解釈できるオブジェクトを渡して、スタイリングを行う React公式では、パフォーマンスの観点から1の方法を推奨しています。 この公式の見解をそのまま当てはめるとcssファイルでスタイリングは定義したほうがいいとなります。 ただしCSSはグローバルスコープなので、比較的大きめのアプリケーションを実装する場合には名前の衝突やスタイルの影響範囲などをどのように担保するかの解決方法を検討する必要があります。 CSS in JS をなぜ利用するか CSS in JS は、cssの定義をjsファイルに記載して、上記の2のようにインラインスタイルで定義することでcssのスコープをそのコンポーネントに閉じようというコンセプトでスタイリングを行う手法です。 Facebookの@Vjeuxさんの「React: CSS in JS」 でこの手法が有名になったようで現在では様々なライブラリが実装されています。 CSS in JS を採用する理由は、主に下記です。 cssのスコープを対象のコンポーネントに閉じることでスタイル崩れを心配することなく開発したい JSXで記載したHTMLの構造とcssのスタイルを一緒に管理できる JSの既存のツールを利用して、静的解析やコードの入力補完がしやすい [CSS in JS の各ライブラリ] 2021年 CSS in JS のライブラリはかなり色々と出ています。 Emotion styled-components JSS glamorous Linaria CSS Modules などがざっと調べただけでも出てきます。 npm trend を確認すると、emotion が一番人気ですが、jss / styled-components もかなり近いレベルで採用されているようです。 最初はemotionを利用してみようと思ったのですが、css記法を利用する際には JSX Pragmaの対応が必要とのことでまずはReactに慣れることを優先して簡単に導入できるstyled-componentsを採用しました。 (v4以降ではstyled-componentsでもcss propに対応したため、css propを利用したいという場合でもstyled-componentsで対応できるようになりました。) styled-componentsでできること styled-componentsはReactコンポーネントをCSSでスタイルすることが主な目的なのですが、下記のように様々なスタイリングのパターンに対応しています。 コンポーネントに共通したテーマの設定(ThemeProviderを利用) 既存コンポーネントへのスタイルの適用(参考:Styling any component ) 擬似クラス / 擬似要素の適用(参考:Pseudoelements, pseudoselectors, and nesting ) React Nativeでの利用(参考: https://styled-components.com/docs/basics#react-native) styled-componentsの使い方をざっくり知りたいという入門者向けの情報 まずは、ざっくりstyled-componentsの使い方が知りたいという方は下記のリンクが参考になります。 公式サイト： https://styled-components.com/docs/basics#motivation styled-componentsの使い方の初歩を丁寧に解説してくれている https://www.webprofessional.jp/style-react-components-styled-components/ styled-componentsの基本的な使い方、Theme, Global https://akabeko.me/blog/2020/11/styled-components/ 比較的新しめのstyled-componentsの機能の紹介 個人的にこんなことまでできるんだと驚いた最後に比較的新しめの機能を3つ紹介させていただきます。 ポリモーフィズムによるHTMLタグの動的な切り替え css prop への対応 transient props 1. ポリモーフィズムによるHTMLタグの動的な切り替え これまではstyledの適用をする際にラップするHTML要素を決めなれけばならず、cssは同じだけどタグだけ変更したいとかpropsによって動的にHTMLの属性を変更したいというケースでは対応が難しい状態でした。 しかし、この機能を利用すれば、HTMLの属性をas propsによってrenderする際に決めることができます。 (乱用すると定義した場所でのタグの意味がなくなるので、注意は必要です。) データによって表示を切り替える必要のある複雑なリストやグリッドを実装するときには重宝すると思います。 // as propsを利用した例: import styled from "styled-components"; const Component = styled.div` color: red; `; render( <Component as="button" > Hello World! </Component> ) 上記のJSXは下記のようにbuttonタグに解釈されます。 // render されたHTML <button class="sc-bqyKva ehfErK">Hello World!</button> 2. css prop への対応 以前はstyled-composentはcss propに対応できておらず、必ずスタイリング対象のHTMLタグが必要となっていたため無駄なDOMが構築されてしまうケースがありました。 CSS in JS系の有名なライブリとしてはemotionはcss propに対応できていたため、css prop が利用したい場合はstyled-composentを採用せず、emotionを利用することが多かったようです。 css propに対応できたことで今後はstyled-composentが採用されることも増えるかと思います。 補足ですが、Typescriptで利用する場合には、下記の記載を追加しないと型エラーが出るようなのでご注意ください。 import {} from 'styled-components/cssprop' 3. transient props styled-composentで既存コンポーネントのスタイリングをpropsを利用して行う場合に、propsが意図せず伝播してしまうことがありました。 少しわかりにくいので、例で説明します。 下記のように普通にスタイリングを行うと、Containerコンポーネントにのみprops.colorを適用させたい場合でもTextにまでprops.colorが伝播されてしまいます。 // 普通にスタイリングした場合 import styled from "styled-components"; const Text = props => <p {...props} />; const Container = styled(Text)` color: ${p => p.color}; `; // colorがTextにまで伝播してしまう <Container color="blue">Hello world!</Container> この例のように自作コンポーネントの場合は、注意して実装すれば問題ないのですが、ライブラリなどで実装されたコンポーネント(例えば react-routerのなど) は自分でpropsを設定できないので伝播させたくない場合に困ってしまいます。 このような場合には、対象のpropsに$を利用することでpropsを伝播させなくするのがtransient propsの機能です。 // 普通にスタイリングした場合 import styled from "styled-components"; const Text = props => <p {...props} />; const Container = styled(Text)` color: ${p => p.$color}; `; // colorはContainer <Container $color="blue">Hello world!</Container> transient props の詳細な仕様については下記の記事が詳しいので、気になる方はご参照ください。 参考リンク React公式: CSS とスタイルの使用 CSS Modules 所感 食べログ フロントエンドエンジニアブログ:SassからCSS Modules、そしてstyled-componentsに乗り換えた話 クックパッド開発者ブログ:レシピサービスのフロントエンドに CSS in JS を採用した話 Emotion > css props > JSX Pragma styled-component > API Reference > "as" polymorphic prop styled-component > API Reference > Transient props Evan Jacobs: Introducing “transient” props Github:[styled-component] Support css prop

説明 本記事はslickを使用した自動スライドを導入に関する記事です。 前提条件 javascriptを導入できている。スライド化するビューが用意されている。 完成コード application.html.erb <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/> <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/> <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script> index.html.erb <% if @recommend_tweets != [] && user_signed_in? %> <div class="recommend"> <ul class="recoTweet-lists slider"> <% @recommend_tweets.each do |tweet| %> <li class='recoTweet-list'> <%= link_to tweet_path(tweet.id), remote: true, class: "show-link" do %> <% if tweet.image.attached? %> <%= image_tag tweet.image, class: "recoTweet-img" %> <% else %> <div class="recoTweet-img"></div> <% end %> <div class="recoTweet-ttl"><%= tweet.title %></div> <div class="recoTweet-message"><%= tweet.message %></div> <div class="recoTweet-txt"><%= current_user.name %>さんへオススメの投稿</div> <% end %> </li> <% end %> </ul> </div> <% end %> tweet.scss .slider{ margin: 50px auto; width: 100%; @media (max-width: 1024px) { width: 90%; } @media (max-width: 767px) { width: 100%; } } .slick-next { right: 10px !important; z-index: 100; } .slick-prev { left: 0 !important; z-index: 100; } .slick-prev:before, .slick-next:before { font-size: 30px !important; color: #000 !important; } script.js //slide $('.slider').slick({ dots: true, autoplay: true, autoplaySpeed: 3000, slidesToScroll:1, slidesToShow: 3, pauseOnHover: false, arrows: true, responsive: [ { breakpoint: 1025, settings: { slidesToShow: 1, arrows: false, } }, ] }); slick導入 application.html.erb <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/> <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/> <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script> htmlのhead部分に上記の記載をすることでslickを使えるようにします。 ビューの修正 index.html.erb <ul class="recoTweet-lists slider"> </ul> 自身のスライドにしたい複数の要素を囲んでいる一つ上の要素にsliderクラスを追加してあげます slick設定 script.js //slide $('.slider').slick({ dots: true, autoplay: true, autoplaySpeed: 3000, slidesToScroll:1, slidesToShow: 3, pauseOnHover: false, arrows: true, responsive: [ { breakpoint: 1025, settings: { slidesToShow: 1, arrows: false, } }, ] }); ビューの修正で追加した、sliderクラスに対して設定します。上から順に解説します。 dots: true ｜　ページ送りを確認できるドットを表示する autoplay: true ｜　自動でスライドするようにする autoplaySpeed: 3000 ｜　スライドする感覚を3秒にする slidesToScroll:1 ｜　スライドの際何枚分スライドするかの設定 slidesToShow: 3 ｜　スライドを何枚表示するか pauseOnHover: false ｜　ホバーした際にスライドが止まらない設定 arrows: true ｜　スライドを送るアローボタンを表示する設定 responsive部分はbreakpointで指定したい幅の時に設定が変わるようにするレスポンシブ用の記述です。 スライドの見た目の詳細設定 tweet.scss .slider{ margin: 50px auto; width: 100%; @media (max-width: 1024px) { width: 90%; } @media (max-width: 767px) { width: 100%; } } .slick-next { right: 10px !important; z-index: 100; } .slick-prev { left: 0 !important; z-index: 100; } .slick-prev:before, .slick-next:before { font-size: 30px !important; color: #000 !important; } スライドのアローボタンには右のボタンにslick-nextクラス、左にはslick-prevクラスが設定されているのでアローの見た目はそのクラスに当てることで設定できます。!importantはcssが反映されない時にこのcssを優先させるという記述なのでcssが効かない時だけ記述してください。 まとめ 今回はslickを用いた自動スライドとその見た目の書き方について記載しました。閲覧ありがとうございました。

概要 基本Railsの記法に則り書いていきます！ １から全ての説明ではなく その中であれ？どうやるの？と 疑問に思った点や実装に困った箇所を ピックアップして紹介していきます♩ 設定と準備 ・Rails ・HTML ・CSS ・Javascript(jQuery) ↑上記の言語とフレームワークを使い 架空(自分で考えたテキトーなもの)のCafeの HPを作っていこうと思います！ 11日目の作業内容 ・ビューの作成(deviseのデフォルト画面をレイアウト) 11日目の気になった箇所 deviseのsign up画面ではエラーメッセージが表示されるのに sign in画面ではエラーメッセージが表示されない。 仮説 deviseにはデフォルトでエラーメッセージを表示させるための shared/_error_messages.html.erbというファイルが存在するため、 renderでそのファイルを呼び出せば表示できるのではないか。 sign up画面の場合 registrations/new.html.erb <%= render "/shared/error_messages" %> と記述することでエラーメッセージの表示に成功できたので 同じようにようにsign in画面でも sessions/new.html.erb <%= render "/shared/error_messages" %> とすれば表示されるのではないかと思ったが表示されなかった。 結論 sign in画面では違う記述の仕方でなければ エラーメッセージの表示ができないことがわかった。 sessions/new.html.erb <%= flash[:notice] %> <%= flash[:alert] %> 上記の記述をエラーメッセージを表示させたい箇所に追加することで 可能となる。 flashとはRailsでようされているオブジェクトのことらしい。 一時的にメッセージを表示してくれる機能のようなものらしいです。 これでエラーメッセージの表示には成功！ 補足になりますがdevise.ja.ymlを導入し 日本語でエラーメッセージを表示させる方法をとられている方は devise.ja.yml ja: devise: failure: not_found_in_database: "%{authentication_keys}またはパスワードが違います。" こちらの箇所を変更するとsign in画面でのエラーメッセージ内容を変更できるので お試しください！

はじめに BootstrapとBulmaは共にデザインテンプレートとして使われることが多いフレームワークです。BootstrapはCSS,JSを含み、BulmaはCSSのみのフレームワークとなります。私は両方使った経験があるので、その経験を基に使い所を説明します。 簡単なメリデメ Bootstrap メリット ・使い方の情報量が多い。 ・JSのテンプレートもあるので動きを簡単につくれる ・コンテンツが多いので、マニアックなデザインをつくろうってなったときに意外とみつかる ・細かなレスポンシブ対応ができる デメリット ・読み込み量が多くなるのでレスポンススピードを気にすると一工夫必要 ・既視感があるサイトになりやすい ・全体に反映させてつくると、カスタマイズ性が低い Bulma メリット ・シンプルなドキュメンテーションなので実装しやすい ・cssのみなのでVueやらReactやらに組み込みやすい ・デザインがシンプルでカスタマイズ性が高い デメリット ・グローバルスコープなので、CDNで呼び出すとクラス名が被りやすい ・JSを別途つくって動きをつくる必要がある ・それほど軽量ではない（CSSのみのBootstrapとそんな変わらない） レスポンシブ対応について BootstrapもBulmaもレスポンシブ対応するための機能は十分備わってます。グリッドシステムで実装していく点も同じなので変わらない印象です。Bulmaの方がクラス名が単純明快であるのでコードみたときにわかりやすいと個人的には思います。ただ、CDNの場合はクラス名が被るので気をつけてください。ローカルの場合はスコープ設ければ問題ないかと思います。 デザインについて Bootstrapは一番使われているフロントエンドフレームワークと言われてるように、既視感が高くなってしまうのが難点ですね。初心者が使う分には情報量を多く簡単に基盤をつくれるので良いのですが、型にはまったサイトになりがちなのでデザインこだわる場合はお勧めできません。 Bulmaに関しても同じことは言えるのですが、既視感はBootstrapと比較して下げられます。シンプルで丸みのある可愛いデザインがデフォルトです。 Bootstrap Bulma まとめ BootstrapやBulmaの他にもskeltonなど多くのフロントエンドフレームワークがあるので、一度ドキュメンテーションを覗いてみて、もし用途にあったら導入してみるって感じで開発を進めていくのも良いのではないでしょうか。一からwebデザインを構築するのは時間やコストがかかりがちなので、こういったテンプレートを無料で用意していただいてるのは本当ありがたいことですね。オープンソースに感謝。