- 投稿日:2020-11-13T22:06:23+09:00
【CSS】子要素「僕に逆らう奴は親(要素)でも〇す」
概要
長く生きていると親要素から子要素をはみ出させたい時がくると思います
今回は大きく分けて2通りのやり方ではみ出させてみようと思いますもとの要素はこんな感じ
方法1:ディスプレイ幅に合わせて調整
子要素にvw(viewport width)で、100vwを指定するとウィンドウの幅いっぱいになります
これだけだと、開始位置が親要素に依存するのでズレちゃいます
こんな感じに指定すると
.child1 { width: 100vw; position: relative; left: 50%; transform: translateX(-50%); }コード
oyakoro.html<div class="parent1"> parent1 <div class="child1">child1</div> </div>oyakoro.scss.parent1 { text-align: center; color: white; background-color: #57d1c9; width: 50%; margin: 12px auto; padding: 12px; height: 400px; > .child1 { background-color: #ed5485; height: 200px; width: 100vw; position: relative; left: 50%; transform: translateX(-50%); } }方法2:ネガティブマージンを利用
ネガティブマージンとは、marginに、マイナスの数値を指定することです
画像の上に文字を載せたい時などに使われる気がします
方法2-1:calc()を利用
子要素に下記を指定
.child2 { margin: 0 calc(((100vw - 100%) / 2) * -1); }コード
oyakoro.html<div class="parent2"> parent2 <div class="child2">child2</div> </div>oyakoro.scss.parent2 { text-align: center; color: white; background-color: #0072bb; width: 50%; margin: 12px auto; padding: 12px; height: 400px; > .child2 { height: 200px; background-color: #ff4c3b; margin: 0 calc(((100vw - 100%) / 2) * -1); } }方法2-2:力技で幅を広げる
子要素に下記を指定
.child3 { margin: 0 -100%; }コード
oyakoro.html<div> <div class="parent3"> parent3 <div class="child3">child3</div> </div> </div>oyakoro.scss.parent3 { text-align: center; color: white; background-color: #09194f; width: 50%; margin: 12px auto; padding: 12px; height: 400px; > .child3 { height: 200px; background-color: #f9ce00; margin: 0 -100%; } }他に良いやり方あったら教えてくれると嬉しいです
- 投稿日:2020-11-13T21:29:34+09:00
トップページにおしゃれな背景画像を使うだけでそれっぽいサイトになる説を検証してみた
はじめに
なぜやるか
就活用のポートフォリオを作っていて第一印象がなんだか安っぽいな〜と感じたので少し手を加えてみる
作っているもの
記事投稿アプリ(Qiitaに近い)
before
非ログインユーザーでも閲覧できるようにしたいので、頭にログインページは設けず。
その結果、初めてのユーザーにとってどうしたらいいの?というインターフェースになってしまっている。after
とりあえず背景画像とゲストログインボタンを設置してみた。
うん、非常に改善されたと思う。手順
ここからは画像の加工やCSSに慣れていない初心者向けに書きます。
おしゃれ画像はUnsplash一択
画像に困ったらとにもかくにもUnsplash。
世界中の美しい写真がログイン不要かつ無料でダウンロードできる。加工はKeynote
MacユーザーであればKeynoteで事足ります。
新規スライド
↓
スライドサイズ設定
↓
画像を挿入
↓
画像サイズ調整<--- ここまでで写真のトリミングが完了 --->
縦200px,横600pxでトリミング
画像に透かしを入れる
- 黒い透かし
写真の上に四角形を重ねる
↓
四角形の色を黒にする
↓
不透明度を調節する
- 白い透かし
色を白にしたらこんな感じ
加工が終わったら
ファイル
↓
書き出す
↓
イメージから好きなファイル形式を選んで出力
トップページに配置
viewファイル
index.html.erb<div class='guest-login-box'> <%= link_to 'ゲストログイン', users_guest_sign_in_path, method: :post, class:'guest-login-btn' %> </div>CSS
index.css.guest-login-box { height: 30vw; width: 100vw; display: flex; flex-direction: column; align-items: center; justify-content: center; background-image: url("/images/guest_login_box_background.png"); background-position: center; background-size: cover; } .guest-login-btn { border: 2px solid #fff; padding: 8px 20px; color: #fff; }画像はとりあえずpublic/imagesに配置しました。
以上で、トップ画像の完成です。
おわりに
ログインさせるためだけのトップページはユーザーファーストじゃない気がしていて(構造的にログイン不可欠なアプリは別ですが)
だからと言って、そのまんま出しすると???なUIになるし、第一印象がノペーっとしてパンチ弱くなるなと思いました。
誰かの参考になればうれしい
✔︎
- 投稿日:2020-11-13T21:29:34+09:00
トップページにおしゃれな背景画像を使うだけでそれっぽいサイトになる説を検証
はじめに
なぜやるか
就活用のポートフォリオを作っていて第一印象がなんだか安っぽいな〜と感じたので少し手を加えてみる
作っているもの
記事投稿アプリ(Qiitaに近い)
before
非ログインユーザーでも閲覧できるようにしたいので、頭にログインページは設けず。
その結果、初めてのユーザーにとってどうしたらいいの?というインターフェースになってしまっている。after
とりあえず背景画像とゲストログインボタンを設置してみた。
うん、非常に改善されたと思う。手順
ここからは画像の加工やCSSに慣れていない初心者向けに書きます。
おしゃれ画像はUnsplash一択
画像に困ったらとにもかくにもUnsplash。
世界中の美しい写真がログイン不要かつ無料でダウンロードできる。加工はKeynote
MacユーザーであればKeynoteで事足ります。
新規スライド
↓
スライドサイズ設定
↓
画像を挿入
↓
画像サイズ調整<--- ここまでで写真のトリミングが完了 --->
縦200px,横600pxでトリミング
画像に透かしを入れる
- 黒い透かし
写真の上に四角形を重ねる
↓
四角形の色を黒にする
↓
不透明度を調節する
- 白い透かし
色を白にしたらこんな感じ
加工が終わったら
ファイル
↓
書き出す
↓
イメージから好きなファイル形式を選んで出力
トップページに配置
viewファイル
index.html.erb<div class='guest-login-box'> <%= link_to 'ゲストログイン', users_guest_sign_in_path, method: :post, class:'guest-login-btn' %> </div>CSS
index.css.guest-login-box { height: 30vw; width: 100vw; display: flex; flex-direction: column; align-items: center; justify-content: center; background-image: url("/images/guest_login_box_background.png"); background-position: center; background-size: cover; } .guest-login-btn { border: 2px solid #fff; padding: 8px 20px; color: #fff; }画像はとりあえずpublic/imagesに配置しました。
以上で、トップ画像の完成です。
おわりに
ログインさせるためだけのトップページはユーザーファーストじゃない気がしていて(構造的にログイン不可欠なアプリは別ですが)
だからと言って、そのまんま出しすると???なUIになるし、第一印象がノペーっとしてパンチ弱くなるなと思いました。
誰かの参考になればうれしい
✔︎
- 投稿日:2020-11-13T21:03:54+09:00
【初心者でもわかる】文章の最初や最後に、文字や記号を入れる方法(New とか おすすめ!とか)
どうも7noteです。疑似要素を使って、文章の最初や最後に一括で文字を入れる方法。
ニュース記事の一覧や、たとえば物件一覧など、見出しの最後に「New」とか「おすすめ!」みたいな文字を入れるデザインの例。
1つ1つに<span>New</span>
みたいにやっていってもいいのですが、修正があったり、自動更新されるページだと毎回手動で処理をするのは大変です。そんな固定の文字や記号を入れる時は疑似要素が便利。
たとえばこのように、ニュース記事の文章の最後に小さく文字や記号を入れることができます。
完成例
最初に入れる方法と、最後に入れる方法の2種類を同時に書いていきます。
ソース
index.html<ul> <li class="new">YouTubeで一時障害 復旧</li> <li class="new">PS5発売 抽選倍率100倍超も</li> <li class="new">Googleフォト 無料保管制限へ</li> <li>独身の日 アリババで7.9兆円</li> <li>身代金要求 サイバー攻撃多発</li> </ul>style.cssul,li { font-size: 18px; /* 文字の大きさを指定 */ list-style: none; /* デフォルトのリストの「・」を無効化 */ } ul li::before { content: '▼'; /* 最初に入れたい任意の文字を入力 */ } ul li.new::after { content: 'New!'; /* 最後に入れたい任意の文字を入力 */ font-size: 11px; /* 文字サイズを11pxに指定 */ font-weight: bold; /* 太文字に指定 */ line-height: 1.3; /* 行間を指定 */ display: inline-block; /* line-heightの背景にも色を入れるため */ color: #fff; /* 文字色を白に指定 */ background: #F00; /* 背景色を赤に指定 */ border-radius: 15px; /* 楕円形にするため角丸 */ padding: 0 5px; /* 上下左右に少し余白 */ margin-left: 10px; /* これを指定すれば上寄せや下寄せが可能 */ vertical-align: baseline; /* これを指定すれば上寄せや下寄せが可能 */ }解説
まず疑似要素について。
疑似要素は名前の通り、疑似的な要素です。扱いはインライン要素のように扱われるため、beforeなら文章(中のコンテンツ)の前、afterなら文章(中のコンテンツ)の最後に入ります。検証ツール[F12]でみた疑似要素
この特性を利用し、特定のクラスがついている要素にだけ記号やアイコンをつけたり、例のように装飾付きの文字を入れることができます。
まとめ
疑似要素は使いこなせるととても便利なので、ついつい多用しがちなのは私だけですかね?
newアイコンを画像に付けたりなど、いろいろな事ができるので初心者の方は疑似要素の基本的な使い方は抑えておきたいところです。※疑似要素はCSSなのでSEO対策の文章としては認識されないので注意!SEOに重要な文字は入れないようにしましょう。
おそまつ!
~ Qiitaで毎日投稿中!! ~
【初心者向け】HTML・CSSのちょいテク詰め合わせ
- 投稿日:2020-11-13T18:49:35+09:00
【Rails】collection_selectでCSSが適用されない時は、classを指定できてるか確認しよう
はじめに
- オリジナルアプリ開発で発見したことについて、定着と備忘のためにまとめていきます。
結論
- CSS書けてるはずなのに変化がないときは、以下を確認してみよう
- class名が間違っていないか
- 記述したことが開発ツール上でも表示されているか
collection_select
のoptionとHTML属性には{}
を付けよう経緯
やりたいこと
collection_select
で作ったセレクトボックスのスタイリングをしたい作成したコード(誤り)
#erbファイル <div class="search-field"> <%= f.label :occupation_id, "職種", class:"search-label" %> <%= f.collection_select(:occupation_id, Occupation.all, :id, :name, selected: @search_params[:occupation_id], include_blank: "選択しない", class:"search-occupation") %> </div>検索フォームの一部で
occupation
モデルから選択出来るようにしています。
collection_select
の具体的な使い方はガイド内をご確認下さい → Railsドキュメントオプションで下記のものを指定しています。
・selected:
→ 遷移後に@search_params
の値が選択されるようにしています
・include_blank:
→ 初期状態(選択していない状態)の値を指定しています次の箇所で問題が発生しました。
3行目のclass:search-occupation
に対して下記のCSS記述しましたが、適用されませんでした。#scssファイル .search-occupation { width: 100%; padding: 8px 8px 5px; outline: none; }開発ツールで確認すると、
class:"search-occupation"
が指定できていないことが分かりました。(画像3行目)HTMLでclassが指定できていないため、CSSが無効になっている訳ということですね。
対応には下記の記事を参考にさせて頂きました。
ActionView::Helpers::FormOptionsHelper
【Rails】完全理解 formでセレクトボックスをつくるselectの使い方
railsでf.selectにclassを設定する今回の対応
collection_select
について調べていく中で、どうやらoption
とHTML属性
には{}
が必要と分かりました。(上述のコードのうち、引数の:name
より後ろの部分)
また、今回のようにoption
が2つある場合は、同じ{}
内に記述する必要があります。
- OK
{ selected: 〇〇, include_blank: 〇〇}
- NG
{ selected: 〇〇}
,{include_blank: 〇〇}
→ArgumentError
でした修正したコード
3行目を修正しています
<div class="search-field"> <%= f.label :occupation_id, "職種", class:"search-label" %> <%= f.collection_select(:occupation_id, Occupation.all, :id, :name, {selected: @search_params[:occupation_id], include_blank: "選択しない"}, {class:"search-occupation"}) %> </div>おわりに
- 引数が多いhelperのため、まずは落ち着いてルールを確認したことでスムーズに解決出来ました。
- また、大元の検索機能はこちらの記事を参考にさせて頂きました。
- 初学者ゆえ、記事内に誤りがあるかもしれません。ご指摘等ありましたら、お手数ですがコメントを頂けると幸いです。
- 投稿日:2020-11-13T18:17:34+09:00
Railsのフラッシュを他のコンテンツを動かさずにフェードアウトさせる
概要
Railsにてエラー等が発生した時、フラッシュを使用し、ページ上部にメッセージを表示させ方法はよく行うことだと思います。
基本的にページを再読み込みするか、別のページへ移動するかしない限り、フラッシュは上部に表示されたままです。
この表示をページを変えなくてもフェードアウトするようプログラムする。方向性
基本的なflashの設定を行いviewに配置する。class属性を指定し、javascriptでタイマー設定をし、新たなclassを追加し、cssを読み込ませます。
ちなみにjQueryにfadeout()というメソッドがあり、そちらを使うこともできる(記述も簡単である)。
しかし、フェードアウトした後、表示されていたflashの範囲分、ページが上部に急激に上がるため、ユーザー側の立場を考えると困ると考えました。(例:クリックしようとした瞬間、または記事を読んでいる時ページが急激に動く等。)
勉強の意味も込めて、違った方法でフェードアウトさせてみました。事前準備
controllerでのflashの設定、javascriptの設定等は行われている前提とします。
1.該当項目にclass属性を設定
~html.erb<body> <% if flash.notice %> <p class="fadeoutTarget"><%= flash.notice %></p> <% end %> </body>flash.noticeを囲うpタグにclass属性で"fadeoutTarget"と設定します。もちろん名前は任意で設定可能です。
2.javascriptの設定
app/assets/javascripts/script.js$(document).on(turbolinks:load, function() { /* fadeoutTargetというclassを持った要素を選択 */ const fadeoutElement = document.querySelector(".fadeoutTarget"); /* 一定時間経過したらfadeoutというclassを追加する */ function flashFadeout() { setTimeout(function() { fadeoutElement.classList.add("fadeout"); }, 5000); } /* fadeoutTargetという要素を持ったdocumentがあれば実行 */ if (fadeoutElement != null) { window.onload = flashFadeout(); }.querySelector()で任意のclass属性を持った要素を選択します。
この場合、pタグ内のflashの要素を取り出すように設定しています。
setTimeout()で一定時間後、関数を実行するというプログラムになります。
数字の箇所は任意で設定できます。
最後のif文はなくても動くのですが、処理上はfadeoutElementがない時(flash:noticeがない時)、"fadeoutElementがないですよ!"というエラーが出てしまうため、このようにif文で囲っております。3.cssの設定
app/assets/stylesheets/application.scssp.fadeoutTarget.fadeout { opacity: 0; transition: 1s; }前項のjavascriptが機能した時、cssが適用されフェードアウトされます。
厳密にはその場で透明になるため、フェードアウト後ページが急激に動いたりすることはありません。まとめ
要素をフェードアウトさせる方法はたくさんありますので、その都度必要な方法で処理していけるようにしていきたいです。
今回の場合、ページの急激なスクロール移動はありませんが、上部にflash分の余白ができてしまうため、少し見栄えが悪いかもしれません。個人的には、納得した形で収まったと考えております。またjavascriptの勉強にもなり良い機会でした。
- 投稿日:2020-11-13T16:58:30+09:00
フッターを下部に固定する方法
はじめに
フッターをウィンドウの下部に固定する方法をまとめました。
ページのコンテンツ量が少ない場合でもフッターが下部に固定されるようにします。方法
まずはHTMLを用意します。
html<body> ~略~ <div class="footer-box"> <span>Copyright © MSY Inc., Ltd. All rights reserved.</span> </div> </body>次にCSSを用意します。
bodyを画面の大きさにしておきたいのでmin-height: 100vhを設定します。
positionでbodyの子要素であるフッターをbottom: 0で最下部に位置するようにします。
このままだとコンテンツがはみ出てしまうので、フッターの高さ分 padding-bottomを与えます。今回はリセットCSSで指定しているのここでは記述していないが、bodyにbox-sizing: border-box; でpaddingを含めた高さになるようにします。cssbody { min-height: 100vh; position: relative; padding-bottom: 46px; } .footer-box { width: 100%; text-align: center; background-color: #e7e7e7; padding: 15px 0; position: absolute; bottom: 0; } .footer-box span { font-size: 12px; }
- 投稿日:2020-11-13T06:54:50+09:00
【UIデザイン】アイコンの位置による印象の違い
プログラミング勉強日記
2020年11月13日
UIデザインを紐解く。これだけは押さえたいボタンデザインのポイントの記事で、アイコンの位置によってユーザーへ与える印象の違いがあると学びました。
※学習の備忘録として記録しています。左にアイコンがある場合
左にアイコンを置いた際は、詳細ページなどへ『入る』イメージを与えます。
そのため、一覧ページから詳細ページなど下の階層に誘導したいときに使用します。
右にアイコンがある場合
左にアイコンを置いた際は、詳細ページなどへ『移動する・外へ出る』イメージを与えます。
そのため、階層の関係ないページへ別ウィンドウで開くページの場合に使用します。
まとめ
アイコンの位置によって、ユーザーへ与える印象が変わると学びました。
これから、LP作成するときなど意識していきたいと思います。
- 投稿日:2020-11-13T01:27:43+09:00
「画像でゴミ分類!」アプリ作成日誌day5~Bootstrapでフロントエンドを整える2~
はじめに
「画像でゴミ分類!」アプリ作成日誌5日目の今日はBootstrapを使ってフロントエンドを整えていきたいと思います。
<記事一覧>
- 「画像でゴミ分類!」アプリ作成日誌day1~データセットの作成~
- 「画像でゴミ分類!」アプリ作成日誌day2~VGG16でFine-tuning~
- 「画像でゴミ分類!」アプリ作成日誌day3~Djangoでwebアプリ化~
- 「画像でゴミ分類!」アプリ作成日誌day4~Bootstrapでフロントエンドを整える~
- 「画像でゴミ分類!」アプリ作成日誌day5~Bootstrapでフロントエンドを整える2~ ←イマココ
- 「画像でゴミ分類!」アプリ作成日誌day6~ディレクトリ構成の修正~
前回までのあらすじ
前回までの記事では画像認識アプリを実装してDjangoに載せたうえで、フロントエンドを整えるところまでやりました。今回の記事では機能を追加していき、それに合わせて
views.py
やtemplateファイルをいじっていこうと思います。追加する機能
追加する機能は以下の通りです。
- サンプル画像による実行
- サイドメニューの実装
- フッターの実装
サンプル画像による実行
まず、indexに画像をリンクとして表示できるようにします。
garbage/templates/garbage/index.html<h4>既存の画像を利用する</h4> <div class="container row"> <div class="col-md-6 p-3"> <a href="{% url "garbage:sample1" %}"> <img src="./media/images/temp1.jpg" alt="画像1" class="sample-img"> </a> </div> <div class="col-md-6 p-3"> <a href="{% url "garbage:sample2" %}"> <img src="./media/images/temp2.jpg" alt="画像2" class="sample-img"> </a> </div> </div>ルーティングとしては
garbage/urls.pypath("sample1", views.sample1, name="sample1"), path("sample2", views.sample2, name="sample2"),このようにそれぞれ別の関数に渡すようにしています。本来はパラメータとして
<a href="{% url "garbage:sample" num:1 %}">
として渡してpath("sample/<int:num>", views.sample, name="sample"),
と処理すべきだとは思いますが、遷移先のページ上の画像のパスを相対パスで指定しているのでリンクがおかしくなってしまう都合上こうしています。なので、画像の静的フォルダをloadする方法があれば改良したいとは思っています。そして、viewファイルは以下のようにします。パラメーターで渡せるようになればresultに結合したいですが、とりあえず動くようにしたかったので不格好ですがここに指定する形をとっています。
garbage/views.pydef sample1(request): img = "./media/images/temp1.jpg" pred = predict(img) params = { "img":img, "pred":pred } return render(request, "garbage/result.html", params)サイドメニューの実装
ここはHTMLとCSSで設定をしていきます。
まず、HTMLの書き方は以下です(リンクはリクエストパラメータを省いています)。garbage/templates/garbage/index.html<div class="container row"> <div class="card col-md-4 py-4 px-0 d-none d-md-block"> <p role="button" class="mb-2 btn border-dark rounded-0 btn-secondary">外部リンク集</p> <a href="https://manage.delight-system.com/threeR/web/bunbetsu" class="btn btn-default border-dark mb-1 rounded-0" role="button" target="_blank" rel="noopener noreferrer">分別検索</a> <a href="https://manage.delight-system.com/threeR/web/benri" class="btn btn-default border-dark mb-1 rounded-0" role="button" target="_blank" rel="noopener noreferrer">ごみの分け方・出し方</a> </div>まず、サイドメニューの中に大きく分けて2種類のものを配置しようとしていて、リンクの分類については灰色背景で押せないようになっているボタン、リンクについては点線で枠線を引いたボタンにしています。
p要素については暗めのボタンにしていて、角を尖らせたり色を設定したりするのをBootstrapで指定しています。リンクについては別のタブで開くような設定を書いてあります。これに対してCSSを以下のように設定します。
garbage/static/garbage/css/style.cssa[role="button"]{ width: 90%; border: dotted 1px; } p[role="button"]{ width: 90%; } p[role="button"]:not(:disabled):not(.disabled) { cursor: default; } p[role="button"]:hover{ background-color: #6c757d ; }width90%や枠線を点線にするのはBootstrapでは設定できないのでCSSで書きます。また、押せないボタンについては、ポインタになったり背景色が変わったりしたら紛らわしいので、Bootstrapで勝手に指定される疑似クラスを上書きするような設定を書いています。(なぜ、こんなことをしてまでBootstrapでボタンにするかというと、リンクのほうでボタンを使うのでそれに合わせて分類についてもボタンにしたほうが見栄えがそろうからです)
フッターの実装
HTMLの書き方は以下です。
garbage/templates/garbage/index.html<footer> <p id="copyright" class="mb-0">Copyright © 2020 eycjur All Rights Reserved.</p> </footer>これに対してCSSを以下のようにかけます
garbage/static/garbage/css/style.css#wrapper{ min-height: 100vh; position: relative; padding-bottom: 40px; } footer{ position: absolute; bottom: 0; width: 100%; }
min-height
を設定することで、footerが浮くことを防止しています。また、padding-bottom
で全部スクロールした際にかぶることを防止しています。また、position
を親要素をrelative
にしてfooterをabsolute
にすることで、固定位置で表示します。以上の3機能を搭載した画面はこんな感じになっています。
さいごに
今回は落穂拾い的な感じであまりまとまったことを書けなかったです。逆に個々の機能についてはそれぞれで詳しい記事を書けるような内容であり、需要もそちらのほうがあるとは思うのですが、開発日誌なので自分の作業ペースに合わせて記事を書きたいこともあり、どうすべきかはだいぶ悩んでいます。
次回はサイドバーのスマホ対応についてやろうと思っています!
<記事一覧>