【HTML＆CSS】画像の背景設定とサイズ変更の仕方
対象者 ①画像の背景設定をしたい方 ②画像のサイズ変更をしたい方 手順目次 1.background-imageプロパティで背景画像指定 2.background-sizeで画像の大きさを変更 3.background-positionで背景画像の位置を調整 実際の手順と実例 1.background-imageプロパティで背景画像指定...
View Articleシンプル星評価機能 ~ Rails
星評価機能 このページでは投稿の星評価機能をシンプルに実装します。 １．integer型のstarカラム追加 ２．for文で番号の数だけ☆を表示 ３．CSSで簡単にデザインを実装 投稿用のテーブルはtweetsテーブルを例に挙げています。 １．integer型のstarカラム追加 cmd $ rails g migration AddStarToTweets star:integer $ rails...
View ArticleCSSが現在に至るまでの歴史
社内勉強会用の資料として作成したものです。 厳密さよりも、感覚的な分かりやすさを重視しています。 年表を作るための補足を細々と調べてみました。 CSSとは 見た目を表現するための言語で、CSSとはCascading Style Sheetsの略です。 主にWebページを装飾するために使われています。 Webページを装飾する唯一の方法といっても過言ではないでしょう。 初めてリリースされたとき👶...
View Article[CSS] flex-direction, justify-content, align-items僕はあなたたちを誤解してました。
はじめに CSSをいじっていたら、flex-direction, justify-content, align-itemsの落とし穴にハマったので、ここに記したいと思います。 flex-directionを「ふれっくすでぃれくしょん」という名詞としか捉えていなかったというのが問題だったかなと。 よろしくお願いします。 flex-directionの落とし穴...
View ArticleCSSだけで作る、液体っぽくポワポワ動く背景
これは何 以下に貼ったような背景を、CSSだけで作るための記事です タイトルの分かりづらさは私の語彙の無さが招いた結果です ちなみにコードはGitHubに上げてあります。 方針 blur()とcontrast()を組み合わせる ほとんどこれに尽きます。 作り方 1. まずは動く丸を作る 以下のHTMLとCSSを書くことで得られるのは 塗りつぶしの丸とボーダーつきの丸がバラバラのタイミングで動く...
View ArticleSprockets::DoubleLinkError エラー
ものすごく初歩的なところでミスしてしまっていたので今後のことも兼ねて メモとして残したいと思います。 エラー内容 Sprockets::DoubleLinkError railsにてerbファイルを作成して、rails sでサーバーを起動してcssを読み込もうと思ったところでこのようなエラーに遭遇しました。 ターミナルにてエラー箇所の内容を確認してみたところ下記のような記述がありました。...
View Articlefont awesomeのアイコンをボタンに入れ込む記述
はじめに このようにヘッダーに投稿ボタンを付けて、クリックすると投稿ページに遷移するようにしました。 少しだけオサレにするためにfont awesomeに取得したアイコンも含めてみました。 font awesomeとは Font Awesomeとはアイコンを文字として扱うことを可能にしたツールです。 自分が使いたい画像などを記述する場合は下記のように記述すると思います。 html.erb...
View Articleロールオーバーで画像を切り替える時はちらつきに注意する
はじめに ある要素にカーソルをあわせたときに、画像を切り換える演出をつけることはよくあるかと思います。 その際、初回ロールオーバー時に一瞬画像が消えてから切り替わるように見えることがあります。 これは、切り替え後の画像がロールオーバー発生時に初めてロードされることが原因です。 結構気になるので、これを解消する方法をまとめます。 backgroundでロールオーバーをさせる時...
View ArticleFont Awesomeの登録方法
はじめに Font Awesomeのアイコンを使いと思ったのですが何かに登録しないといけない。。。 全部英語でどこからやればいいか分からない。。。 こんな状況に私自身なったので誰かの役に立てればと思い、投稿します 利用できるまでのステップ 登録する(メールアドレス) パスワードを決める 指定された記述をタグ内に貼り付ける この3点で利用できるようになります。 登録する こちらがサイトになります。...
View Article【HTML＆CSS】擬似クラス::after ::beforeについてまとめてみた
対象者 ・CSSで擬似クラスを使ってｈｔｍｌを整えようとしている方 手順目次 1.擬似クラスとは 2.：：afterの実例 実際の手順と実例 1.擬似クラスとは 擬似クラスとは、セレクタの後に付け加えて、指定するスタイルを適用する状態を決めるものです。 今回はその中でも::afterに関して触れています。 2.：：afterの実例 後ろの文章のCSSを変える！ 文を記号ではさむ...
View Articlecssで使われる「#」「>」「$」の意味について
CSSの復習も兼ねてタイトルにも記載した通りですが、今日使った「#」「>」「$」についての意味についてメモとして残していこうと思います。 そもそもセレクターとは何かというとcssでスタイルを適用させたい時にどこに適用させたいかを指定してあげる必要があります。 その指定するときにセレクターを使用します 「#」 指定したID属性の要素にスタイルを適用させることができるIDセレクターです。...
View ArticleCSSだけで作るモーフィング
これは何 タイトル通りですが、あくまで「なんちゃってモーフィング」です こんなものが作れます そもそもモーフィングとは？ Wikipediaより引用。 モーフィング（morphing）とは、映画やアニメーションの中で使用されるSFXの1つで、コンピュータグラフィックスの手法の1つでもある。...
View ArticlekaminariのページネーションにCSSを適用する
はじめに 本記事では、BootstrapなどのCSSフレームワークを使用しないで、kaminariのページネーションにスタイルを適用する例をご紹介します。 CSSを適用する 以下SCSS記法で記述しています。 app/aseets/stylesheets/custom.scss /* ページネーション */ .pagination{ margin: 20px auto 0; width: 50%;...
View ArticleKintoneのテーブルを表にしてkMailerで送信する
きっかけ 仕事でタイトルのようなことがやりたいと言われ、krewData等のプラグイン導入を考えましたが、プラグインをやたらめったら使うのが好みではないので、自分でやってみました。ら、ほぼほぼやりたいことはできたのですが、困ったこともあるので、最後に書きます。 kMailerに渡すデータ...
View Article【デザイナー向け】GitpodとSvelte+Windiでブログレイアウトを再現してみよう〜②実践編〜（社内勉強会資料）
Gitpodでサクッとカンタン♪ Svelte＋Windiを試してみよう こちらは社内勉強会資料です。 前回はこちら 👉 Gitpodでサクッとカンタン♪ Svelte＋Windiを試してみよう①基礎編 ゴール ブログレイアウトをWindiで再現してみよう！ こちらのブログレイアウトをサンプルに、Windiで再現していきます。...
View Article[CSS]チェックマーク作ってみた
はじめに 以下のようにFontAwesomeで使えるマークに重なるチェックマークを実装したかったのでやってみました。 やり方 枠線を使って表現していきます。 CSS .check { width: 23px; height: 13px; border-left: 4px solid #25af01; border-bottom: 4px solid #25af01; transform:...
View Article[CSS]文字の下線を引いたり、色を変える方法
はじめに Aタグの下線を消したり、色を変えたりするにはCSSを使用するが、 検索してもできることができないと書いてあったり間違ったことが書いてある記事がいっぱいあったので書くことにしました。 下線を引く方法 文字に下線を引く方法はいろいろあるが、オーソドックスな書き方を今回は紹介します。 下に参考となる記事の参照も載せるので、ここに記載していないものはそこを見てください。 オーソドックスな方法 1....
View ArticleFigmaのAuto LayoutとCSSの対応を考える
これは何 FigmaでAuto Layoutを使ってデザインする時にどんなCSSを想定しているかを整理してみました。 Flameの内側に余白を設定する | padding AutoLayoutはFigmaでレイアウトをいい感じに可変してくれる機能で、ボタンのUIなどによく使われます。 例えばこんな感じでpadding :16px 24pxのボタンがあったとします。 ボタンに「Auto...
View ArticleWordPressの子テーマでCSSとJavaScriptを即反映させる方法
WordPressで、CSSやJavaScriptを変更しても、既にページにアクセスしたことのあるユーザはキャッシュから読み込まれてしまうために、修正内容がすぐに反映されません。CSSやJavaScriptを読み込む際にファイル名の後ろにファイル更新日時をもとにしたバージョンを付加することで、即反映させることができます。 サンプル functions.php // CSS,JS読込 function...
View Article【使わないと損！？】figamオススメプラグイン
はじめに 今回は私が実際に使用しているfigmaのプラグインの紹介をしていこうと思います。 おすすめプラグイン 1. Font Preview 手持ちのフォントをリアルタイムでプレビューできます。フォント選びに困っている人にオススメです。 2. Blush デザインにイラストを手軽に追加できます。お好みのイラストを選び、構図するだけの簡単操作で、イラストのバリエーションの変更、カスタマイズも可能。...
View Article