Git
保護中: 【Git,WordPress】どこまでをGit管理するのか
tanatiyo
Web制作の勉強 別の場所でも編集できるようにGitHubFlowを取り入れてみる
しょーごさんのコーディング課題【中級Ex編】に取り掛かる前に一応Gitの知識と簡単な設定はしておきましたが、実際は毎日「git add」「git commit」「git push」だけしかしていません。一応、ソースコードの管理はGitHub...
CSS フォームの送信ボタンを中央揃えする時に少しハマりました・・・
初級の時にも、はまっていた記憶があります。備忘録として残しておきます。フォーム部品などに使われる送信ボタンのbuttonやinput。それ自体に「margin： 0 auto;」を一生懸命指定しても思ったような挙動にはなりません。これらを中...
JavaScript Vue.jsの次はNuxt.jsについて調べてみた-メモ用です-
参考サイトをもとに自分なりにまとめました。勉強用です。Nuxt.js「ナクスト」とは、Webアプリ開発の機能が最初から組み込まれているVue.jsベースのJavaScriptフレームワーク。UIなどフロントエンド向けのフレームワークであるV...
JavaScript JavaScriptフレームワーク-気になったので調べてみた-
参考サイトをもとに気になる記事をまとめました。メモ用です。■フレームワークとライブラリの違いライブラリ・・・汎用性の高いプログラム(コード)パーツのコレクション。クラスや関数を、それぞれの機能をもつパーツとして使い回す。よく使うパーツを集め...
CSS flexbox使用時に各item(子要素)間の余白を調整したい
flexboxを用いている時に、flex-item間、つまり子要素間の余白を取るときはgapという方法があるそうです。例えば、横向きで並んでいる場合(デフォルト時)にとすると、縦方向に20px、横方向に30pxの余白をとってくれます。mag...
JavaScript フォームで日付を選択できるflatpickrを初めて実装しました【エラー対応中】
今取り組んでいる課題からflatpickr(軽量 & 外部ライブラリの依存が無いjavascript製ライブラリ)なるものを実装することになりました。公式サイトはどうやら英語なのですが、「にほんご。」に訳してくれた方々がいらっしゃるようです...
CSS fontのMediumってどう指定するの？
font-weightがbold以外の時、例えばMediumとかLight、ExtraBoldなどに出会ったことはありませんでしょうか。実はこれ、font-weightに数字を指定して実装できます。対応表がMDNのサイトに載っています(↓【...
JavaScript 【複数ページの動的コーディング】1つのjsファイルにまとめていたらエラー出現【解決済み】
現在、取り組んでいるしょーごさんのコーディング課題【中級Ex編】は下層ページを含めて4ページを作成します「。今、動的なコーディングを実装していっていますが、様子をみるため1つのjsファイルにまとめてコーディングしていました(一応webpac...
CSS モーダルウィンドウを実装する時に参考にしたサイト
モーダルウィンドウも、初級から中級編に入ったばかりのころに勉強していましたが、今回少し忘れてしまっていました。下記のサイトで記憶を戻しつつ、静的サイト部分は完成しました。下記サイトは今取り組んでいる課題のようにフォームが浮かんでくるわけでは...
CSS fv画像をぴったりあてはめたい時、画像下に余白が出来た
久しぶりにfvｎ背景画像を充てるところで時間がかかってしまいました。普通に画像をはめ込むだけでは、拡大して少し左よりになったとように感じますbackground-size: cover;だと思って、指定するものの、今度は画像下側に大きく余白...
HTML 画像の出し分けについてちゃんと向き合う
恥ずかしい話ですが、独学を始めた当初から、画像に関してはfigureタグとimgタグだけでここまできました。しかし、本来であればsrcsetタグなどを用いて、レスポンシブ幅に応じて画像の出し分けをきちんと行わないといけません。もともと、コー...
Web制作全般 スニペット集をゆくゆくは作成したい
学習も後半に差し掛かっていて、営業を見据えた時に自分のコーディングの速度を上げるために、実装したいコードを見てから、コードを書き始めるまでの時間はより少なければ少ないほど良いですし、さらにCSS設計的にも強いものをかければいうまでもありませ...
pug Pugでインライン要素のspanタグの書き方
pugを用いてコーディングを行う際に、インライン要素であるbrタグの書き方に少し苦労しました。調べたところ、同じインライン要素であるspanタグは以下のように書くそうです。==========↓原文ママ↓==========パイプライン（|...
CSS レスポンシブ対応するためにmax-widthの指定を解除する方法
よく使うmax-widthですが、レスポンシブ対応の実装をしている時に「そういえばmax-widthを解除する方法ってどうやったっけ？」と考え込んでしまったため、調べたことをメモで残しておきます。今回お世話になったサイトでは、widthとh...
pug PugとSassのバランス
今現在取り組んでいるしょーごさんのコーディング課題【中級Ex編】からpugを取り入れCSS設計はFLOCSSを採用してみています。「修正が入った場合を想定して」コーディングするように今回は意識をしてディレクトリ構成などをpugもうまく取り入...
CSS ナビゲーションメニューを縦書きで実装する際、上揃えのために指定したCSS
縦書きの実装の際に、CSSで「writing-mode: vertical-rl;」とすることは以前のブログ記事でも書きました。指定した後、メニューのうち文字数が比較的少ないものはインデントが出来てしまいました。出来ればこれを上揃えにして見...
CSS 子要素にbox-sizing:border-box;を指定しているのに親要素をはみ出してしまった時に対処したこと
画像とテキストを少しずらして重ねてあるプロジェクト部分の作成中にはまってしまった場所なので、メモ。レスポンシブ対応中に、タブレット領域部分で右側に余白が出来ていることを確認。↓すぐさまデベロッパーツールにて検証開始。↓すると子要素で親要素か...
技術メモ Pugでインライン要素
を表現したい
pugで改行する時、エラーが発生したので備忘録としてメモしておきます。「br」＋改行＋「｜(パイプ)」＋半角スペース【参考サイト】
Web制作の勉強 動画1.5倍速と大活躍のワイヤレスイヤホン
おはようございます。現在1:39。今から朝活で積み上げます。codolife7期生として無事にcodolifeに合流できました。今までずっと独りでやってきて、やっぱり一緒に頑張る仲間がいることは素直に嬉しいです。また、codolife内で毎...
HTML HTMLのdata属性について調べてみた
コーディング課題【中級Ex編】取組み中のメモ。今回はdata属性について調べたことを簡単にメモしておきます。data属性はタグの中に「data-**="****"」(**は自由につけられる)と記述して使用↓このdata属性ですが、「特定の要...
HTML buttonタグのaria属性が気になったので調べてみた
私がこの属性を発見したのはハンバーガーメニューですが、FAQページでよく見かける開閉パネルにも実装されていることが多いそうです。この属性を調べていくうちに「WAI-ARIA」(ウェイ・アリア)という単語が何度も出てきました。「Web Acc...
Web制作全般 【中級Ex編】でコーディングの流れを参考にしている本
中級編のsassの勉強でお世話になった↓の本。ディレクトリ構成なども参考に進めていましたが、特にコーディングの流れなどを一から丁寧に解説されていて、とても分かりやすいです。CSS設計思想は、私は今回FLOCSSを取り入れているので、クラス名...
CSS CSS-縦書きの実装
久々に縦書きの実装をしようと思ったら、いろいろと忘れてしまっていたので、調べたことを備忘録として残しておきます。〇縦書きのコーディングは、「writing-mode」プロパティを使用使う値は、「vertical-rl」でこの「rl」は右から...
gulp 「npm run 〇〇」したら「’NODE_ENV’ は、内部コマンドまたは外部コマンド、 操作可能なプログラムまたはバッチ ファイルとして認識されていません。」と表示された時に対応したこと
今回は、npmでgulpやsassのコンパイルをしている時に起こったエラーに対してやったことを記録しておきます。以前の記事でも紹介した「のせっち」さんのBrainを参考にしてgulpを用いてコーディングを行っています。タイトルの通り、「np...
JavaScript javascriptのオブジェクト、関数、クラス、インスタンス、コンストラクタ
勉強用のメモです。【オブジェクト】・・・配列と同じく複数のデータをまとめて管理するもの。プロパティと値がセット。{プロパティ01:値01, プロパティ02:値02}。【関数】・・・いくつかの処理をまとめたもの。【オブジェクトと関数】・・・オ...
HTML HTMLのonclick属性とは
他の方のコードを見ていて、buttonタグにonclick属性が設定されていました。勉強用メモです。気になったことを調べてメモしています。【onclick属性とは】・・・ユーザーが要素をクリックしたときに起動する処理を指定するイベント属性。...
デザインカンプからのコーディング【練習】 作業環境への留意～ブラウザ編～
しょーごさんのコーディング課題【中級編】に取り組んでいる最中は、ブラウザのタブを開きすぎたり、どこからどこまで作業を終えているのか分かりにくかったりしていました。作業のしづらさも覚えてストレスも感じていました。なかなか作業効率が良いとは思え...
CSS CSSのクラス名にはいつも迷わされます
毎回、コーディングする時にどんなクラス名にしようか迷ってしまいます。とりあえず、皆さんがつけているクラス名を参考にしながら、できるだけ分かりやすいクラス名をつけていこうと思います。今回のコーディング課題【中級Ex編】でクラス名をつけるのに参...
pug pugファイル内のコメント記述には注意
以前、pugを初めて学習する段階でも一通りまとめていましたが、何回かエラー表示を繰り返してしまったので、備忘録として残しておく。pug内でコメント表示にする際は「//-」を使う。CSSやJavaScriptでよく使う「//」だけと勘違いして...
CSS 命名規則はBEM/mindBEMdingをベースに行ってみる
前回の記事でFLOCSS設計思想に基づいて、CSS設計を行っていくという話をしました。そちらで参考サイトの方は、命名規則をBEMMindBEMdingで行っているとのことでしたので、早速調べてみました。下記サイトが分かりやすかったので参考に...