CSS関連走り書き
はじめに TailwindCSSネタ流行に便乗した走り書き。時間が出来たらプロット化、正書化するかも。 駄文 tailwindCSSへの反発と文書構造とデザインの分離 関心の分離として、文書構造とデザインの分離のみを言うのは正しいのか （一般に想定される）文書構造とデザインの分離は、コンポーネントの内面を侵している コンポーネントに閉じる事による関心の分離とインラインデザイン...
View Article[Sass] Sassについて
はじめに railsでコマンドを使ってファイルを生成したりすると、自動で拡張子が「.scss」となったファイルが生成されて、なんだろうと思いながら、放置していました笑 実はこれCSSの進化版みたいな「Sass」という言語で書くファイルだったみたいです。...
View ArticleCSS flexboxについて
CSS flex box について CSSでflexboxを使用すると、要素を横並びや縦方向に並べることができる。 親要素に使用するとフレックスコンテナとなり、子要素はフレックスアイテムとなる。 横方向に並べる display: flex; /*デフォルトは justify-content: flex-start; となる。*/ justify-content: flex-start;...
View Articleposition:sticky が効かなかった
起こったこと HTMLの<nav> と <aside> を固定したかった為、CSSでposition:stickyを設定したがうまく効かなかった。 調べたところ、以下の回答を見つけた。 the problem you are facing here is, that your section block consumes the full height. so it...
View Article[Sass] mixinとは
はじめに 前回Sassに関する概要と一部の機能を紹介しました。 今回はSassの機能の中でも、とても便利な「mixin」という機能について紹介したいと思います。 よろしくお願いします。 mixinとは mixinという機能はいくつかのコードをまとめて、簡単に呼び出すようにする機能です。 同じコードを書く手間が省けるので、読みやすいコードになります。 mixinの使い方...
View ArticleメールアドレスをWebに書くときのホスピタリティ
このように書くと、たぶん、きっと、おそらく、、、クロールbotに捕食されにくい。はず。知らんけど。 脆弱性診断などで引っかかった場合、この方法でパスできる。 ポイントは、CSSの content: attr(); を使うこと。 HTML <a class="email" data-domain="domain" data-user="user" data-subject="タイトル"...
View Article【HTML＆CSS】アンカータグについてまとめてみた
○アンカータグについて アンカーとはそもそも錨のこと 同じページ内のリンクの飛び先を指定するもの hrefリンクの飛び先を指定し、 id属性にてページの中にある特定部分について名前をつける <li>タグのPortfolioから<h3>タグのPortfolioに飛ばしたい!! 手順は以下の通り ①リンクをつけたい場所に<a...
View Article雑誌風Webデザインのススメ
CSSで「なかなか良いんじゃね？」っていうデザインが出来た話 自己紹介 令和3年に自分の個人サイトを運営しております。ShoyoFILMSと申します。 （良かったら見てね。崩れてたらすみませんがコメントで教えてください） https://fujiformat.com/ ※気分でデザインが変わってる可能性があります。 せっかくだから色んなアイディアや技術の試験場にしようと日々手を入れているわけですが、...
View Articlereact + styled-components + material-ui スタイルが効かない
styled-componentsでスタイルをあてるとき 通常 const StyledDiv = styled.div` background-color: #f5f5f7; width: 100%; height: 100px; `; html要素にあてるときは公式通りの使い方でおｋ material-uiのコンポーネントにあてるときも基本は公式通りでいい import { Box }...
View Article自分用のメモ
widthを100vwに指定した場合の問題： 前提：windowsの場合 widthを100vwに指定した場合、画面からはみ出る（横スクロールバーが出る） 解決： 親に対して、overflow:hiddenをつける コード： React： <Wrapper> {children} <Hr /> <Footer /> </Wrapper>...
View ArticleリセットCSSについて
リセットCSSについて 今回は、リセットCSSについて簡単に解説して行きます！ リセットCSSとは、デフォルトのCSSの設定を無効化して ブラウザ（Safari、GoogleChrome、FireFox）等の、 出力内容を同じにさせる事が出来る、ありがたい機能です！ リセットCSSを適用させないと？？？ リセットCSSを適用させないと、Safariで閲覧した時は、...
View ArticleHTMLで箇条書きリストを作成
はじめに またまたhtmlの記述方法を忘れていたので投稿しようと思います。 今回は箇条書きのレイアウトです。 ヘッダーの navで使用される所をよく見ます。 ul要素・li要素 ul要素 順序のないリストを示すブロックレベル要素です。li要素と一緒に使用します。 li要素 リストの項目を示すブロックレベル要素です。ul要素の子要素として記述します。 <ul class="lists">...
View ArticleJavaScriptでクイズアプリを作る
HTML + CSS + JavaScript を使ってクイズアプリを作りました。問題数は少ないですが、遊んでみてください！ URL https://cordelia-sixth.github.io/quiz_app_js/ ソースコード https://github.com/cordelia-sixth/quiz_app_js ディレクトリ構成 app ├── index.html ├──...
View Article【CSS】Grid Layout 基礎①
🎈 この記事はWP専用です https://wp.me/pc9NHC-V8 前置き 今回は レスポンシブ 対応のしやすい Grid Layoutです✨👏 flexよりも少し複雑になりますが、 慣れればできることは増えますよ❤️ 続編ではflexとの違い、 gridにしかできないことを 実践形式を含めて 公開しようと思っています💕 Grid Layoutとは 縦線、横線に基づいて要素を置く 横線 =...
View Article【CSS】Grid Layout 基礎②レスポンシブ対応
🎈 この記事はWP専用です https://wp.me/pc9NHC-W7 前置き 前回の続きです！ レスポンシブ対応を Grid Layoutの実践形式でやります✨🙋♀️ Grid Layout① 簡単ver. 前回までの復習を含め やってみましょう💪 幅や小要素の余白などは つけなくてOKです⭕️ boxの中身は 中央配置をしましょう💡 ticktack… 答え 前回と同じくclass名は...
View Articlestyled-componentsを利用したプロダクトにstylelintを入れたい話。
背景 個人開発しているプロダクトではstyled-componentsを採用しています。 cssプロパティの書き方に関して個人的ルールを設けているため、時々コードを書いているときに「 あれこれってどっちが先だっけみたい？ 」...
View Article簡単なWebブラウザゲーム
簡単なWebブラウザゲームを作りました。 簡単に出来ますので是非挑戦してみてください。 <!-- JavaScriptで当たりBoxを見つける --> <!-- 新規作成 2021/6/26 --> <!-- Author 乃木坂好きのITエンジニア --> <!DOCTYPE html> <html lang="ja">...
View Article【CSS基礎】個人的メモ
はじめに CSSに関して、ネットに転がっているソースを朧気な理解のままコピペしてきたが この度仕組みをきちんと理解しようと基礎から勉強を始めたので、備忘録として残す inherit プロパティには自動で継承するものと継承しないものがある。 例えば… <!DOCTYPE html> <html> <head> <meta charset="UTF-8">...
View Article【CSS】セレクタのおさらい
はじめに セレクタについて、個人的に理解が浅かった部分を備忘録として残す 擬似要素 擬似要素は、要素の一部に対してCSSを適用させたい場合に用いられる sample.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title>...
View ArticleCSSでメディアクエリが効かない原因について
はじめに Bootstrapを使ってWEBサイトを作成した際に、 メディアクエリが効かずに解決するまで2日かかったため、 解決するまでに学んだことを備忘録として記録します。 ==環境は以下の通りです。== ・Windows10 ・Bootstrap v4.1 ・HTML5 ・CSS3 メディアクエリ(＠media)とは？ ＠mediaはメディアクエリと呼ばれている。 メディアクエリとは、...
View Article