【初心者向け】もうz-indexの数字で迷うのはヤメにしたい！
どうも7noteです。z-indexのめちゃくちゃな指定はもうヤメにします！要素の前後の優先順位を決めることができる、z-indexですが便利です。便利だけど、適当に指定していると思わぬ順番になってしまい、ぐちゃぐちゃに。。。重ね順の指定ってムズカシイ。ということで、マイルールを決めます！その前に、z-indexについておさらいCSS の z-index...
View ArticleClik here to view.
Chormeでクリックした要素に枠線が付く現象
概要chromeである要素だけクリックした時に黒い枠線が表示されることがあった原因対象要素にtabindex属性が付いていて、クリックした時に強調としてoutlineプロパティが設定されるそもそもなぜtabindexが付いたのか？スライダーライブラリのslick.jsを使用しており、そこでtabindexが付与されるようになっていた対処2種tabindexを削除outline:...
View ArticleCSSとは、記述の仕方など
CSSとはHTMLに装飾を加えるための言語です。例indexファイル<!DOCTYPE HTML>< html>< head>< meta charset="UTF-8">< title>HTML学習用ウェブサイト< /title>< link rel="stylesheet"...
View ArticleClik here to view.
Clik here to view.
フォーカスについてまとめてみた
フォーカスとは？フォーカスとは、キーボードイベントの行き先を決定することです。フォームでテキストボックスをクリックした時、要素が枠線でハイライト表示されます。これもフォーカスされている状態です。フォーカス・インジケーターフォーカス・インジケーターとは、Webページを閲覧中にどの要素にフォーカスがあるかを示すものです。どのブラウザでも基本的にtabキーを押すと、フォーカス・インジケーターが移動します。...
View Articlerailsのfile_fieldにおける画像アップロードボタンのデザインの変更方法
環境ruby 2.6.5 rails 6.0.0やりたいこと画像をアップロードする際に，アイコンをクリックするとファイル選択に移るようにしたい実装<%= f.label :image, class: "far fa-image" do %> <%=f.file_field:image,style:"display:none;"%><% end...
View Article1pxより細く
border1pxをより細くしたい場合border:1px solid black; transform: scaleY(.5); transform-origin: 100% 0;上記を追加
View Articlevue-js-modalのスタイルを変更したい
vue-js-modalをカスタマイズしたい！vue-js-modalを使ってぼくのかんがえたさいきょうのモーダルを作ろうとしたところ、スタイルの適用でてこずったので記しておきます。 Qiita初投稿ですので、本題についてだけでなく記事自体の改善案についても、何かあればぜひコメントいただけると助かります。環境vue : 2.6.11 @vue/cli : 4.5.4 vue-js-modal :...
View ArticleClik here to view.
CSS初心者のために「CSSで初心者マーク」を作ってみた
どうも7noteです。WEB制作初心者の方向けに記事を書いているのですが、だれでも初心者マークくらいはちゃんと作れたほうがいいかなという謎の理由から、CSSで初心者マークを作ってみました。われこそはCSS初心者だと思う方はぜひ挑戦してみてください。ソースindex.html<divclass="mark"><divclass="left"></div><di...
View ArticleClik here to view.
[Rails]デプロイした時にカスタムフォントが反映されない不具合
始めて3ヶ月の初学者で、初投稿になります。アウトプットを兼ねて投稿します。どうぞお手柔らかにお願い致します!間違いなどありましたらご指摘いただけるとありがたいです。はじめにPF作成するにあたり、開発環境ではフォントが反映されるが本番環境では反映されなかった時のことを備忘録として書きたいと思います。1.カスタムフォントカスタムフォントの素材をダウンロードしたらapp/assets/fonts以下にダウ...
View ArticleClik here to view.
社会人2年間の集大成！占いサイトを作成した話⑤
社会人2年間の集大成！占いサイトを作成した話④のつづきとなります！占い師一覧画面の紹介機能の紹介画面に遷移すると占い師の一覧が表示されます。「申し込む」ボタンをクリックすると・・申し込みフォームに遷移します。「申し込む」ボタンをクリックすると・・「申し込みが完了しました！」というメッセージのモーダルが表示されます。何も入力せずに「申し込む」ボタンを押下した場合はエラーにします。実装方法の紹介このペー...
View Articleフォーマッター色々
※ html formatterhttps://webformatter.com/html※ html beautifierhttps://beautifytools.com/html-beautifier.php※ css formatterhttps://codebeautify.org/css-beautify-minify
View ArticleClik here to view.
春なのでさくらの花と花びらをCSSで再現
どうも7noteです。さくらの花と花びらをCSSで再現（cssで作った花と花びらの見本）再現シリーズ、季節に合わせていろいろ作っていきたいと思います。季節に合わせたサイトとかって個人的にめっちゃ好きです。きれいなデザインやわかりやすい構成のWEBも素晴らしいと思いますが、どこかに造り手の遊び心が入っているサイトって素敵だなって思います。そんなサイト作りができるクリエイターになりたいものですね。ではで...
View Articleselect タグ 文字列 中央よせ
selectタグの文字列の中央よせはかなり難しいですtext-alignや display: flexなどのよくある中央よせ表示ができないからですなので text-align-last: centerを使用します※ 全てのブラウザーに対応している訳ではないので、対応ブラウザの範囲内か確認しましょうtext-align-last 対応ブラウザ See the Pen bGggBoj by Hideto...
View ArticleClik here to view.
CSS: 4月、プログラマーとして歩み出す皆様へ今日だから伝えたい
今日から4月新年度ですね。新しいことが始まる日はわくわくします。私はプログラマー（というか社会人）に必要な力はたった1つだと思います。この良き日に乗じて、語るに値するテーマを見つけたのでその紹介です。Put these CSS definitions into your co-workers css overriding file. They will be applied to every...
View ArticleClik here to view.
CSSの優先度まとめ
この記事はなぜこのスタイルが効かないの！？優先度があるってなんとなく知ってるけど詳しくは説明できない...っていうことがよくあるので、CSSの優先度をまとめてみました。メンテナンスしやすいコードを書くためにも、これを機に完璧に覚えないとという自戒をこめて。はじめにCSSはカスケーディングスタイルシートの略ですよね。カスケーディングとは英語にすると滝の流れのような意味。上流でスタイリングされたものは下...
View Article