【CSS】セレクタの計算方法
自分の備忘として残しておくために書きました。優先度を計算できるセレクタは6つある。下記は上から優先度の高い順に記載してる。セレクタ桁数IDセレクタ3桁目クラスセレクタ2桁目属性セレクタ2桁目擬似クラス2桁目タイプセレクタ1桁目擬似要素1桁目これらは単純にどのセレクタがいくつあるのかで計算していく。例えば、「#abc...
View Article学習記録 #1
はじめにプログラミング初心者の学習記録です。 - その日に行ったこと - つまずいたこと - 新たな発見 等を書き溜めていきます。本日行ったことポートフォリオの目的と内容の決定ラフスケッチ作成各ページ共通部分とトップページの作成本日つまずいたことCSS Floatを使用した際、親要素のはみ出してしまう→親要素にoverflow: hidden;を指定背景画像の影響で、文字が見にくい...
View Article初心者によるプログラミング学習ログ 297日目
100日チャレンジの297日目twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。すでに100日超えましたが、継続。 100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。 297日目は、おはようございます297日目...
View ArticleCSSでフェードイン
前提下記のようなアニメーションをつけたい時。https://i.gyazo.com/65da0add99ff6e0581e91924fa1d9e38.mp4本題ScrollRevealを使用します。※公式サイトhttps://scrollrevealjs.org/まずは読み込みするために下記の記述を行います。ライブラリをscriptタグで読み込み、対象の要素にクラスを与えてJavaScriptからア...
View ArticleClik here to view.
[初心者] CSSの優先度はカースト制度に置き換えて覚えよう！
CSSのカースト制度＊下のサンプルコードをもとに書いてまする身分が高ければ高いほど、意見が通るんだ（要はCSSが優先して適用されるってことね。）雑魚下人平民 地主 .content（親クラス）span(タグ名).cls(子クラス)#first(ID)[サンプルコード] <div class="content"> <span id="first"...
View Articleハイブリッドアプリなどで有効なcssの小技
ハイブリッドアプリの動きwebviewは画面を長押しするとコピーなどのメニューが表示され、そのときにバイブも発動するという特徴があります。ネイティブではこのようにならないので、長押ししてメニューが出ればハイブリッドアプリってすぐバレます。そこまで意識する必要はないかもしれませんが、アプリによっては長押しでコメントを削除できたりとイベントを付けていたりするので、コピーさせる必要がないならば切っておいた...
View ArticleClik here to view.
[初心者] ボタンに影を付けましょう（CSS）
[初心者] ボタンに影を付けましょう（CSSのみ）＊Image（カーソルをボタンに合わせると影が現れます。）とりあえず超シンプルHTMLを用意しましょっか[HTMLの中身です] <head> <link rel="stylesheet" href="style.css"> </head> <body> <div id="content">...
View Article#01 [HTML&CSS 超超超初心者講座 - 2020 - ] HTML&CCSSの勉強どっからはじめればいいのかわからんぞ
HTML&CCSSの勉強どっからはじめればいいのかわからんぞ「webページ自分でコーディングしてみたい」とか「特にやりたくはないけど仕事でやらなきゃいけない」でも、「とっかかりがわからない」そんな人のための「超初心者講座」です。なので、経験者には向いていないので、このシリーズは読まなくていいです。ひとまずコーディングの準備をしようHTMLのコーデイングは普通のテキストエディタでもできるよ。で...
View ArticleCSSって忘れやすいのは僕だけ・・？
今更ですが、viewの構成を整える際にいつもCSSがおざなりになるなぁ。と感じたので便利帳代わりに参考にしていた記事を辞書感覚で残しておこうと思います。（※不定期更新）決してフロント周りが苦手とか嫌いなわけではなく（むしろフロント好き）、ただ普通に僕の記憶力の乏しさが垣間見れたのでメモ代わりに使います。■ブロックレベル要素とインライン要素CSSセレクタとは（HTML・CSSの基礎知識）CSSのセレク...
View ArticleHTML/CSS（学習記録）
HTML-初級編- ・ <h1></h1> //h1~h6まで使える ・ <p></p> ・ <!-- --> ・ <a href="URL"></a> ・ <img src="URL"> ・ <ul></ul> / <ol></ol> ・...
View ArticleCSS3 transform translate系まとめ
transform: translate系x,yは普通に効くけどx座標はブラウザによって表示が異なる。使える関数・translate(x, y=0)・translateX(x)・translateY(y)・translateZ(z)・translate3d(x, Y=0,...
View Articlemargin-blockについて
margin-blockはCSSのプロパティで、論理的なブロックの先頭と末尾のマージンを設定する。これは要素の書字方向やテキストの向きに応じて。物理的なマージンに変換される。/* 値 / margin-block: 30px 30px; /絶対的な長さ / margin-block: 2em 2em; /直近のブロックコンテナーの大きさに対する相対値 / margin-block: 20px;...
View ArticleClik here to view.
知っておくと便利な論理プロパティ、ボックスモデルのこれからの方法
CSSの論理プロパティにおける考え方CSSのボックスモデルについて説明する時、下記のような図がよく使用されている。確かにこの図は当時の正しいもので、もちろん今でもそうだが、margin-left、padding-right、border-topのような物理プロパティは最後の日が来るかもしれない。新しい論理プロパティを使い始めるには、left/rightやtop/bottomについて考えるのをやめて、...
View ArticleClik here to view.
Clik here to view.
エンジニアのためのボックスモデル
ボックスの生成HTMLの要素はどの要素もボックスと呼ばれる四角形の領域を生成する。ボックスは大きく分けてブロックボックスとインラインボックスの２種類に分けられる。これは、displayプロパティの値によってボックスの種類が決まる。各HTML要素はブラウザのデフォルトスタイルシートによってdisplayプロパティのデフォルト値が指定されているので、それに伴ってデフォルトのボックスの種類も決まっているが...
View ArticleClik here to view.
自分のポートフォリオページを作成した件
自分のポートフォリオを作成してみました。まだ全然イケてないけど、内容としては公開できるレベルになったので公開。[ここ]からアクセスできます。ちょっとだけ工夫した点を以下。構成今回は静的サイト。使用したフレームワークはBootstrap。サイト自体の枠組み・レスポンシブデザイン・サイト内を飾る部品の多くはBootstrapを使用して、背景色・フォントとかサイトのグリッドとかに関係ない部分をCSSに書き...
View Articleサイト模写の立ち上げ手順
HTML、CSS、Sass、Bootstrapを用いてサイト模写の練習をする。1: 必要ファイルの準備sample.html、sample.css、sample.scss を作成 .htmlファイル内で、html:5と入力( VSCode の emmet を使用 ）。sample.html<!DOCTYPE...
View ArticleClik here to view.
React + Firebase でhostingしたwebアプリをSafariで開くと要素と要素の値が表示されてハマった話
経緯Reactで開発してFirebaseにHostingした。 Hosting先のURLをiPhone(safari)で開いてみたら、下の画像のようなコード？が画面に表示されていた。エラーかと思ったが、Macでsafariの...
View ArticleClik here to view.
CSS : 論理プロパティについて再び
まず、ボックスモデルについてまだ知識が浅い場合はこちら。https://qiita.com/suiru_nakamura/items/f81eb7a4b0bc696cf01dmarginの種類marginにはプロパティが用意されており、省略も簡単。個別指定・margin-top・margin-bottom・margin-left・margin-rightmarginの省略・margin:0;(上下左...
View Article初心者によるプログラミング学習ログ 298日目
100日チャレンジの298日目twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。すでに100日超えましたが、継続。 100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。 298日目は、おはようございます298日目...
View Article