Clik here to view.
マク○ナルド風ハンバーガーをCSSだけで作ってみた
どうも7noteです。本気でハンバーガーの再現やってみた。「3本線でハンバーガーメニュー？？？」「ハンバーガーってこんなんじゃなかったっけ？」完成例ソースindex.html<divclass="hamburger"><divclass="vans"></div><divclass="cheese"></div><divclass="...
View ArticleClik here to view.
CSSで三角形を作る
手順1：四角形を作る.triangle{ content: ' '; width:10px; height:10px; border: 3px solid black } 手順2：三角形の色を決める // 今回は左辺を黄色にする border-left-color: yellow; 手順3：辺（border）を厚くする//変更点 border: 20px solid black;...
View Articleラクして文字に線を引く方法 → 結論： text-decoration: underline;です。
先日、こんなツイートをしました。✅線を引くのにまだborder使ってるの？2行で簡単に文字に線を引くことができるプロパティcss<br>h1 {<br> text-decoration: overline;<br> text-decoration-color:...
View ArticleClik here to view.
flexboxで要素の順番を入れ替える。
flexboxでbox内の順番を入れ替える、cssを紹介します。レスポンシブなサイトを使う時に結構使ったりするので覚えておくと便利です。flexboxの入れ替え、orderプロパティ以下を使います。css.parent{display:flex;}.child{order:1;}親クラスに通常通りflexを使い、子クラスにはorder:1;を使います。このorderを使う事で子要素の並び順を変更する...
View ArticleClik here to view.
CSS的アラビア語対応
とある日の出向先にてお客様 : 平井さん、(ウェブの技術で)アラビア語対応ってできる？ひらい : アラビア語対応……ですか…… 🤔※ グローバル展開されているプロダクトを開発していました。ということでアラビア語対応やってみました〜✈️🏜️🐫アラビア語って？فإنه...
View ArticleClik here to view.
省略記号(...)について考えてみる
文字数制限がある場所で使用される省略記号(…)について少し語ってみたいと思います。省略記号(…)の読み方ellipsis(イリプシス)と読みます。(知ってました？😊web上(CSS)での実装方法要素がブロック指定であることを確認(spanタグとかの場合は追加でdisplay指定が必要)要素の幅を決める ←結構大事折り返さないプロパティを追加...
View ArticleClik here to view.
Clik here to view.
深夜のテレビで流れるアレをCSSで実装してみた
ピーーーーーーーーーーーーー See the Pen color-bar by saeka-hirai (@saeka-hirai) on...
View ArticleClik here to view.
Magical Margin Tips
今回はMarginの特徴を上手く理解し、活用するためのテクニックをお伝えしたいと思います 【Ice Break 】 Margin と Paddingの違いついてこれ、CSS触る人は大抵ぶつかる問題ですね おそらく数年前の私もぶつかってたと思います...
View ArticleClik here to view.
HTML/CSS初心者は必見！ どんなデザインでも自由自在にできるFlexbox入門
はじめに今回は要素を綺麗に配置するときに、大変役立つFlexboxの使い方について紹介します！ここでは、要素 (アイテム) が入っている箱のことをコンテナと呼んで説明します。YouTube動画動画で学びたい方はこちらもどうぞ！【YouTube動画】 HTML/CSSのFlexboxについて詳細解説！...
View ArticleClik here to view.
Figmaで角を丸くする方法(border-radius)
Figmaで表を作ったときに、四隅の角の丸みを角ごとに変えたいと思ったときにどうやってやるんだっけとなったので、備忘録として残しておきます。こちらを読めば、こんな感じで角ごとに丸みを変えることができるようになります。STEP1まずは、適当に図形を作ります。STEP2ここの数値を調整すると全体の角が丸くなります。STEP3四隅を個別に調整するためには、横の四角っぽいやつをクリックします。STEP4そし...
View ArticleClik here to view.
Sassでリストのアイコン画像を一気に指定する方法
今回のテーマは✨Sassでリストのアイコンを一気に指定する方法✨なんのこっちゃと思われた方はこちらをご覧くださいこちらのピンクの枠で囲ったアイコン。一個ずつCSSで指定すると似たような処理を複数回書く必要があります......😩ちょっと面倒くさいですよね〜そんな時、Sassを使用した便利な実装方法があるので紹介したいと思います！個々で画像を指定するよりも行数がグッと減るはず...
View ArticleClik here to view.
text-overflow: ellipsis を使うのに width を指定したくない
やりたいことパンくずリストの構造化データで - 枠で囲んでいる中のテキストが長いときは三点リーダーをつけたい - 枠の長さを可変にしたい（widthを指定したくない） - 短いときはそのまま表示したい実装パンくずリストのhtmlは下記と同じようにしています。（記事内では長くなるのでmicrodataは省略しています。）パンくずリスト | Google 検索セントラル | Google...
View ArticleClik here to view.
【HTML・CSS】ゲーミングな文字を作ります
ゲーミングPCが欲しい・・・でも高すぎる・・・そんな風に考えたことはありませんか？雰囲気だけでもゲーミング感を味わいたい・・・そんな私のために、HTMLとCSSでゲーミング風＝虹色に光る文字を作ります。実用性はあまりないので、ネタとしてご覧ください。作り方作り方としては、大きく分けて2段階あります。背景を文字で切り抜く背景に虹色を適用する以上の順で、作成していきます。背景を文字で切り抜く背景を文字で...
View ArticleClik here to view.
overflow visibleについて
overflowとはCSSのプロパティの１つで、要素のボックスからはみ出た部分をどう扱うかを指定する。visible：初期値。はみ出た部分がはみ出たままの状態で表示される場合がある。hidden：はみ出た部分が隠れる。scroll：はみ出た部分が隠れてスクロールできる状態になる。auto：ブラウザにより表示が変わる（基本的にはスクロールできる状態に）。visible<!-- html...
View ArticleClik here to view.
overflow hiddenについて
overflowとはCSSのプロパティの１つで、要素のボックスからはみ出た部分をどう扱うかを指定する。visible：初期値。はみ出た部分がはみ出たままの状態で表示される場合がある。hidden：はみ出た部分が隠れる。scroll：はみ出た部分が隠れてスクロールできる状態になる。auto：ブラウザにより表示が変わる（基本的にはスクロールできる状態に）。hidden要素のボックスからはみ出てしまった部...
View ArticleClik here to view.
overflow scrollについて
overflowとはCSSのプロパティの１つで、要素のボックスからはみ出た部分をどう扱うかを指定する。visible：初期値。はみ出た部分がはみ出たままの状態で表示される場合がある。hidden：はみ出た部分が隠れる。scroll：はみ出た部分が隠れてスクロールできる状態になる。auto：ブラウザにより表示が変わる（基本的にはスクロールできる状態に）。scrollはみ出た部分が非表示になるが、スクロ...
View ArticleClik here to view.
overflow autoについて
overflowとはCSSのプロパティの１つで、要素のボックスからはみ出た部分をどう扱うかを指定する。visible：初期値。はみ出た部分がはみ出たままの状態で表示される場合がある。hidden：はみ出た部分が隠れる。scroll：はみ出た部分が隠れてスクロールできる状態になる。auto：ブラウザにより表示が変わる（基本的にはスクロールできる状態に）。autoはみ出た部分の処理をブラウザに委ねること...
View ArticleClik here to view.
背景色を透過するCSS (opacityとrgba)
はじめにRailsでオリジナルアプリ制作中、サイドバー部分を実装しました。sample.html.erb(抜粋)<div class="side-bar-upper"> <h2><%= current_user.nickname %></h2> </div> sample.css(抜粋).side-bar-upper { width:...
View Article
