SVG artistaで簡単にSVGアニメーションを作る
イラストレーターでSVG画像を作成する Illustratorで線画と塗りありの２つのSVGデータを作成し、書き出し（アウトライン化する） この時、線画の方はパスのつなぎ目のどこか１つをカットする SVGを合成する 先程書き出したSVGデータ２つをエディタで開き、塗りの方の~までを、 線画の方のの手前に入れて保存 SVGartistaを開く...
View Article横幅を最低●●pxはほしいけど文字数によって幅が広がるボタン
例えば少ない文字数でも最低240pxの幅は確保したいけど、文字数が多くなったときには横幅を変動させるようにしたいといった場合 ボタンのテキストをカスタムフィールドとかで出力するときとかに使えそうなのでメモ。 <a href="" class="btn">詳細はこちら</a> .btn { min-width: 240px; /* 最低240pxを確保 */ height:...
View Articleダークモード実装について設計してみた
経緯・目的 自分の務める会社のウェブサイトにて、OSに寄るダークモード設定の切り替えではなく自社サービスの設定画面もしくは提携先APIレスポンスのフラグによってダークモード設定する案件がありました。 なかなかダークモードのCSS設計について記載のブログ等が少なかったので記録と共有をします。 ※よってこの話にOSのテーマを見るような処理の話はでてきません。 前準備...
View ArticleRailsで画像を選択するとidが送られるフォームを作りたい(ラジオボタンを画像で選択させる)
概要 こんな感じのItemモデルへの投稿フォームの作りました。 画像を押すと選択され、もう一度押すと選択が解除されます。 投稿すると送られるパラメーター Parameters: {"item"=>{"title"=>"青い玉", "ball_id"=>"2"}, "commit"=>"投稿"} 各モデルの構成 Itemモデル タイトルとball_idを登録するテーブルです。...
View Article古いバージョンのSwiper.jsを使ったら詰まったお話 Ver3.4.1
WEBデザイナー＆コーダーのYJ2222です。 JSを使ったスライダープラグインSwiperについてのメモです。 経緯と概要 今回は最新(2022/2/3時点)の事についてではなく、古いVerのものになります。 経緯としてはコード改修案件で古いVerのまま実装しなくてはならなくて検索に困ったので自分用にまとめることにしました。...
View Article「CSSだけ」初心者に贈る、flexbox基本のキ
執筆の経緯 筆者は普段Vue.jsでお仕事をしているフロントエンドエンジニア。 今までCSSの勉強をまともにしたことがなく、BulmaやChakraUIのようなCSSフレームワークに頼りきっていた。 更に参画案件には強強マークアッパーがいるので、特にCSS知識を要求されたこともなかった。 フロントエンドエンジニアを名乗っているのに、CSS全く分からんのはヤバい！ CSSの教材を調べると、「HTML...
View Article【1日10行コーディング】〜Google Map APIと向き合う〜
概要 1日10行コーディングとは まず、1日10行コーディングというのは、1日10行でいいから新しいコード書こうよって感じのやつです(雑) (1日1記事とか1機能とかだと続かない気がしてしまってる...) 実装するもの 最終的に作りたいのは自分でピンを立てた店のアイコンとかを自由に変えられたり、カテゴリごとにアイコン変えたりとかするものが作りたいという気持ち。Google Map my...
View Articleスクロールすると背景が途切れる！！！
スクロールすると背景が途切れる！！！ この記事はCSSに関する知識記事なので、いきなりタイトル回収します。次のコードで説明します。 See the Pen Untitled by tomolatoon (@tomolatoon) on CodePen. ローカルで試したい人は下のコードを見てください。 スクロールすると背景が途切れてしまうHTMLとCSS wrong.html...
View Article便利な開発ツールを探しまくる旅人になることにしました！！
最近めっちゃ思うのがもちろん技術力は大事だけど、ツールを知っていること、使いこなせる ことがめっちゃ大事だと思いました。 tableタグを勝手に作ってくれるツール(https://tabletag.net/ja/) この四角の図みたいなやつをいじれば勝手にHTMLをつくってくれる CSSも勝手につくってくれる
View ArticleReactでAPIから取ってきた背景画像を表示する方法（style attribute, css-modules, tailwindcss,...
はじめに 自分が詰まったので。特にtailwind。 style attributeを使う 一番手っ取り早いのはこれです。 <div style={{ backgroundImage: imageUrl }}> .... </div> 擬似クラス使えない問題 style...
View ArticleCSS 中央寄せ
CSSで要素を中央に持ってきたいとき、 簡単なプロパティでは コード margin:0 auto; もしくは コード text-align:center; があります。この違いとしては 「margin:0 auto;」はブロック要素に適用されるのに対し、 「text-align:center;」はインライン要素、インラインブロック要素に対して適用されます。...
View Article完全未経験初心者によるHTML＆CSS学習レッスン初級編メモ
はじめに SNS黄金期にGREEやアメブロ,wikiサイトで軽くHTMLを使っただけの初心者による覚え書きです。 メモ やりたいこと プロパティ 高さの調整 height 幅の大きさ width 例 h1 { height:80px; width:200px; } 参考にした記事 https://qiita.com/zakuroishikuro/items/f33929eab9d55c5bd073
View Article【jQuery】今いるディレクトリに該当するナビゲーションだけスタイルを変えたい
背景 前回、一部ディレクトリだけWordPressでできてるサイトでヘッダーフッターを一括管理する方法を書きました。 これってヘッダーはどのページからも同じものを呼び出します。 で、こういうデザインのヘッダーメニューってよくあると思うんです。 「会社紹介」のページにいるときは、メニューの「会社紹介」のところだけスタイルを変えたい！！！...
View ArticleCSSだけでスライドスイッチ(ON/OFFするやつ)を作る
はじめに ちょっと凝った見た目のUI部品が欲しいとき、さくっと作れるとライブラリ探す手間が省けてうれしい。 僕はその基準を「CSSだけで作れる見通しが立つか」に置いている。 UI部品は、パフォーマンスの面でも、複雑さの面でも、極力JSをへらすことが望ましい。 jQueryみたいなライブラリに依存してしまうのは最悪だ。他のライブラリの環境下で使えない。...
View Article深呼吸アプリを作ってみたので振り返ります
こちらの動画をもとに勉強させてもらいました とにもかくにもこちらをご覧ください。 そして、出来上がったものがこちらです 文言を日本語にして、エステに来たみたいな セリフにした以外は、ほぼ動画で作成されたもののままです。 まずはHTMLから <!DOCTYPE html> <html lang="ja"> <head> <meta...
View Articleはてなブログでソースコードの行番号をCSSだけで表示する
はてなブログ上のソースコード表示ですが、行番号はつけられません。 そこで、CSSだけを使って行番号を表示させてみます。ただし、横スクロールを表示してソースコードは改行させないやり方です。 Markdown記法で、次のCSSを貼り付けてください。<style>だけだと有効にならないので、<span>で囲うのが良いそうです。 <span><style>...
View ArticleCSSのbackdrop-filterを使ってグレーアウトした背景をくり抜く
はじめに あなたは下画像のようなviewを作ってくれと言われたことはありますか？私はあります。 特定の部分を目立たせるために、その他全体をグレーアウトした背景を実装したかったのですが、なかなか出来ませんでした...
View ArticleNuxt.jsにおけるFLOCSSとAtomicDesignの比較及び相互変換
なんでこんな記事書いたか 社内ではFEとBEの間をウロチョロしていて、 そこまでhtmlコーディングをしない私。 社内のガチFEさんたちがhtmlで静的ファイルを作る場合は FLOCSSが多く、んじゃあ今後Nuxtのコーディングルールもそっちに合わせよか とやり出してはみたものの、まったくしっくりいかず。 やはり思想的には個人的にAtomicDesignのほうがしっくりくるので、...
View ArticleScopedなcss/scss環境における簡略化MindBEMdingなCSS設計の提案
MindBEMdingってScopedだと冗長じゃね！？！？！？！？ ・・・っておもったので考えてみました。 というわけで そもそも、MindBEMdingとは 「Block」「Element」「Modifier」の略で、 コンポーネントをこの構造に分けてみよう、という考え方のこと。 なお、それぞれ Block コンポーネントの大枠のこと Element コンポーネントに付随する子要素のこと...
View Article