Vue.jsテンプレート構文
Vue.jsテンプレート構文前回の記事はこちらVue.jsで作るtodoアプリ今回はVue.jsのテンプレート制御ディレクティブについてです。jsfiddleで実際に記述しながら読むことをおすすめします。代表的なテンプレート制御ディレクティブv-once 初回だけバインディング v-pre 要素とすべての子要素のコンパイルをスキップ v-html プレーンなhtmlを挿入 v-cloak...
View Article【HTML/CSS】タグ・プロパティの読み方・略・意味をまとめてみた
はじめに英語が大の苦手である私がプログラミング学習で苦戦したのが、タグやプロパティ、メソッドなどの読み方です😢(現在進行形)プログラミング学習始められた方の参考に少しでもなれれば嬉しいです🐱🍒今回はHTMLのタグ、CSSのプロパティの読み方などをまとめていきます!※読み方は発音などにより違うことも大いにありますので、100%正解ではないです🙇♀️HTMLのタグ/CSSのプロパティ!DOCTYPEド...
View Articleメニューの開閉を画面全体で行う
目次完成形のDemo解説(図解)リポジトリあとがき完成形のDemoBeforeAfterhttps://github.com/taiki-fw/Qiita/tree/2ed5117ff03b09ea62b020bf21be5797995fc10dhttps://github.com/taiki-fw/Qiita/tree/e9456566515908ffca737ce3c18ee3ab9502684...
View ArticleCSS 基礎・基本 display #7
今回は前回に引き続き、ページレイアウトに必要なdisplayを学習していきます。最近は、少しさぼり気味な勉強です。これからも、頑張っていきましょう。今日も、勉強ノートをここにまとめていきます。displayプロパティ基本的なdispalyプロパティについて学ぶblockdisplayプロパティは、レンダリングの際に利用する要素のボックスの種類を指定するプロパティです。displayプロパティを利用し...
View Articleとにかく基本無料のHTML・CSS・JavaScriptが学べるサイトをまとめた
はじめに何故だかこの前書いたとにかく基本無料のPython・機械学習が学べるサイトをまとめた↑この記事が伸びたので、JSの方でもやろうと思いました。前回と同様、簡単な説明だけで、有名なサイトは紹介していません。コメントでサイトを紹介してくれると嬉しいです。ブログも紹介しています。行きます。Codeprep形式:演習料金:全て無料...
View ArticleVue.jsで使えるjavascript式とフィルタの使い方
Vue.jsで使えるjavascript式とフィルタの使い方前回の記事はこちらVue.jsテンプレート構文javascript構文の使用についてjsfiddleで実際に記述しながら読むことをおすすめします。Vue.jsではデータバインディング内でjavascript式を使用することができます。下記のコードを実行しましょう。index/html<divid="app"><p>&...
View ArticleCSS 基礎・基本 position #8
今回もwebフロント技術を身に着けるために勉強したノートをここにまとめていきたいと思います。また、ページレイアウトの一つであるpositionについて、様々なpositionの指定方法などを学んでいきました。戻ってきたよ様々なpositionの指定方法staticpositionプロパティは要素の位置を調節するためのプロパティです。また、すべての要素に対して適用可能です。positionプロパティの...
View Articleコメントアウトの記述(HTML,CSS,JavaSprict,Ruby)
はじめに自分が学習している中で、言語ごとにコメントアウトの方法が違うためまとめます。HTMLindex.html<!-- ここに書く --><!-- 改行するなら こんな感じで書きます。 -->CSSmain.css/* ここに書く *//* 改行するなら こんな感じで 書きます。 */JavaScriptmain.js//ここに書く/* 改行するなら こんな感じで...
View ArticleCSSの書き方
idとclassid:同一のid名が、同じページ内に存在できない idの場合はCSS内のセレクタは「#」から始めるclass:同一のclass名を、同じページ内に存在させることができる classの場合はCSS内のセレクタは「.」から始めるmargin要素の外側の余白。margin: 上下左右; margin: 上下 左右; margin: 上 左右 下; margin: 上 右 下 左;...
View Article【CSS】backgroundのimgで画像の中央を表示させる方法
centerを付与する以下のようにcenterを付与すれば、画像の中央が表示されます。background: url(images/bg.jpg) no-repeat center;
View Article【Rails】ブラウザによるフォームのバリデーション機能を無効にしたい
フォームに全角で入力したメールアドレスを半角のものに正規化する機能を実装して確認してみたところ、ブラウザ側のバリデーション機能が先に作動して画像のようになりました。今回ブラウザ側のバリデーションは不要なので、ビューファイルのフォーム(form_with)にブラウザ側のバリデーションを無効にする設定(novalidate)を記載しました。<%= form_with model:...
View Articlecssで画像を中央寄せすることに苦戦した話
はじめにフロントエンドのコードを書いていて、画像を中央寄せにすることに苦戦したので忘備録と共有を兼ねて記事にしました。何番煎じかわかりませんが、誰かの助けになったら幸いです。この記事の目標以下のhtmlのstyleを書いて、画像を中央寄せにしたいです。動作確認はGoogle...
View ArticlescrollMagic.jsで スクロールしたら fadein させるの作ってみた
やりたかったことスクロールしたらfadeinする簡易なアニメーションの設置方法一定の位置にスクロールしたらdata属性の中身を変えてCSSに変化をつけるやることyarnyarn add scrollmagic...
View Article初心者によるプログラミング学習ログ 306日目
100日チャレンジの306日目twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。すでに100日超えましたが、継続。 100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。 306日目はおはようございます306日目 6~8h・xdデザインカンプからのサイト模写(メンターさん課題)6~7h・xdデザインカンプからの架空LP模写...
View ArticleBootstrapに負けてCSSが反映されない?
CSSにスタイルを記述してもスタイルが反映されない...head部分の書き順を確認してみましょう。cssのlinkの後にbootstrapのcssが記述されていませんか?headタグの中に書いた記述は上から順に反映されていくので、後から記述したものの方が優先されます最後に反映したいものを考えて記述していきましょう。
View ArticleCSSで華やかなサイトにしたい④~レイアウトを組む(幅、高さ、余白、レイアウト編)~
レイアウトを組むレイアウトとは、掲載する様々なコンテンツを、ユーザーが使いやすいようにどう配置するかを設計することです。デザインする上で大切なところになってきますので、順を追って学習を進めていきましょうレイアウトを組む時に、各要素をブロック要素でまとめます。その際に必要な知識、幅や高さの指定、余白の調整についても今回学習していきましょう。今回の記事幅と高さを指定しよう...
View Articlegithub + Netlify + ムームードメイン(独自ドメイン)でホスティングする
この記事を読んだら分かること・ムームードメインで取得したドメインでNetlifyの設定が出来る起こった問題・ムームードメインで取得したドメインを使ってもNetlifyで独自ドメインの設定・https化に成功しない原因・ムームードメインでネームサーバーを抑えられているため、Netliy側ではホスティングが出来ないから対処方法・Netlifyの設定 Settings→Domain...
View Article