フロントエンジニアがCSSだけで「サッカーボール」を作る
どうも7noteです。再現シリーズ、サッカーボールをcssだけで作ってみた。 前回：リアルなビー玉を作る cssだけでサッカーボールを作りました。 前回ビー玉を作成したのですが、今回は5角形が多く入ってくるので、svg使わずcssだけの再現だったためソースが少し長くなってしまいました。 もう少し短くかけたらよかったのですが、現状の精一杯ですね。日々勉強です。 サッカーボールのソース...
View ArticleHTMLとCSSだけでGoogle風検索ボックスを作ってみた
環境について この記事ではWindows10のChromeブラウザーを利用しています。 それじゃぁ本編いってみよー！ はじめに Google風検索ボックスを作るにあたって今回は検索ボックスを以下のように分けることにしました。 検索マークの領域と検索ボックスの領域と音声入力ボタンの領域をそれぞれ作成し、最後にCSSでうまくまとめようというわけです。 また、HTMLを index.html 、CSSを...
View Articleiframeでpdfを表示する際にツールバーを非表示にする方法
複雑な家庭の事情により、iframeでpdfを表示する際にツールバーを非表示にする必要があったためメモ。 やりたいこと ブラウザでPDFを開くときに表示される、ダウンロードボタンや印刷ボタンの表示領域を非表示にしたい。 PDF本体を表示する領域が狭くなってよろしくないとか、ダウンロードできないようにしたいとか、印刷させたくないとか、いろいろな理由でこいつを消したいと思うことがあると思います。...
View ArticleFlexboxの基礎を徹底的な理解のためにUAEの国旗を作ってみる
Flexboxを使って国旗を作る 目標：Flexboxの基礎を理解するため テキストエディターはVSCode. ↓下記のFlexboxチートシートを参考 Css Flexboxのチートシート ～codeを書き始める前の準備～ ・構成を考える！ 何をどんな風に、どうやって作るのか？ 最初にある程度決めておくと後が楽になります。 例 UAEの国旗を調べる...
View Article【初心者でもわかる】後で書き直しが少なくなるコーディング術 〜大切な10のステップ〜
どうも7noteです。コーディング初心者向け、書き直しの少ないコーディング術をステップごとに紹介 「初心者のときに知りたかった！！！」と思うような、コーディングするときの10のステップについてのお話です。 きれいなwebサイトを作るのも大事ですが、しっかりと開発スキルのベースが整っていることも重要なポイントです。...
View Article自己紹介サイト作成で学んだこと
自己紹介サイト制作で学んだこと HTML CSS vscodeの使い方 拡張機能 素材やテンプレサイト HTML - 画像挿入方法 htmlファイルと同じところにimagesフォルダがある場合 <img src="/images/ロゴ.png" alt="ロゴ画像" width="111" height="20" /> - 構成の提案（自分がやりやすいのが一番ですが）...
View ArticleCSSのセレクタ適用条件（AND,ORなど）
Bootstarpを使っていて test.html <ul class="nav nav-pills style-dblock"> <li class="nav-item"> <a class="nav-link" href="#">Active</a> </li> <li class="nav-item"> <a...
View Articleposition: fixedを使ってスクロールしても常に表示される文字を作成する
はじめに 自身のコーヒーショップのHPを作成する際、参考にさせていただいたサイトのUIが格好良かったのでトレースしてみました。（鯛のないたい焼き屋） 簡単にファーストビューへの文字列固定ができたので自らの備忘録としてこちらに記載いたします。 完成図 ファーストビューの左下と右下に文字を固定表示させます。...
View ArticleFlexboxを使う時にはmarginを使用せずスイス国旗を作ってみた
Flexbox を使う際、余白の調整でmarginを使いたくなるが、 Flexbox と marginを同時に使うことはWEB制作する上であまりよろしくないと 教えてもらったので、それを踏まえてスイスの国旗をmarginバージョンとFlexbox バージョンで作って試してみました。 目標：Flexboxの基礎を理解するため テキストエディターはVSCode. ↓下記のFlexboxチートシートを参考...
View Articleあんまり手間をかけない、なんちゃってDark Mode UIの作り方
これは何 Dark ModeのUIを「厳密ではないけど手間をかけずにそれっぽく作る」ためのTipsを書いた記事です あくまでなんちゃってです、ご了承ください 本当は手を入れないといけない箇所が色々あります 暗い背景にあわせてメインカラーの明度や彩度を調整するとか Light...
View ArticleFlexboxを使ってスイス国旗を本格的に作ってみた
Flexboxを使って国旗を作る 今回はスイス国旗 目標：Flexboxの基礎を理解するため テキストエディターはVSCode. ↓下記のFlexboxチートシートを参考 Css Flexboxのチートシート ～codeを書き始める前の準備～ ・構成を考える！ 何をどんな風に、どうやって作るのか？ 最初にある程度決めておくと後が楽になります。 例 スイスの国旗を調べる...
View ArticleFlexboxを使ってフィンランド風国旗を作りました！
Flexboxを使って国旗を作る 今回はフィンランド国旗 目標：Flexboxの基礎を理解するため テキストエディターはVSCode. ↓下記のFlexboxチートシートを参考 Css Flexboxのチートシート ～codeを書き始める前の準備～ ・構成を考える！ 何をどんな風に、どうやって作るのか？ 最初にある程度決めておくと後が楽になります。 例 フィンランドの国旗を調べる...
View Articleposition:relative; を使ってTポイントカードを作ってみた！
position:relative; を使ってTポイントカードを作ってみました。 目標：position:relative;の基礎を理解するため テキストエディターはVSCode. ～codeを書き始める前の準備～ ・構成を考える！ 何をどんな風に、どうやって作るのか？ 最初にある程度決めておくと後が楽になります。 例 Tポイントカードを調べる <div>は何個必要なのか？...
View Articleこの＜Link>タグで囲むと文字が青色になってしまうのを防ぎたい
Reactなどでアプリを作成していると、ページの切り替えをしたい時にLinkを用いる事があると思います。 例えば、ヘッダーの要素を別の色で設定していたのにリンクで囲ったら青になってしまった。これだけで「バグか？」などと初心者の私は思ってしまいます。しかし、リンク自体は機能していて、ページ遷移は出来るのでちょっと調べてみました。 参考リンク: stack overflow 症状...
View ArticleFlexboxを使ってTポイントカードを作ってみた
Flexboxの理解を深めるためにTポイントカードを作ってみました はじめに Flexboxの基礎を理解するため記事にしました。 ↓下記のFlexboxチートシートを参考 Css Flexboxのチートシート ～codeを書き始める前の準備～ ・構成を考える！ 何をどんな風に、どうやって作るのか？ 最初にある程度決めておくと後が楽になります。 例 フィンランドの国旗を調べる...
View ArticleAndroid Chromeで背景画像が表示されない問題
一部のAndroid端末で、CSSのbackgroundで指定した画像が表示されない問題に遭遇。 Android Chromeの機種依存バグ。 (Oppo Reno A(Andorid OS 9)で再現) PCブラウザやiOSでは問題ない。Androidでも再現しない端末もある。というか、再現する端末の方が少ない模様。 自分の手元端末では再現していないので、詳細な検証はできていない。 対処法...
View ArticleCSS Flexboxとプロパティ
柔軟な表示を可能にする要素「display: flex;」 エレメントに「display: flex;」というプロパティを配置すると、 柔軟なウェブページにできる様々なの機能を使えるようになる。 縦に配置するか横に配置するかを指定する要素「flex-direction」 “親要素”に「display: flex;」、「flex-direction:（値）」を指定すると、...
View Articleレスポンシブ対応にならないとき
レスポンシブ対応にならない… そもそも検証ツールにも表示されてない…なぜ？ 結論、すごい小さなミスをしていた。 index.html <meta name="viewport" content="width=device-width,initial-scale=1.0"> ここは問題ないです。 レスポンシブ対応できなかったときのコード style.css @media screen...
View ArticleCSSの基礎
CSSでidをセレクトするには先頭に「#」を付けます「#」は「id」を意味です。 class属性の場合は「＃」が「.」に代わります。 一件同じように見える id属性、class属性ですが 使い方のルールにそれぞれ違いがあります。 id属性 同じWebページ内でid属性の値が重複してはならない class属性 同じWebページ内で同じclass属性の値を何度でも用いることができる ポイントですが、...
View Articlepreタグを利用したときにインデントされたソースから先頭の空白を削除する
preタグを使うと整形済みのソースをそのまま表示できるので便利ですが先頭の空白だけ消して表示したいという場面は多々あると思います。 例えば、こういう↓ときに、text = "あかさたな、"という文字を表示させたい場合 index.vue <pre class="text"> {{ text }} <!-- {{ text...
View Article