初心者によるプログラミング学習ログ 232日目
100日チャレンジの232日目twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。すでに100日超えましたが、継続。100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。232日目はおはようございます232日目・MySQLを自分のパソコンに導入・udemyでcss+javascript講座#早起きチャレンジ#駆け出しエンジニアと繋がり...
View ArticleFlaskでWebアプリ開発中にCSSが反映されない問題を解決する
FlaskでWebアプリを開発している。その際、WebブラウザにCSSがキャッシュされてしまう問題に、どう対処するか考えてみた。HTML内でCSSをリンクする際、style.css?v=12などのように手動で、更新日時やバージョンを付け加えている場合がある。しかし、せっかくPythonを使っているので、これを自動で解決してもらいたい。模範解答検索してみると模範解答は、以下のように、url_forを書...
View Article特定要素のwidth基準のサイズ指定 by css&js
vwは便利ですけど、画面全体の幅基準なので、responsiveに幅の変化する要素を基準にはできませんね。以下はそれをjsで実現するものです。css:root{--base1:0;}.title-box{position:relative;}.welcome{font-size:calc(var(--base1)*8vw);margin-top:calc(var(--base1)*17vw);}.t...
View ArticleFLOCSS設計ってどんなんだっけ？となった時に思い出せる簡単なメモ
概要Found Layout Object CSSの略で、OOCSSやBEM、SMACSSの流れを受けて考案されたCSS設計思想FLOCSSFoundationサイト全体のデフォルトスタイルを定義する_reset.scss, _base.scss, _mixin.scss,...
View ArticlejQueryにおけるthisを使用する理由
個人的メモなので悪しからず。main.js$(function(){$('#header').on('mouseover',function(){$(this).css('color','#333');});});例で使われているon()メソッドのようにメソッドの第2引数に命令を渡すメソッドではその命令内でthisを使用できます。なので上記のコードで使われているthisには#headerが格納されて...
View ArticleClik here to view.
Safariで別ページからのページ内リンクの位置がずれる問題はJSの影響だった
スマートフォンのコーディングをしていた時、別ページからのページ内リンクを実装していたら、一部リンクのみ勝手に1000pxくらい下にスクロールされて、位置がずれてしまった。すでに実装してあったJSを全て削除してから試してみると、ちゃんと動いたので、 JSの機能を一つずつコメントアウトしてクリックを試してみたところ、...
View ArticleClik here to view.
Webサイト制作で役立つカラーコードサイト5選
1. FLAT UI COLORS 2FLAT UI COLORS 22. ColorColor3. Color HuntColor Hunt4. Color Palettes Color SchemesColor Palettes Color Schemes5. HTML Color PickerHTML Color Picker
View Article個人的にオススメしたいTech系YouTuberたち
僕は普段から『Qiita』以外にもプログラミングの情報収集を『YouTube』で行っているので今回は個人的にオススメしたいTech系YouTuberの方々と彼らの動画ベスト③を紹介していきたいと思います！(独断と偏見が入っています笑)①KENTA /...
View Articlevisual studio code ショートカット Ctrl+/ が作動しません
visual studio code ショートカット Ctrl+/ が作動しません。スクリーンショットのEditメニューを見るとCtrl + /にはきちんと割り当てられているのですが、ショートカットキーが使えないと困ります。どういった対処方法があるでしょうか。 visual studio code を再インストールするとかになってしまうのでしょうか？ PCは LENOVO...
View Article【WordPress】 Gutenberg関連のCSSまとめ
はじめにGutenberg（ブロックエディタ）対応のテーマを作成するために、CSSを設計しようと思ったのですが、読み込まれるCSSの数が多いどのように読み込む/読み込まれるのかフロント側、エディタ側どちらで読み込まれるのかなどこんがらがるポイントが多かったので、まとめてみました。style.min.css{wp_dir}/wp-includes/css/dist/block-library/styl...
View Article個人的にオススメしたいHTML/CSSの学習教材
この記事では僕が今まで購入してきた中で個人的にオススメしたいHTML/CSSの学習教材を三つ紹介していきたいと思います！①よくわかるHTML5＋CSS3の教科書➡https://www.amazon.co.jp/よくわかるHTML5-CSS3の教科書【第3版】-大藤幹/dp/4839965471HTML/CSSを学ぶ人が最初に取り組むのに個人的にオススメな一冊です！内容自体が教科書みたいな感じでHT...
View ArticleClik here to view.
未経験から始めるHTML/CSS ~float編~
はじめに2020年2月より未経験ながらHTML/CSSをProgateにて学習を開始ました。その中で、HTML/CSSを学習するに当たって私自身が疑問に思ったことを纏めてみました。私が疑問に思った事が、今後お互いの学習に役立てれば良いと考えqiitaを始めました今回はその2回目、floatについて説明して行きます。対象者ProgateでHTML/CSSを学習中の方自己紹介こんにちは。私は現在27歳で...
View ArticleClik here to view.
未経験から始めるHTML/CSS ~float解除編~
はじめに2020年2月より未経験ながらHTML/CSSをProgateにて学習を開始ました。その中で、HTML/CSSを学習するに当たって私自身が疑問に思ったことを纏めてみました。私が疑問に思った事が、今後お互いの学習に役立てれば良いと考えqiitaを始めました今回はその3回目、float解除について説明して行きます。対象者ProgateでHTML/CSSを学習中の方自己紹介こんにちは。私は現在27...
View Articleこれからの時代、CSSではなくSCSSを使おう
前書きCSSは計二回のアップデートにより、様々な特殊かつ高度なデザインが可能になりました。しかしその反面、理想とするデザインを実現するためには面倒な微調整を何回も繰り返さなければなりません。ところが最近、"Sass"というデザイン業界の常識を覆す(というほどでもない)新たなスタイル記法が開発されています。...
View ArticleClik here to view.
ScrollReveal＋CSSアニメーションでWebページをちょっとだけオシャレにしてみる
この記事は「納期1日だけどオシャレなアニメーションもつけてイイ感じにして」と言われた人間が、頑張って工夫したことをまとめたものです。タイトルにあるScrollRevealとはScrollRevealはスクロールアニメーション系のJavascriptライブラリです。...
View ArticleChrome version 80 以降 grid-layout の 1fr の挙動が変わります
TL;DRChrome 80 以降は grid 項目に最小値が設定されていないと、表示崩れが発生する場合があります。具体的には grid-template-columns 等に 1fr で指定している箇所が影響します。回避方法: 下記のように、minmax...
View ArticleRailsで個別にCSSを適用させる方法
結論config/initializers/assets.rbに 'Rails.application.config.assets.precompile += %w( user.css...
View ArticleCSSぴえんチャレンジ
CSSぴえんチャレンジって何？正確には「HTMLとCSSでぴえんの絵文字を再現できるか」というチャレンジを勝手に作って勝手にやりました。ぴえんの絵文字がわからない？チャレンジ結果をご覧ください。チャレンジ結果 See the Pen pien by niko (@rorome15nikomu) on CodePen. ＿人人人人人人人人人人＿＞ これがぴえんだ！...
View ArticleClik here to view.
Vue.jsでのdeep selectorの書き方
久しぶりの投稿です。備忘を兼ねて簡単に書きます。deep selector？Vue.js でscoped付でstyle を書いている場合に、そのコンポーネントの子コンポーネントにもstyleを追加したい場合に使用するcss のセレクターの書き方です。書き方.hoge >>> .huga{...}...
View Article
