SafariでSVGの端が欠ける
事象 SafariでSVGの端が欠ける。 iOS/Macどちらでも発生する。 Safari以外は大丈夫。 同じSVG、同じスタイルでも使われている場所によって欠けたり欠けなかったりする。 元のSVGを適当なビューアで見ても欠けているわけではない。 Illustratorで線の位置を外側にしてしまって、外側にはみ出した分欠けているとかではない。 原因 SafariはSVGタグに overflow-x:...
View Article【CSS】Class名でよく利用する単語リスト
HTML, CSSを記述する際、CSS設計が大切ですが、 どのような単語で命名するかも重要だと考えています。 名前と機能の意味が推測しやすい単語を使い、 名前のつけ方にブレがないようにしようと思いつつも、 ついついその時々で違う単語を使ってしまうため、自分用によく使う単語をリストアップしました。 ブロック BEMのBlockで利用されるような名称 単語 意味...
View Article擬似要素の重なり順
擬似要素は親要素の上に重なって表示される。 親要素を上にしたい場合は、擬似要素のプロパティにマイナスのz-indexを追加する。 なお、親要素のプロパティにz-indexをつけてはいけない。
View Article【個人開発】さんまを焼くだけのアプリのさんまの焼き具合の調整方法についてまとめてみた
はじめに 以下のアプリについて、焼き具合の調整ってどうやってるの？と何人かに聞かれたので書くことにしました。 流れ まず、画像を全て重なるように、positionで指定して重ねます。 そしてz-indexで画像の優先順位を指定します。 そうすることで、一番上に表示されてる画像をcssのanimationとkeyframeを使って、徐々にopacity: 0;にすると下の画像が浮き上がってきます。...
View ArticleFrontend Roadmap 2021 で一人前のフロントエンドエンジニアになる
はじめまして、21新卒エンジニアです🐣 今年の4月からエンジニアとして就職して約半年が経ちました。 この半年間で自分の無知さを痛感しています。 そこで... Web Developer Roadmap Web Developer Roadmapとは、毎年ウェブエンジニアになるためのロードマップをまとめてくださっているプロジェクトです。...
View Article【第三回】コロナ禍だから何かできることをー 自宅療養者連絡ツール ー
前回までのあらすじ 【第二回】コロナ禍だから何かできることを 実装イメージ図 LINEを利用して保健所の担当者の負担を軽減するとともに、自宅療養者はいつでもつながっている安心感を持たせるためのツールイメージです。 まずはLINEからデータベースまでの流れを考えよう WebHookで取得したデータを解析して、メッセージの内容によって処理を分ける部分の説明をします。 今回はPHPで実装します。...
View ArticleCSS編 CSSの書き方
CSSの書き方について まずCSSを書く前にファイル名の後ろは.cssと書いて下ださい。これでCSSファイルが作成できました。 では本題に入ります、CSSファイルの先頭は＠charset "UTF-8"と書いてください。（書かなくても文字化けにならないかもしれないですが、 一応書いといてください。） 書き方は Pタグにクラス名がある場合は以下のようになります .Ptag { //この中に処理を書く...
View ArticleCSS: Typewriter effectが流行っているようだ
というものにあやかり。 Dev.To でTypewriter合戦が繰り広げられていた See the Pen CSS-only typewriter text animation by Alvaro Montoro (@alvaromontoro) on CodePen. 引用: Typewriter Effect with CSS - DEV Community 👩💻👨💻 Animated...
View ArticleH27国勢調査のODデータ（自宅外就業者数及び通学者数）をdeck.glで表示してみました
はじめに H27国勢調査のODデータ（従業・通学市区町村，常住市区町村，男女別自宅外就業者数及び通学者数）をdeck.glで表示してみました H27国勢調査のODデータ（従業・通学市区町村，常住市区町村，男女別自宅外就業者数及び通学者数）は、e-statより統計データをダウンロードして用いています。 deck.glの表示には、ArcLayer及びTextLayerを用いています。...
View Articleflexboxを用いたfooter最下部への固定方法
footerを最下部に固定できずお困りの方へ スクール時代にポートフォリオ作成の際、数人の方がこの問題に息詰まっていました。 この方法を教えたら一瞬で解決できましたので、同じようにお困りの方はこの方法をお試しください。 みんながよく使うfooterの固定方法...
View Article【第四回】コロナ禍だから何かできることをー 自宅療養者連絡ツール ー
前回までのあらすじ 【第三回】コロナ禍だから何かできることを 実装イメージ図 LINEを利用して保健所の担当者の負担を軽減するとともに、自宅療養者はいつでもつながっている安心感を持たせるためのツールイメージです。 取得したデータをもとに、データベースへの更新までの流れを考えよう 今回は、体温や体調の報告の場合はユーザー状態をDBへ保存する処理を説明します。 データベースはMYSQLを使用します。...
View ArticleまだWebページをピクセル単位でデザインしますか？
初めに 筆者はバリバリのデザイナーではなく、web経験が浅いことを断っておきたい。そのため、内容は現場の実情に合わない、空虚な理想論に終始してしまうだろう。その際はお気軽にコメントください。 ピクセル単位デザインが必要な場合 記事のタイトルはかなり挑発的だが、ピクセル単位のデザインが必要な場面は確かに存在する。...
View ArticleVueもReactもやったことないのでVanilla JSでやってみたSPA
はじめに まずは宣伝です。 このたび保育園を地図から探せる 保育園マップ というサービスを作りました。 WEB版 iOS版 Android版 Vanilla JSのSPAで作ったのですが、思いの外色んなことをやる必要があったので、制作過程で得た知見をこの記事にまとめました。 網羅的に書いたので長いですが、一つ一つのトピックはそれ程長くないので、興味があるところだけ読んでもらってもいいと思います。...
View Article【学習記録】HTML/CSS 10/4 ２日目
今日はほんとに少しだけです。 残業終わりの学習はしんどい… CSS HTMLと組み合わせて使用する。 Webページのスタイル（色・大きさ・配置など）を指定し、ページをデザインする言語 カスケーディング・スタイル・シート CSSの記述 基本書式 セレクタ{ プロパティ: 値; } 言い換えると どこの{ 何を:どうする; } 具体的には h1 { color:...
View Article【第五回】コロナ禍だから何かできることをー 自宅療養者連絡ツール ー
前回までのあらすじ 【第四回】コロナ禍だから何かできることを 実装イメージ図 LINEを利用して保健所の担当者の負担を軽減するとともに、自宅療養者はいつでもつながっている安心感を持たせるためのツールイメージです。 ユーザー登録の仕組みを作ろう LINE Developers LIFFアプリを開発する 今回はLINEbotの設定部分の説明 まずは、LINEbotの設定するパスから。 チャンネルの設定...
View Article主なMobile端末のViewportとメディアクエリチートシート
忘れがちなのでmemo 主なMobile端末のViewport css-media-queries-cheat-sheet.css
View ArticleCSS 画像や文章の感覚を均等にする方法
右端にマージンをかけたく無い時に使う /*小要素の３番目以外に有効*/ .class:not(:nth-child(3n)) { margin-right: 12px; }
View Article【CSS】macOSライクなプログレスバーを作る
1. はじめに macOSをBig Surでは、UIが大きく変更され丸みを帯びたデザインに統一されました。 また、要素のアニメーションも加わり、特にプログレスバーがなめらかに動くようになったのが印象的です。 そこで、CSSでも同じようなデザインで、滑らかに動くプログレスバーを作れないかと思い、実装してみました。 2. macOSでのプログレスバーとその動きとは？ A. 進捗の割合がわかる場合...
View Article【学習記録】HTML 10/5 ３日目
平日はなかなか厳しい。 負けずに続けます。 CSSで文字の大きさを変える font-sizeプロパティを使う 単位はpx h1{ color: #ff000; font-size: 10px; } 文字種類（フォント） font-familyプロパティを使う フォント名にスペースがある場合は、” “ で括ること h1{ font-family: serif; }...
View Article