記事の概要 この記事では、私が作成したポートフォリオの解説をします。コンテンツ投稿、管理、その他の営業に利用できるサービス機能をつけた、お店の個人ホームページです。管理者のみ、コンテンツのCRUD機能やその他の機能が使える仕様にしています。一般…

すること ユーザーの永続的ログインシステムの続き 管理人をユーザーモデルで作成 ログインのcontroller作成やルーティング設定 ログインのビュー作成 ログイン機能作成 ちょっと発展機能を加える ログイン機能を実装したことによって利用できること 5のログ…

こんなのです。 方法 ご自身でお好みのアイコンを使いましょう。 fontawesome.com <p id="pageTop"><a href="#"><i class="fa fa-chevron-up"></i></a></p> htmlはこんな感じ /* PAGE_TOP_BTN */ #pageTop { position: fixed; bottom: 20px; right: 20px; z-index: 999; } #pageTop i { padding-top: 7px; } #pageTop a { display:…

実現するもの HPによくある定休日が色付けされていたり、予約時間が書かれているカレンダーです。 Googleカレンダーと連携しているので、Google側で予定が追加されたり、削除されたりするとHPのカレンダーもすぐにその情報が反映されます。どのように反映さ…

作ったもの HPを作成したのですが、管理人だけがページを閲覧しながら記事などの投稿や編集、削除を行えるようにしたかったので、動画のようにログイン後に同じnewsのページに移動すると投稿機能が使えるようになっています。この記事では「ログイン機能」の…

実現すること フォームに何も入力されてない状態で投稿ボタン押すなどするとアラートが出るやつです。 方法 例としてProductモデルを使います。バリデーションは下記の通り↓ product.rb class Product < ApplicationRecord validates :name, presence: true,…

実現すること ↑こんなの 方法 まずはざっとHTMLを書いていきます。 <div class="wrapper grid"> <div class="item img-fade-up'"> <img src="image_1.jpg"> </div> <div class="item img-fade-up'"> <img src="image_2.jpg"> </div> <div class="item img-fade-up'"> <img src="image_3.jpg"> </div> <div class="item img-fade-up'"> </div></div>

↑ご想像の通りこちらを作ります。「記述リスト」であるdl要素を使います。 dt要素にサービス名、dd要素には価格を書いていきます。 価格が変動するサービス(¥4000~)にはfromクラスをつけておきます。 <h2 class="page-title">Menu</h2> <div class="menu"> <dl> <dt>Cut</dt> <dd>¥3300</dd> </dl> <dl> <dt>Color</dt> <dd class="from">¥4000</dd> </dl> <dl> <dt>Perm</dt> <dd class="from">¥3000</dd> </dl></div>