【CSS】background-image: urlは本番環境では画像が映らない
これローカルでは映っていたけど、いざ本番環境で見てみると何も映っていない...って方絶対いると思うのでその方と備忘録として何故本番環境では映らない？これには海より深く山より高い...わけでもなく色々あってファイル名が変わっているからなんです。何故ファイル名が変わるのかRailsではデフォルトでAsset...
View Article初心者によるプログラミング学習ログ 286日目
100日チャレンジの286日目twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。すでに100日超えましたが、継続。 100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。 286日目は、おはようございます286日目...
View Article[Rails]Bootstrapの導入方法
開発環境・Ruby: 2.5.7・Rails: 5.2.4・Vagrant: 2.2.7・VirtualBox: 6.1・OS: macOS Catalina1.gemを導入Gemfilegem'bootstrap-sass'gem'jquery-rails'ターミナル$bundle 2.「application.css」ファイルをscss形式に変更ターミナル$mv...
View ArticleCSSで縦組み・プロポーショナルメトリクス
これは備忘録です。横組み・プロポーショナルメトリクスfont-feature-settings:"palt";縦組み・プロポーショナルメトリクスwriting-mode:vertical-rl;font-feature-settings:"vpal";参考https://qiita.com/tsuka-rinorino/items/3e3eaaba8cddb6ff08e9https://helpx....
View Articlefloat(css)についてまとめる。
floatについてfloatは浮かせて、左や、右によせる。よって、浮いているので、特に指定のない限り、要素が上に詰めて配置されてしまう。そこで浮かせた後の要素に以下の要素を追加する必要がある。html<div id="under"></div>css#under{ /* float: leftされた要素を解除 */ clear: left; }これだと、...
View ArticleClik here to view.
Chromeでtext-decoration-thicknessが使えるようになるまでの身代わりコードを考えた
解決フローChromeではtext-decoration-thicknessがまだ対応できないborder-bottomとか似たようなことができる他のコードを試すborder-bottomだとテキストの箇所だけではなく、h1要素全てに下線が引かれてしまう3の状態になるのはh1タグがブロックレベル要素だからh1タグをインライン要素にして、border-bottomを使用してみる解決発生した問題h1タグ...
View ArticleClik here to view.
[初心者向け]herokuをデプロイしよう
herokuとは開発したWEBアプリケーションを10分程度で全世界に公開することができ、そのままサービスを本格的に運用することも可能なホスティングサービスの事を指します。実行と流れまず前提としてデプロイしたいアプリが作成済み、GitHubにアカウント登録済み、GitHubにリポジトリを作成済みという前提でお話しして行きます。今回はrailsで作成したアプリをデプロイしていきます。流れとしては以下にな...
View ArticleClik here to view.
【CSS】ブロック要素の周りに隙間があるならリセットCSS
経緯色々作って来たのはいいけど解決してなかったことが解決したので備忘録にサイト作りの最初はどこにどう配置するかデザインはどうするか悩んで決まらなかったら勢いで作るんですけどタイトル通りの事が起こりました分かりやすく背景色を付けてます。何故こんな事が起こるのか微妙に隙間が出来ていてなんで出来るのか考えてすぐ答えが出ました。ブラウザにはそれぞれデフォルトでcssが用意されていて何もしていなければそのcs...
View Article初心者によるプログラミング学習ログ 287日目
100日チャレンジの287日目twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。すでに100日超えましたが、継続。 100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。 287日目は、おはようございます287日目...
View ArticleClik here to view.
CSSで華やかなサイトにしたい②～文字や文章の装飾、Webフォントの使い方～
文字や文章の装飾をしよう今回はCSSで文字や文章の装飾をしていきます文字は情報を伝えるだけでなく、ユーザーに様々な印象を与えるデザイン要素なので、Webサイト上で美しく表示できるようにしていきましょう今回の記事VSCを使ってCSSの簡単プロパティ指定文字の大きさを変える「font-sizeプロパティ」 適切な文字サイズは？見出しとジャンプ率文字の太さを変える「font-weightプロパティ」...
View ArticleClik here to view.
１行追加するだけで画像がトリミング表示される方法
画像の比率が違くて画像が潰れてしまう縦長や横長の画像を表示させようとして画像が潰れてしまったことはありませんか？item.cssimg{width:300px;height:300px;}一番左の画像が比率の関係で横につぶされしまっていますね。1行追加するだけで中央でトリミングされた表示にできるobject-fit:...
View Articlecssサイズ指定 メモ
サイズ指定のpx,%,em,remについてサイズ指定には絶対値と相対値があります。 -絶対値 px -相対値 %、em、rem絶対値とは他の値に左右されない値のことを言います。相対値とは他の値を参考に数値が決まる値のことを言います。%とemについて%とemは親要素を元に値を決めます。 %はHTML<divclass = "container"><divclass =...
View ArticleIE11でバグるCSS対策法
IE11で利かないCSS自分が把握しているもので以下になります。（他もありましたらご報告お願いします）× vmax（vminはいけるのに。。。)× background-blend-mode（background-imageが表示されません。 Edgeは、background-imageは表示されますが、 効いていないです）× object-fit（写真の比率が変になります）△...
View Article文字数に応じて背景色の横幅が可変するCSS設定方法
文字数に応じて可変する背景色の設定方法についてメモします。カード型のレイアウトに「カテゴリ名」などのワッペンをつける際に文字数に応じて可変するには、classに「display:inline-block」を設定することで解決できます。以上です。ご機嫌よう。
View ArticleSassについてまとめ
本格的にポートフォリオ作りを始めたので復習の意味を含めてSassの復習をします。1.入れ子構造同じセレクタを何度も書かなくて良い .main { margin: 20px; padding: 20px; border-radius: 5px; background-color: #f567ae; h1{ color:#f8f8f8; font-size:34px; } p{...
View ArticleCSSではじめ数秒点滅させ、後は通常表示させたいです。
お世話になります。下記コードのように点滅させようとしているのですが、点滅した後にすぐ消えてしまいます。この点滅設定の後に表示させるようにするにはどのように処理をしたら良いでしょうか？<divclass="light_box"></div>//widthとheightは別途つけてあります.light_box{opacity:0;animation:flash0.2s3linea...
View Articlesvgアイコンが動く「useAnimations」の実装方法
実装手順1.公式サイトからダウンロードするuseAnimationsここには、ハンバーガーメニューやSNSアイコンなど、あらゆるアイコンが無料で使用できます。気になるアイコンにマウスオーバーすると、...
View ArticleClik here to view.
【jQuery】ログイン画面をフェードインさせたい
前回のjquery導入が完了し、最初のログイン画面をフェードインさせたかったので簡潔にご紹介。アクセスして少ししてから表示させたいjsファイルに記述sample.js$('head').append('<style>body{display:none;}');$(window).on("load",function(){$('body').delay(450).fadeIn(1200);...
View ArticleDialog を Modal で使うための最小のコード
この記事は dialog を使ってるので Chrome でみてください。最小のコードHTML で Modal Dialog を使う最小のコードはこんな感じ。<dialogid=Dialog>...
View ArticleClik here to view.
Railsのsample_appを少しだけモダンにしてみた
Railsチュートリアルでsample_appを作れるようになったものの、bootstrap感満載の見た目なので、別のCSSフレームワークに変えてみた。CSSフレームワークは以下が候補だったが、使うのが簡単そうで人気も高いらしいBulmaをなんとなく選んでみた。UIkitMaterializeFoundationSemantic UIBulma導入手順Gemfileに以下を追記gem...
View Article