はじめに 絶賛HTMLとCSSを復習中！ 今回は Saasという言語を学び始めたのでアウトプットします Saasとは 公式サイト Saasとは「Syntactically Awesome StyleSheet」の略で Syntactically（文法的に） Awesome（最高・素晴らしい） StyleSheet（スタイルシート） という言語です。 公式抜粋 Sass is the most mature, stable, and powerful professional grade CSS extension language in the world. 略 Sassは、世界で最も成熟した、安定した、強力なプロフェッショナルグレードのCSS拡張言語です。 めちゃくちゃ凄そう！ 自分なりに簡単にまとめてみると・・・ CSSをより便利に記述できるようにしたもので、cssでいっぱい記述するよりも完結に記述ができ、関数を設定してコードを再利用したりできます。 しかし、ブラウザ上ではSaasは読み込む事は出来ません。 そのため必ずSaasからCSSに変換してブラウザー上に反映させます。 変数 CSSの場合、 style.css #container { color: white; } .btn { color: white; } CSSでは変数は定義出来ないがSaasの中では定義する事ができます。 共通の数値や色の指定などに便利だと思います。 style.scss //色を定義 $cWhite: white; #container { color: $cWhite; } .btn { background-color: $cWhite; } ネスト 入れ子という言葉はrailsでよく使いました。 CSSでは1つのブロックの中に他のブロックを含める事は出来ませんが、Saasの中では異なるブロックを含める事ができます。 本来のCSSの記述 style.css nav ul { margin: 0; padding: 0; list-style: none; } nav li { display: inline-block; } nav a { display: block; padding: 6px 12px; text-decoration: none; } Saasの場合 style.scss nav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block; } a { display: block; padding: 6px 12px; text-decoration: none; } } 上記のように、Sassではネストで書くことができ、コードの可読性が向上します。 終わり もっともっと良いメリットがあると思いますが、これから学習していきます！

私がプログラミングの勉強をしたいと思うようになった理由の１つに、 世の中にあるものを、私も自分の手で作れるようになりたいと思ったからです。 とりあえず簡単な基礎学習を終えた段階で、 かねてより作ってみたいと思っていたものを作成してみました。 サイズや文字の大きさが全く違うけれど、今は良しとしておきます… また理解が増えたときに修正をできたらと思います。 参考画像 私の作成したもの

私がプログラミングの勉強をしたいと思うようになった理由の１つに、 世の中にあるものを、私も自分の手で作れるようになりたいと思ったからです。 とりあえず簡単な基礎学習を終えた段階で、 かねてより作ってみたいと思っていたものを作成してみました。 サイズや文字の大きさが全く違うけれど、今は良しとしておきます… また理解が増えたときに修正をできたらと思います。 参考画像 私の作成したもの

