20210729のCSSに関する記事は9件です。

【今日の学びメモ】flex と inline-block

flex 親要素に指定。 子要素の上が揃う。 inline-block 子要素に指定。 子要素内の inline 要素の下が揃う。 ちゃんと調べたことがなかったのでメモ。
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

Three.jsを使って動きのあるページを作成しよう!

環境 MAMP導入済み Visual Studio Code 設定済み 今回使用する言語 HTML CSS JS 作業の目次 1:各フォルダの作成 2:HTMLのコード作成 3:JSのコード作成 4:CSSのコード作成 1:各フォルダの作成 1.下記の画像のように、CSS / JS / img フォルダを作成しましょう! 2:HTMLのコード作成 1.threeJS_4.htmlファイルを作成! 2.head部分を作成しよう 3行目 を記入 4行目を記入 ここではCSSフォルダ内のNewstyle.cssを読み込みます。 5行目 を記入 これを読み込むことで、Three.jsが使用できるようになります! 6行目を記入 ここではjsフォルダ内のMoon.jsを読み込みます。 3.body部分を作成しよう 9行目 div class="example"クラスの宣言 10行目 nav class="regular" クラスの宣言 11〜13行目 Ulタグ liタグで作成 14行目 /nav で閉じる 16行目  ここでcanvasのidを宣言 このmyCanvasに対して、3Dアニメーションが効いてきます! 17行目 pタグで表示したい文字記入今回はMoonと記入 以上でHTMLコードの作成完了 3:JSのコード作成 - 1.ページの読み込み確認とサイズの指定 ページの読み込みが完了してから4行目のfunction init() { 以降の処理を実行していきます! 6~7行目でページの大きさを決めます! - 2.レンダラーを作成しよう! ※レンダラーとは仮想的な3D空間における物体を2Dのディスプレイに適切に描画するためのもの。 10行目のWebGLRendererとは:その名のとおり、WebGLを扱うレンダラーのことです。 - 3.シーンとカメラの作成! シーンとは:3D空間のことで、3Dオブジェクトや光源などの置き場のことです。 カメラとは:3D空間上での視点の位置を指します! 4.月と輪を作成しよう! 26行目でmaterial(マテリアル)を作成します。 ここでは物体の色や質感または付与したい画像をロードします! ※月の画像は各自で用意してください。 31行目でgeometry(ジオメトリ)を作成します。 主に、物体の形状を決めるものです。 例:球体・ドーナツ・キューブ 34行目でmesh(メッシュ)を作成します。 これは、materialとgeometryの情報を元に物体を作るものです。 36行目のmesh.position.set(300, 0.5, 0.5);は物体の初期位置を決めるものです。 39行目のscene.add(mesh);でメッシュを3D空間に挿入します! 同じように、輪の形状のものを作成しよう! 5.光源を設置しよう! ※光源(ライト)とは、物体に対しての光の角度や、光の明るさ、を調整して陰影を作り出すものです。 57行目:DirectionalLightクラスを定義 58行目:directionalLightの初期位置を指定 63行目:PointLightクラスの定義 6.星屑の作成! 71行目:createStarField();で宣言 73行目: function createStarField() 97行目: tick();の中に今までの設定が入っていると考えてください! 7.物体に動きを与えよう! 100行目:tick()の配列の中に動きを入れます。 102〜103行目:X・Y方向に向かって回転させる速さむきを調整します。 107〜111行目:三角関数を元に。Sin/Cosを使ってライトの周回向きを調整する 114〜115行目:X・Y方向に向かって回転させる速さむきを調整します。 119行目:レンダリングを行う。 121行目:アニメーションの実行! 4:CSSのコード作成 .example では位置を設定します! .example pではpタグ内の文字の設定をします! navではnav要素全体の大きさや色合いを設定します! nav ulでは行全体の設定をします! nav a ではaタグ内の文字の設定をします! nav li a:hover ではaタグにカーソルを合わせた時のアクションを設定します。 myCanvasでは画面全体のデザイン、背景の設定もおこないます。 ※背景となる銀河などの写真は自由です。 完成 以上でThree.JSによる作品の制作は完了です! 最後に下記のgitからコードをクローンして答え合わせをしましょう! https://github.com/katayama502/TEST_ThreeJS
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

CSS変数でbackground-imageを指定するとChromeとSafariで挙動が異なるのを解決する

Chrome と Safari で挙動が違う CSS変数で background-image を指定したら Chrome と Safari で挙動が違ったので備忘録として残しておきます。 失敗した実装 下記のようにCSS変数を使って指定します。 https://xxx.xxx/test/ という URL で想定しています。 動作サンプル https://sygnas.github.io/cssvar-sample/ /test/index.html <link rel="stylesheet" href="./css/hoge.css"> <div class="imgbox" style="--img:url('../img/foo.jpg')"></div> /test/css/hoge.css .imgbox{ background-image: var(--img); } 結果 Chrome は表示されるが、Safari は表示されない。 問題点 相対パスで画像を指定した時、下記のような違いがあるようです。 Chrome : OK : CSSファイルを起点とした相対パスとして処理 https://xxx.xxx/test/css/hoge.css を起点とした ../img/foo.jpg → https://xxx.xxx/test/img/foo.jpg Safari : NG : 表示URLを起点として処理 https://xxx.xxx/test/ を起点とした ../img/foo.jpg → https://xxx.xxx/img/foo.jpg 解決策① 絶対パス 絶対パスで指定する。 一番簡単な解決方法です。 /test/index.html <div class="imgbox" style="--img:url('/test/img/foo.jpg')"></div> しかし相対パスしか使えないパターンもあるので今回は別の方法を模索します。 解決策② HTML 側に CSS を記述 HTML 側に記述すれば Chrome、Safari どちらも問題ありません。 Vue や React ではコンポーネント内に CSS を書くことが多いのでこちらの方法もアリですね。 変則的ですが background-image の部分だけ HTML 側に書くという方法もあります。 /test/index.html <link rel="stylesheet" href="./css/hoge.css"> <style> .imgbox{ background-image: var(--img); } </style> <div class="imgbox" style="--img:url('./img/foo.jpg')"></div> /test/css/hoge.css .imgbox{ /* background-position とか他の部分はここに書く */ background-size: contain; background-position: center center; /* background-image: var(--img); */ } おわり CSS の挙動については Safari が IE のような立ち位置になりつつあり困りますね……。
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

CSSだけで画像をトリミングする方法

画像を一覧で表示する際、画像によってサイズが異なる場合に統一して見やすくする方法。 画像を中央の位置でトリミング .image { object-fit: cover; } を追加することで中央できれいにトリミング可能。 画像を任意の位置でトリミングする 中央以外の位置でトリミングしたい時は object-position プロパティーを設定。 左上を基準にして、object-position: 横の位置と縦の位置を記述する トリミングせずに余白を表示する object-fit: cover; を指定していたところを object-fit: contain; に変更するのみ。
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

【React】The above error occurred in the <img> componentの対処法【styled-components】

症状 Reactでstyled-componentsを使用して、画面レイアウトの修正をしていたところ、下記のエラーが発生し画面が白飛びしてしましました。 翻訳すると、「上記のエラーはコンポーネントで発生しました」となりました。 imgコンポーネントで不具合が起きているようです。 error index.js:1 The above error occurred in the <img> component: at img at O (http://localhost:3001/static/js/vendors~main.chunk.js:71248:6) at div at O (http://localhost:3001/static/js/vendors~main.chunk.js:71248:6) at div at O (http://localhost:3001/static/js/vendors~main.chunk.js:71248:6) at div at O (http://localhost:3001/static/js/vendors~main.chunk.js:71248:6) at Home (http://localhost:3001/static/js/main.chunk.js:8060:86) Home.jsx import React from "react"; import styled from "styled-components"; import userImage from "./images/user-image.jpg"; const userImageWrapper = styled.img` `; const userImage = styled.div` `; export const Home = ()=> { return ( <userImageWrapper> <userImage src={userImage} alt={userImage}></userImage> </userImageWrapper> ) } 解決方法 userImageコンポーネントにimg、その親のコンポーネントにdivのスタイルに変更することで解決しました。 imgを表示させるコンポーネントではなく、その親のWrapperコンポーネントに対して、imgタグが適用されていたため、エラーが起こっていたようです。 Home.jsx import React from "react"; import styled from "styled-components"; import userImage from "./images/user-image.jpg"; const userImageWrapper = styled.div` `; const userImage = styled.img` `; export const Home = ()=> { return ( <userImageWrapper> <userImage src={userImage} alt={userImage}></userImage> </userImageWrapper> ) }
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

Bootstrapでの文字、背景色の変更方法

Bootstrap公式サイトの Documentation→Utilities→Colorsで使用できる文字色と背景色を確認することができる。 Color 「text-primary」や「text-secondary」などのクラスを指定してすることで対応した文字色に設定することができる。 <p class="text-primary">.text-primary</p> <p class="text-secondary">.text-secondary</p> <p class="text-success">.text-success</p> <p class="text-danger">.text-danger</p> <p class="text-warning">.text-warning</p> <p class="text-info">.text-info</p> <p class="text-light bg-dark">.text-light</p> <p class="text-dark">.text-dark</p> <p class="text-body">.text-body</p> <p class="text-muted">.text-muted</p> <p class="text-white bg-dark">.text-white</p> <p class="text-black-50">.text-black-50</p> <p class="text-white-50 bg-dark">.text-white-50</p> Background color <div class="p-3 mb-2 bg-primary text-white">.bg-primary</div> <div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div> <div class="p-3 mb-2 bg-success text-white">.bg-success</div> <div class="p-3 mb-2 bg-danger text-white">.bg-danger</div> <div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div> <div class="p-3 mb-2 bg-info text-dark">.bg-info</div> <div class="p-3 mb-2 bg-light text-dark">.bg-light</div> <div class="p-3 mb-2 bg-dark text-white">.bg-dark</div> <div class="p-3 mb-2 bg-white text-dark">.bg-white</div> <div class="p-3 mb-2 bg-transparent text-dark">.bg-transparent</div>
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

全角チルダ?波ダッシュ?に殺された記録

事件はAndroidの文字入力で起きました. PCとスマホで入力文字の挙動が違う 依頼を受けてブラウザ上で縦書き画像を簡単に作れるサービスを開発していました. textareaから文字の入力を受けて,それをcanvas上にjavascriptで縦書き文字として描画するっていうシンプルなロジックのものでした. Reactをベースにして,特にこれと言ったライブラリは一切使っていませんでした. 事件はそのとき起きました 依頼者の方から, 「~が横のままになってるのでそこだけ修正お願いします~!」 と連絡がきました. これはまずいと思い,急いでPCから修正を行おうと思いましたが・・・ まったく縦のままでした・・・. いやいや依頼者の方,なんの文字を入力したんだと思いその環境を聞くと 「スマホのChromeです~!」 とのこと.ふむふむなるほどと思い私もスマホのchromeで確認すると あああああああああああああああああああああああああああああああああああああああああ(断末魔) はい,PCとスマホで挙動が違うじゃありませんか. 検証 原因はなんとなく推測がつきます. 文字コード これしかないやろと. ということでtextareaで受け取った文字を比較しました. encodeURIComponent(input) 結果 PC スマホ やった!原因合ってた!!!!!!!! あああああああああああああああああああああああああああああああああああああああ(断末魔) 修正 文字をそのまま比較していたところを文字情報で比較することにしました // 修正前 if(ch === "~"){ // } //修正後 if(["%EF%BD%9E","%E3%80%9C"].includes(encodeURIComponent(ch)){ // } 結果 スマホ GG
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

Railsで架空のCafeのHPを作ってみよう!【13日目】『f.text_areaの値を改行、空白含めそのまま反映』編

概要 基本Railsの記法に則り書いていきます! 1から全ての説明ではなく その中であれ?どうやるの?と 疑問に思った点や実装に困った箇所を ピックアップして紹介していきます♩ 設定と準備 ・Rails ・HTML ・CSS ・Javascript(jQuery) ↑上記の言語とフレームワークを使い 架空(自分で考えたテキトーなもの)のCafeの HPを作っていこうと思います! 13日目の作業内容 ・ビューの作成(一覧ページ) 13日目の気になった箇所 f.text_areaで入力された値をそのまま反映したいが どのようにすれば良いだろうか。 仮説 調べたらrailsのヘルパーメソッドである simple_formatや safe_joinなどを使うと 表示できるらしい。 testsテーブルのsampleというカラムに保存させて反映させていくとします。 tests/new.html.erb <%= f.text_area :sample %> まずは入力フォームを作成。 入力例) sample sample sample 上記のように文字の前に空白や改行を適当に入力したとします。 tests_controller.erb def show @test = Test.find(params[:id]) end コントローラでインスタンス変数に格納し使えるようにします。 tests/show.html.erb <%= @test.sample %> これで反映はされれるが sample sample sample このように表示されてしまいうまく表示できない。 ではここにヘルパーメソッドを使い検証していきます。 tests/show.html.erb <%= simple_fomat(@test.sample) %> tests/show.html.erb <%= safe_join(@test.sample) %> どちらもエラーが出てしまいうまくいかなかった。 結論 上記で検証したsimple_fomatやsafe_joinでも うまく反映させることが可能だと思いますが 今回は私がうまくいった方法を紹介します。 上記と同じものを使うと仮定するので入力フォームなどは割愛させていただきます。 では、同じようにように表示させていきます。 tests/show.html.erb <p><%= @test.sample %></p> 表示させたい値をpタグで囲っていきます。 今回はpタグで囲いましたがクラス名を付与でも可能です。↓ tests/show.html.erb 例) <%= @test.sample, class:"text" %> 次にこのpタグ(もしくは付与したクラス名)に CSSを当てていきたいと思います。 show.css p { white-space: pre-wrap; } /* クラス名の場合 */ .text { white-space: pre-wrap; } たったこれだけで空白、改行全て反映してくれます! このwhite_spaceというプロパティは要素内の空白をどのように 扱うかを指定するものです。 今回はpre-wrapを指定しましたが、他にも 要素を詰めて空白を作らない 改行はするが最初の空白は作らない など 用途に合わせて使えると思いますので、気になったら調べてみてください!
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

