�chromeのデベロッパーツール�で表示される”user agent stylesheet”によりCSSが適用されない状態をreset.cssで解消する。
問題模写コーディングをしていると、CSSが適用されないことがあり、chromeのデベロッパーツールで確認すると、”user agent stylesheet”によって打ち消されていることがわかった。原因 ”user agent stylesheet”はブラウザ毎のデフォルトのCSS設定である。対策...
View ArticleClik here to view.
CSS/stickyについて知るべき事はそんなに多くない。
テーマ position:stickyをどれだけ深く掘り下げたところで、落ち着く先のパターンなんか一つや二つ。 まずは使い方のアイデアを練って、それを可能にする。たったそれだけのお話に必要な知識はせいぜい↓こんなもの。1. sticky(z-index:2)に妹relative（z-index:1）を作る。...
View ArticleHTMLとCSSでモーダルを作る際のinputタグとforの関係について
30daysトライアル2ndのDay22のモーダルを作るという課題で自作のモーダルを作るときにとても大切なinputとforについて理解したので備忘録として以下にまとめます◎参考にしたのはhttps://haniwaman.com/css-modal-drawer/#i-4こちらの記事です forは inputにチェックを入れられるor外す物を指定できる簡単に言い換えると… for="" は...
View ArticleClik here to view.
Vue.jsでTODOTrello風アプリを作る
業務でTrelloをよく使うので、Vue.jsを使って同じようなTODOアプリ作れないかなーと思い作成。部分的に、気になるところを抽出して説明していきたいと思います。<!DOCTYPE...
View Article【HTML】input に paddingが付けられるのか？
HTML<input type="text" value="メールアドレス"> HTML<style> input { padding-left: 100px; } </style> <input type="text" value="メールアドレス"> ＜style＞の部分で、 CSS のファイルに書いても大丈夫。但し、上書きされてしまって...
View ArticleClik here to view.
ダーツボード再現記（Ｗｅｂ版）
まえがきうちにダーツボードが転生してきたのですが、計算機能がないので自作します。転生される民のごとき知識なので、もっといい方法があるかもしれません。タイトル byなろうパロディ☆タイトルジェネレータ成果物 See the Pen Darts board by Oba Takeshi (@obq777) on...
View Article初心者によるプログラミング学習ログ 256日目
100日チャレンジの256日目twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。すでに100日超えましたが、継続。 100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。 256日目は、おはようございます256日目・youtubeでwebサイト模写#早起きチャレンジ#駆け出しエンジニアと繋がりたい#100DaysOfCode—...
View Article製薬企業研究者がjQueryの基本についてまとめてみた
はじめにjQueryは、JavaScriptのライブラリの一つで、シンプルな記述でウェブページに動きをつけることができます。ここでは、jQueryの基本的な文法に絞って解説します。jQueryの基本的な記述方法jQueryは基本的に、$(セレクタ).メソッド(引数)と書きます。セレクタとしてはHTMLのid属性やclass属性も指定できます。...
View Article【自己紹介】初投稿
自己紹介はじめまして、マサヒロと言います。 Webエンジニアを目指すことを決意しました。学びをアウトプットしてこうと思い、本日初投稿です。経歴簡単に自己紹介を兼ねて。現在26歳名古屋在住の既婚、子供2人の身です。現職は製造業での機械設計をしています。製造業はレガシーな要素が多く、やりたい事とのズレを感じています。...
View Article素人によるblock, inline-block, inline
はじめに HTML・CSSを書いていて、うまくCSSのプロパティがあたらないことがよくありました。そんなときの主な原因はプロパティをあてたいタグのdispalyプロパティの初期値を把握していなかったことでした。今回は主なHTMLタグのdispalyプロパティの初期値とそれらの特徴ゆえに自分がよくひっかかっていたところをまとめてみようと思います。デフォルト値...
View Article本番環境でbackground-imageが反映されない時の解決法
本番環境でbackground-imageが反映されない。これで詰まる人が多そうなので、共有します。ググると、 background-image: url(***.jpg);でうまくいくよ。とか、拡張子jpgをpngに変えろとか言う記事がありますが、正しくは、background-image: image-url("***.jpg"); です！これで、本番環境でもCSSが反映されます。
View ArticleClik here to view.
CSS Grid LayoutのIE11対応のまとめ
CSS Grid Layoutレイアウトに便利なCSSですが、IE用の実装が癖があります。そこでIEに使用したソースをまとめて見たいと思います。ちなみにIEでもIE11にしか対応していないのでIE10以下は使用できません。css...
View Articleobject-fitとは
object-fitとはimg要素やvideo要素などの中身を、コンテナーにどのように表示するかを設定するプロパティです。よく「画像をトリミングする方法」などとして紹介されています。対応状況https://caniuse.com/#feat=object-fit...
View ArticleClik here to view.
Progate無料版をやってみる【HTML & CSS 初級編】
IT全般の知識が乏しいです。少しずつ身に着けていきたいです。ネット上に様々な知識が無料で公開されているので、極論それをすべて吸収して実務で発揮できればよいのですが、超天才でないかぎりなかなか難しいのではないかと思います。(私には無理)すぐになまけてしまう性格なので、プロが教えてくれるスクール等に通って、メンターに管理してほしいのですが(勉強のプロセスが確立されているし)社会人のため時間が取りづらいこ...
View Articleプログラミング活動記録
3月8日の進捗・ウェブ活の無料HTMLCSSこうざでレッスン１５まで完了（それ以降は有料のためできず。）学び・htmlのタグでgoogle検索のヒットの仕方が変わるということ・positionプロパティのabsoluteは絶対位置指定、staticは特に変化なし、relativeは相対位置指定、fixedはスクロールしても位置固定で表示される関数
View ArticleClik here to view.
[scss]mixin実はよくわかってなかった件。わかると便利。使い方は？ 初心者
Mixinとは？ざっくりお伝えすると、書き方の注意は２つ①＠mixinで定義を決める「＠mixin panda（好きな名前）{color:red;みたいな定義}」で書く＠mixinのscss当てる「当てたいクラス名{＠include panda(mixinと同じ名前じゃ無いとダメ)；}」これで＠mixinで書いた定義がまるまるこのクラスに反映されます。②...
View Article初心者によるプログラミング学習ログ 257日目
100日チャレンジの257日目twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。すでに100日超えましたが、継続。 100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。...
View ArticleClik here to view.
印刷用のCSS(@media print)をFirefoxで確認する方法
Firefoxで開発ツールバー機能が削除されたため以下にある従来の方法では確認できない。Firefox の使い方現時点(2020/03/09時点)F12で開発ツールを開いた後に以下のボタンをクリックすることで確認することができる。
View ArticleCSS 計算式の関数 calc()
最近もう一度、HTMLやCSSの勉強し直したいと思ったので調べているのですが、CSSに計算式を可能にする関数calc()というのがあるみたいですね。横のサイズがCSSdiv { width:calc(100% - 20px); } レスポンシブな対応時には色々と使えそうです。CSSについてまとめていきます。【ホームページ】 CSS
View Article