※この記事は、スライドモードでご覧ください 1990年代後半 CSSはまだ普及していなかった どのようにHTMLを装飾していたか index.html <h2 align="center"> <font color="#ff0000" size="7">やめ太郎について</font> </h2> htmlファイルの中に直書きしていた ページ数が多いと大変・・・ 同じコードを何度も書かなければならない 修正が発生したときも大変 例えば・・・ 依頼主「おぼろげながら浮かんできたでぇ・・・」 依頼主「緑という色がな！」 依頼主「見出しの色は、緑や！」 ワイ「ファッ！？」 ワイ「全50ページの見出し、ぜんぶ変更でっか！？」 ワイ「今日も残業や・・・」 そんなこともあったかもしれません 時は流れ・・・ 2000年代 CSSが普及してきた style.css .heading2 { font-size: 48px; color: #ff0000; text-align: center; margin-bottom: 60px; } 例えば、クラス名に対してCSSを書く index.html <h2 class="heading2">やめ太郎について</h2> HTMLタグに、そのクラス名を書く タグにクラス名をつけるだけで装飾できるようになった スタイルの塊に名前をつけて、使いまわせるようになった 修正する手間も減った 例えば・・・ 依頼主「また見出しの色を変更や！」 ワイ「はいはい、おぼろげながら浮かんできたんですね」 style.css .heading2 { font-size: 48px; - color: #ff0000; + color: #0000ff; text-align: center; margin-bottom: 60px; } ワイ「これで修正完了や！」 1ファイル修正すれば、全ページに反映される でも、逆に修正しづらいことも・・・ 修正の影響範囲が大き過ぎる 1ファイル修正しただけで、多数のページに影響が出る ワイ「クラス名が被ってたりして、直したい部分以外が変わってしまうことはないやろか・・・」 気軽に修正できない どうすればいいか クラス名が重複しないための工夫が必要 そこでBEM 例えば・・・ index.html <ul class="userList"> <li class="item"> <span class="text">太郎</span> </li> <li class="item"> <span class="text">次郎</span> </li> </ul> itemとかtextって、他と被りそう・・・ itemのスタイルを修正したら、ほかの部分にも影響が出るかも・・・ クラス名をもっと工夫せな・・・ せや、BEMや！ index.html <ul class="userList"> <li class="item"> <span class="text">太郎</span> </li> <li class="item"> <span class="text">次郎</span> </li> </ul> これを・・・ index.html <ul class="userList"> <li class="userList__item"> <span class="userList__text">太郎</span> </li> <li class="userList__item"> <span class="userList__text">次郎</span> </li> </ul> こう！ 親のクラス名を頭につければ、他と重複しない クラス名が長くなりがち＆なんだか愚直 でも割と便利 ここで一回まとめ CSSのおかげで 同じスタイルを何度も直書きしなくてよくなった 一箇所修正すれば全ページに反映されるようになった ワイ「命名には注意が必要やけど、だいぶ便利になったで！」 しかし・・・ 依頼主「おぼろげながら浮かんできたでぇ・・・」 依頼主「見出しのデザイン、もっと凝った感じにしたいんや！」 依頼主「せやから・・・」 依頼主「h2タグの中に、spanタグを入れてくれや！」 ワイ「ファッ！？」 index.html <h2 class="heading2">やめ太郎について</h2> これを・・・ index.html <h2 class="heading2"> <span>やめ太郎について</span> </h2> こう！ ワイ「これは・・・CSSだけじゃどうにもならへん・・・」 ワイ「50ページ、全部修正するか・・・」 50ページ修正している間に・・・ 時は流れ・・・ 現代 コンポーネントの時代 ワイ「50ページ修正している間に2021年になってもうたわ・・・」 ワイ「現代には、Reactいう便利なライブラリがあるらしいで」 ワイ「HTMLの塊を、部品みたいにして使い回せるみたいや」 ワイ「コンポーネントいうやつやな」 ワイ「ちょっと使ってみよか」 /components/Heading2.tsx export const Heading2: React.FC = ({ children }) => { return ( <h2>{children}</h2> ) } ワイ「早速、このコンポーネントを・・・」 /components/Heading2.tsx export const Heading2: React.FC = ({ children }) => { return ( <h2> <span>{children}</span> </h2> ) } ワイ「こうや！」 ワイ「1ファイル修正しただけで、全ページに反映できたで！」 ワイ「素敵やん？」 ワイ「ところで、CSSはどうやって書くんや？」 ※Emotionというライブラリを使用している想定です components/Heading2.tsx const heading2 = css` font-size: 48px; color: #ff0000; text-align: center; margin-bottom: 60px; ` const span = css` font-weight: normal; ` export const Heading2: React.FC = ({ children }) => { return ( <h2 css={heading2}> <span css={span}> {children} </span> </h2> ) } ワイ「なるほどな」 components/Heading2.tsx const heading2 = css` font-size: 48px; color: #ff0000; text-align: center; margin-bottom: 60px; ` const span = css` font-weight: normal; ` ワイ「cssという関数に、CSSのコードを渡してやって」 ワイ「それをheading2とspanという変数に格納」 components/Heading2.tsx export const Heading2: React.FC = ({ children }) => { return ( <h2 css={heading2}> <span css={span}> {children} </span> </h2> ) } ワイ「それをHTML（JSX）のタグに、属性みたいに渡してやるんやな」 style.css .heading2 { font-size: 48px; color: #ff0000; text-align: center; margin-bottom: 60px; } ワイ「普通のCSSではこう書いていたところを・・・」 components/Heading2.tsx const heading2 = css` font-size: 48px; color: #ff0000; text-align: center; margin-bottom: 60px; ` ワイ「Emotionではこう、JSの中に書くんやな」 ワイ「CSS-in-JSいうやつやな」 ワイ「あれ・・・でもなんか、書き方が変わっただけで」 ワイ「あんま進化してない気もするけど」 ワイ「何が良くなったんやろな」 メリット 名前が被らない spanなんていう短い名前をつけたとしても 自動的に、一意なクラス名を生成してくれる 例：css-1duww6s-span ほかのファイルでspanという同名のスタイルを作っていても大丈夫 <h2 class="css-1ax0e8a-heading2"> <span class="css-1duww6s-span"> やめ太郎について </span> </h2> 描画されるHTMLはこんな感じ .css-1ax0e8a-heading2 { font-size: 48px; color: #ff0000; text-align: center; margin-bottom: 60px; } .css-1duww6s-span { font-weight: normal; } CSSはこんな感じで生成される これによって スタイルの名前づけが楽になる 重複を避けるために、長いクラス名をつける必要もない むしろもう、名前は要らないかもしれない components/Heading2.tsx export const Heading2: React.FC = ({ children }) => { return ( <h2 css={css` font-size: 48px; color: #ff0000; text-align: center; margin-bottom: 60px; `} > <span css={css` font-weight: normal; `} > {children} </span> </h2> ) } HTML（JSX）の中に直で書くこともできる ワイ「でも、HTML（JSX）の中に直書きでスタイリングするのは、なんか抵抗が・・・」 やめ太郎のトラウマ 直書きすると、デメリットがあった気がする HTMLの中に直で書くと、同じコードを何度も書かなければならない 何箇所も修正しなければならない いえ →コンポーネント化されているので大丈夫 →何回も書かなくていい →1箇所だけ修正すればいい ワイ「あ、そうか・・・」 むしろメリットがある 　例えば components/Heading2.tsx export const Heading2: React.FC = ({ children }) => { return ( <h2 css={heading2}> <span css={span}> {children} </span> </h2> ) } ワイ「この、h2タグにあたってるheading2ってスタイルは」 ワイ「コードの中のどこにあるんかな〜？」 ワイ「あった、あった、修正しよか」 って探す必要がなくなる HTMLとCSSを行き来する必要がなくなる なぜなら HTMLの中に、CSSも書いてあるから components/Heading2.tsx export const Heading2: React.FC = ({ children }) => { return ( <h2 css={css` font-size: 48px; color: #ff0000; text-align: center; margin-bottom: 60px; `} > <span css={css` font-weight: normal; `} > {children} </span> </h2> ) } ただ、大きめのコンポーネントだと見た目ゴチャッとするかも ちなみに・・・ Tailwind CSS components/TailwindHeading2.tsx export const TailwindHeading2: React.FC = ({ children }) => { return ( <h2 class="text-xl text-center mb-12"> <span class="font-normal"> {children} </span> </h2> ) } Tailwind CSSも、単機能なクラスをたくさん使って HTMLの中でスタイリングする感じで、考え方が似てますよね！ まとめ HTMLの中にCSSを直書きすることで・・・ スタイルに名前をつけなくて済む HTMLとCSSのコードを行き来しなくて済む コンポーネント化されていれば、何度も書く必要もない でっかいコンポーネントだとアレかもしれませんが・・・ 小さめのコンポーネントをたくさん書くこと、結構あります そんなときは「名もなきスタイル」割と良いと思います ご清聴ありがとうございました！

久しぶりにフロントエンド周りです。 ボタンを押すとアコーディオンが開く、というよくある実装をCSSアニメーションを用いて実装します。 これが結末 .foo max-height: 0 padding: 0 20px transition: max-height 0.3s, padding 0.3s overflow: hidden &.is-open max-height: 100vh padding: 20px つまずきやいポイント1: heightとtransition 最初に思いつきそうなのが、heightの高さを可変にして、transitionを使おう、というものだと思います。 .foo height: 0 transition: height 0.2s &.is-open height: auto 全くうまくいっていないのがわかるかと思います。 これは、transitionがheightをサポートしていないからです。 ではどうすれば良いかと言いますと、いくつかの方法がありますが今回はmax-heightを使用する方向で実装します。 max-heightであればtransitionが効きます。 .foo max-height: 0 transition: max-height 0.2s overflow: hidden; &.is-open max-height:100vh // ここは適宜変更ください つまづきやすいポイント2: display: none display:none から display: blockへの変化などは、途中推移がないため当然transitionが効きません。 上記のようにmax-heightで指定してもうまくいかないので気をつけましょう。 max-hegihtとoverflowでコントロールしていれば、概ねdispalyでコントロールする必要はないパターンが多いかと思います。 どうしても非表示を行いたいケースではopacityを使います。 この場合、伸び縮みだけではなく「ふわっとでる」ようになることに注意してください。 // ダメな例 .foo display: none max-height: 0 transition: max-height 0.2s &.is-open display: block max-height: 100vh // これならいける .foo display: none transition: max-height 0.2s max-height: 0 opacity: 0 &.is-open display: block max-height: 100vh opacity: 1 つまづきやすいポイント2: padding max-heightを調整したのに、開いていない状態でも高さが残ってしまう...なんて場合は、paddingを考慮し忘れているかもしれません。 .foo max-height: 0 padding: 20px transition: max-height 0.2s overflow: hidden &.is-open max-height:100vh ↓閉じた状態にもかかわらずpaddingが残っているとこうなる ではpaddingを全部消せば良いのかというと、左右paddingをショートハンドなどで巻き込んでしまっていると、 徐々に左右のpaddingが出てしまうという変な動きになってしまいます。 // 左右のpadding変な動き .foo max-height: 0 padding: 0 transition: max-height 0.2s, padding 0.2s // ここにpadding-left・padding-rightも入っている overflow: hidden &.is-open max-height:100vh padding: 20px 解決方法としては、 transitionでの指定を律儀にpadding-top: ..padding-bottom: ..とする 開いていない状態の上下paddingだけを削る の二つがありますが、今回は後者で行きます。 .foo max-height: 0 padding: 0 20px transition: max-height 0.3s, padding 0.3s overflow: hidden &.is-open max-height: 100vh padding: 20px これで実現したい動きを実装できました?

大人気のテキストエディタで既にたくさんの記事も出ておりますが、 こちらでは、コーディングに特化した機能を紹介していきたいと思います。 ※macOS版にて紹介していきます。 基本設定 まずは基本的な設定からです。 言語を選択 エディタを好きな言語に変更できます。 ※日本語設定で紹介していきます。 設定 View > Command Palette > Configure Display Language > 言語を選択 > エディタを再起動 テーマを選択 自分の好きなテーマに変更できます。 設定 Code > 基本設定 > 配色テーマ setting.json 設定した項目はsetting.jsonに保存されます。 設定 Code > 基本設定 > 設定 > アイコンクリック おすすめの拡張機能 Project Manager（プロジェクトマネージャー） プロジェクト管理ができる拡張機能です。 使用したいプロジェクトを登録し、素早く開くことが可能になります。 これで毎回Finderから探す手間もなくなります、単一で開いてくれるのでパフォーマンスも良いです。 操作 登録したいプロジェクト開き保存します、開いたディレクトリをルートとして登録できます。 Live Server（ライブサーバー） エディタをブラウザに自動反映できる拡張機能です。 保存した際に自動でブラウザが更新されます。 次に紹介するLive Sass Compilerと合わせて使用もとてもおすすめです。 ※PHPファイルは対応していないようです。 操作 エディタ下部にあるGo Liveをクリックするだけで自動でブラウザが立ち上がります。 Live Sass Compiler（ライブサースコンパイラー） Sassのコンパイルができる拡張機能です。 ワンボタンで素早くコンパイルができ、ファイル保存時の自動コンパイルやにも対応しています。 他にもオプション設定を加えることで、追加機能や細かい調整が可能です。 設定 オプション設定はsetting.jsonに追記していきます。 Formats "liveSassCompile.settings.formats": [ 　{ 　　"format": "compact", 　　"extensionName": ".css", 　　"savePath": "./css" } ], format コンパイル後のスタイルの形状を指定します。 nested expanded compact compressed extensionName 拡張子を指定します。 savePath 出力先を指定します。 ※ディレクトリが存在しない場合も自動生成してくれます。 Exclude List 除外したいファイルを指定できます。 "liveSassCompile.settings.excludeList": [ "**/node_modules/**", ".vscode/**", ".history/**" ], Autoprefix ベンダープレフィックスを出力できます。 ファイル保存時の自動出力にも対応しています。 また、どのくらい古いバージョンのブラウザに対応するかおおよその設定ができます。 ベンダープレフィックスの出力をオフにしたい場合は[]のみに設定します。 "liveSassCompile.settings.autoprefix": [ 　　"last 2 versions", 　"ie >= 11", 　"Android >= 4", 　"ios_saf >= 8" ], 操作 エディタ下部のWatch Sassをクリックするとコンパイルできます。 おすすめのエディタ機能 ここからはコーディングやプログラミングの入力が捗るエディタ機能を紹介していきます。 User Snippets（ユーザースニペット） 登録したコードを瞬時に呼び出せる機能です。 呼び出した後に指定した箇所へカーソルが移動するように設定できます、複数順番まで細かく指定可能です。 設定 Code > 基本設定 > ユーザースニペット 作成したい言語を選択すると自動でjsonファイルが生成されるので書き込んでいきます。 試しにHTMLのpictureタグを設定していきます。 "picture": { 　"prefix": "pic", 　"body": [ 　　"<picture>", 　　"\t<source media=\"(min-width:768px)\" srcset=\"./img/$1.png\">", 　　"\t<img src=\"./img/sp/$1.png\" alt=\"$2\">", 　　"</picture>" 　] } ・prefix 呼び出し時のネームを入れます。 ・body 呼び出したいコードを書いていきます。 記述ルールはサンプルを参照して下さい。 $ + 数字でカーソルが移動される順番を指定できます、同じ数値にすると同時入力ができます。 操作 prefixに入力したネームを入力した後に、Enterキーで呼び出します。 Tabキーを押していくと、$ + 数字　で設定した順にカーソルを移動できます。 Emmet（エメット） VSCodeではデフォルトで使用できます。 上記で紹介した、ユーザースニペットと組み合わせて使用すれば、さらに効果を発揮できます。 キーマップ おなじみの人気エディタのショートカットキーが使えるようになります。 設定 Code > 基本設定 > キーマップ 設定をプロジェクトごとに分けたい場合 　ワークスペース プロジェクトごとに設定を変更したいケースが出てくるかと思います、そんな時はワークスペースを使用して個別に設定を管理できます。 ※ワークスペースで保存すると、プロジェクトのルート直下にsetting.json隠しファイルが生成されます。 設定 Code > 基本設定 > 設定 > ワークスペース > アイコンクリック 以上がおすすめの設定でした、最後までご覧戴きありがとうございました。

どうも7noteです。某人気ゲーム「ゼルダ○伝説」に出てくるルピーをCSSだけで作る 私事ですが、普段からゲームは結構好きで、京都に本社のある花札を作っていたことで有名な大手ゲーム会社のゲームも昔からよく遊んでました。 その中でよく遊んでいたゲームの中に「ゼルダ○伝説」という種類のゲームがあるのですが、 そのゲーム無いで出てくるルピーという通貨のお金をCSSで再現してみました。 （※ゲームタイトルは一応伏せ字しておきます。） ちなみにインドルピーではないので、インドルピーだと思った方はブラウザバックボタンを押して前のページにお戻りください。 ゲーム内で出てくるルピーは宝石みたいできれいなので、応用すれば他のことにも使えるかも？ ソース index.html <div class="rupee"> <div class="base"></div> <div class="center"></div> </div> style.css .rupee { width: 100px; /* 全体の基準になります。 */ height: 200px; /* 横幅の2倍 */ position: relative; } .base { width: 100%; height: 50%; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: linear-gradient(to right, #287e27 50%, #1f511e 50%); margin: auto; } .base::before, .base::after { content: ""; width: 0; right: 0; transform: rotate(45deg); position: absolute; left: 0; right: 0; margin: auto; } .base::before { border-top: 35px solid #23361a; /* 横幅の35%の値 */ border-right: 35px solid #23361a; border-bottom: 35px solid #9cf859; border-left: 35px solid #9cf859; top: -35px; } .base::after { border-top: 35px solid #2d9d2f; /* 横幅の35%の値 */ border-right: 35px solid #2d9d2f; border-bottom: 35px solid #1e3a14; border-left: 35px solid #1e3a14; bottom: -35px; } .center { width: 60%; height: 30%; background: #26a824; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; } .center::before, .center::after { content: ''; width: 0; height: 0; position: absolute; left: 0; right: 0; margin: auto; } .center::before { border-top: 0 solid transparent; border-left: 30px solid transparent; /* 横幅の30% */ border-bottom: 30px solid #26a824; border-right: 30px solid transparent; top: -30px; } .center::after { border-top: 30px solid #26a824; /* 横幅の30% */ border-left: 30px solid transparent; border-bottom: 0 solid transparent; border-right: 30px solid transparent; bottom: -30px; } 解説 作り方は上のソースをまるまるコピーしてください。 borderなど一部はpx指定の必要があるので、全体の横幅を基準としてコメントの%分のpxを指定してください。 そして作り方の解説としては大きく3つのパーツに分かれているので、それぞれで解説します。 パーツ①　「ベース」 これが左右になる部分です。このベースを作ります。 cssは「.base」となっている部分ですね。 パーツ②　「上下」 ベースに擬似要素で上下部分も作ります。 cssは「.base::before」と「.base::after」です。 パーツ③　「中心部」 最後に中心の6角形を作ります。 cssは「.center」です。 6角形の作り方は過去に記事を書いているので、詳しく知りたい方は以下の記事もご覧ください。 まとめ 上で解説した3つのパーツをすべて重ねることで、ルピーをCSSだけで再現することができます。 もっとこだわりを入れるのであれば、 若干グラデーションをかけてもっと立体感を出すこともできるかもしれませんね。 気が向いたときに違う色でも作ってみたいなと。紫ルピーの透明感とかは再現しようと思うと結構苦戦しそう・・・ おそまつ！ ~ Qiitaで毎日投稿中!! ~ 【初心者向け】WEB制作のちょいテク詰め合わせ

どうも7noteです。某人気ゲーム「ゼルダ○伝説」に出てくるルピーをCSSだけで作る 私事ですが、普段からゲームは結構好きで、京都に本社のある花札を作っていたことで有名な大手ゲーム会社のゲームも昔からよく遊んでました。 その中でよく遊んでいたゲームの中に「ゼルダ○伝説」という種類のゲームがあるのですが、 そのゲーム無いで出てくるルピーという通貨のお金をCSSで再現してみました。 （※ゲームタイトルは一応伏せ字しておきます。） ちなみにインドルピーではないので、インドルピーだと思った方はブラウザバックボタンを押して前のページにお戻りください。 ゲーム内で出てくるルピーは宝石みたいできれいなので、応用すれば他のことにも使えるかも？ ソース index.html <div class="rupee"> <div class="base"></div> <div class="center"></div> </div> style.css .rupee { width: 100px; /* 全体の基準になります。 */ height: 200px; /* 横幅の2倍 */ position: relative; } .base { width: 100%; height: 50%; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: linear-gradient(to right, #287e27 50%, #1f511e 50%); margin: auto; } .base::before, .base::after { content: ""; width: 0; right: 0; transform: rotate(45deg); position: absolute; left: 0; right: 0; margin: auto; } .base::before { border-top: 35px solid #23361a; /* 横幅の35%の値 */ border-right: 35px solid #23361a; border-bottom: 35px solid #9cf859; border-left: 35px solid #9cf859; top: -35px; } .base::after { border-top: 35px solid #2d9d2f; /* 横幅の35%の値 */ border-right: 35px solid #2d9d2f; border-bottom: 35px solid #1e3a14; border-left: 35px solid #1e3a14; bottom: -35px; } .center { width: 60%; height: 30%; background: #26a824; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; } .center::before, .center::after { content: ''; width: 0; height: 0; position: absolute; left: 0; right: 0; margin: auto; } .center::before { border-top: 0 solid transparent; border-left: 30px solid transparent; /* 横幅の30% */ border-bottom: 30px solid #26a824; border-right: 30px solid transparent; top: -30px; } .center::after { border-top: 30px solid #26a824; /* 横幅の30% */ border-left: 30px solid transparent; border-bottom: 0 solid transparent; border-right: 30px solid transparent; bottom: -30px; } 解説 作り方は上のソースをまるまるコピーしてください。 borderなど一部はpx指定の必要があるので、全体の横幅を基準としてコメントの%分のpxを指定してください。 そして作り方の解説としては大きく3つのパーツに分かれているので、それぞれで解説します。 パーツ①　「ベース」 これが左右になる部分です。このベースを作ります。 cssは「.base」となっている部分ですね。 パーツ②　「上下」 ベースに擬似要素で上下部分も作ります。 cssは「.base::before」と「.base::after」です。 パーツ③　「中心部」 最後に中心の6角形を作ります。 cssは「.center」です。 6角形の作り方は過去に記事を書いているので、詳しく知りたい方は以下の記事もご覧ください。 まとめ 上で解説した3つのパーツをすべて重ねることで、ルピーをCSSだけで再現することができます。 もっとこだわりを入れるのであれば、 若干グラデーションをかけてもっと立体感を出すこともできるかもしれませんね。 気が向いたときに違う色でも作ってみたいなと。紫ルピーの透明感とかは再現しようと思うと結構苦戦しそう・・・ おそまつ！ ~ Qiitaで毎日投稿中!! ~ 【初心者向け】WEB制作のちょいテク詰め合わせ

「px」 →絶対単位。 親要素の影響を受けずに、どんな状況でも指定したpxになる。 ユーザー操作による文字サイズの拡大／縮小に対応できなかったり、タブレットやスマートフォンなどの高解像度のディスプレイで表示をした場合、端末ごとに見た目の文字サイズが異なって表示されたりする場合がある。 「em」 →相対単位。 親要素のフォントサイズを基準とする。 <div class="box"> <p class="text">テキストテキストテキスト</p> </div> html { font-size: 16px; /* 1em = 16pxとなる。 */ } .box { font-size: 2em; /* 16px × 2 = 32px */ } .text { font-size: 1.5em; /* 32px × 1.5 = 48px */ } 入れ子構造が深くなるとフォントサイズ指定がし辛くなる。 「rem」 →相対単位。 ルート要素（html）のフォントサイズを基準とする。 <div class="box"> <p class="text">テキストテキストテキスト</p> </div> html { font-size: 16px; /* 1rem = 16pxとなる。 */ } .box { font-size: 2rem; /* 16px × 2 = 32px */ } .text { font-size: 1.5rem; /* 16px × 1.5 = 24px */ } font-size: 62.5%;って何？ フォントサイズの単位にremを使いたい場合、htmlのフォントサイズが16pxのままだと分かりづらい。 html { font-size: 62.5%; } 16px（ブラウザの基本のフォントサイズ） × 0.625 = 10px htmlのフォントサイズが10pxになるので、 1rem = 10pxに設定することがきる。 こうすることによって計算がしやすくなる。 例） 10pxにしたい場合 = 1.0rem 16pxにしたい場合 = 1.6rem 36pxにしたい場合 = 3.6rem 補足 アクセシビリティ的にフォントサイズのpx指定はNGらしい