【Rails】Bootstrapを導入する方法

My Profile プログラミング学習歴②ヶ月目のアカウントです! プログラミングスクールで学んだ内容や自分が躓いた箇所等のアウトプットの為に発信しています。 また、プログラミング初学者の方にわかりやすく、簡潔にまとめて情報共有できればと考えています。 もし、投稿した記事の中に誤り等ございましたら、コメント欄でご教授いただけると幸いです。  対象者 Bootstrapを導入してレイアウトを整えたい方 目的 bootstrapを導入して、使える状態にする 実際の手順と実例 1.Bootstrapとは 「Bootstrap:ブートストラップ」は、Twitter社が開発したCSSの「フレームワーク」 RailsにはCSSのデザインテンプレートが準備されていないので、ページデザインも各自で設計しなければなりません。 Bootstrapを利用することで、整ったデザインを効率的に作れるようになります。 2.Bootstrap導入方法 Gemfileを編集 gemを入れていきます。 下記の「jquery-rails」はBootstrapがjQueryというライブラリに依存しているため、導入します。 最終行に追記 Gemfile : : gem 'bootstrap', '~> 4.5' gem 'jquery-rails' 2.bootstrapファイルを読み込む 直接編集、もしくは下記のコマンドでファイル名を変更します。 $ mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss 3.bootstrapをSCSSに読み込ませる こちらも最終行に追記 app/assets/stylesheets/application.scss : : @import "bootstrap"; 4.application.jsファイルを編集する app/assets/javascripts/application.js //= require jquery3 //= require popper //= require bootstrap-sprockets これで準備完了です。 3.実際にBootstrapを使ってみる 良く下記のサイトを参考にBootstrapを使っています。 Bootstrap4なので少し古いですが 使えるものばかりなのでぜひ参考にしてみてください
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む