Clik here to view.
Clik here to view.
Vue.jsの始め方#2(html/css/js/jQueryがある程度わかる方向け)
Vue.jsの始め方#2(html/css/js/jQueryがある程度わかる方向け)前回はこちらVue.jsの始め方#1(html/css/js/jQueryがある程度わかる方向け)データバインディングとは？データバインディングとは一言でいうとデータと描画を同期する仕組みですまずは簡単な例を見てみましょう。以下はvue.jsを利用したバインディングです。JQueryで記述すると以下です。比べるとv...
View ArticleHTML&CSS復習課題
header { width: 100%; height: 60px; background-color: black; }.logo img { max-width: 280px; height: auto; }header ul { float: left; line-height: 40px; margin-bottom: 12px; }header ul li { float: left;...
View ArticleHTML&CSS 練習/float/header
header { position: absolute; top: 0px; left: 0px; width: 100%; height: 55px; background-color: navy; color: white; }.abc { float: left; width: 233px; padding-left: 11px; font-size: 24px; line-height:...
View Articleインライン要素ブロック要素
ブロック要素は自動的に改行されるので横並びにするにはfloatを使用する必要がある。インライン要素は、自動的に改行されるので横並びとなるインライン要素を改行させたい場合は div p display:block ul li を使用。displayプロパティとはある要素をブロック要素に変更したりインライン要素に変更したりするものdisplay:block;テキスト画像などのインライン要素を...
View ArticleClik here to view.
読書管理リストを作ってVue.jsの基礎を学ぶ
はじめに最近フロントエンドの基礎をかじったので、Vue.jsを使ってアウトプットします。基礎的な文法だけで作っていきます。Vue.jsに関する解説も記述していきます。冗長な部分もありますが、ご容赦ください。...
View ArticleインターナルCSSをワンライナーのPHPでミニファイする
HTMLの<head>タグ内に<style>タグで記述されたCSSを「インターナルCSS（Internal CSS）」と云う。ちなみに、逆に<link>タグで外部から読み込むCSSを「エクスターナルCSS（External CSS）」と呼ばれ、直接BODY内の要素にstyle=""属性でスタイルを指定することは「インラインスタイル（Inline...
View Article中央寄せ
webページで各要素を横の中央にはいちしたい場合には、「margin:0 auto」や『text-align:center;』を使用します。１．テキストや画像などのインライン要素を中央寄せにしたい場合ブロック要素化する display:blockなどで囲む divやｐも２・そのブロック要素事態を画面の中央にしたい場合ＣＳＳファイル内でブロック要素に margin; 0...
View Articlefooterのデザイン
position absollute VS ブロック要素解説 footerを作るとき、必ずしも「position absolute」を使用する必要はありません。2番の場合はposition absoluteは使用しないほうが良いでしょう。１．footerにposition absoluteを使用するときメインコンテンツの量が デフォルトのブラウザ画面の高さ ＞ コンテンツ量...
View Articlehtml cssの呼び出し
要素で外部CSSファイルを呼び出して適用するスタイルシートを記述したCSSファイルをHTMLファイルとは別に作成して、HTMLファイル内から呼び出します。 呼び出しには、HTML文書の要素内に要素を記述して、外部CSSファイルを指定します。 適用されるスタイルがCSSによるものであることをブラウザなどに知らせるために、要素のtype属性の値にはtext/cssを指定します。...
View ArticleCSSでselectboxを装飾する方法
はじめにcssでセレクトボックスを装飾するexampleです。デフォルトのselectboxだとなんとなく味気がないと個人的には感じているので、cssで装飾するのが好みです。ネットでいちいち検索するのも面倒なのでメモもかねて。select{ font-size:12px; border:2px solid #ddd; border-radius: 4px; height: 25px; }
View ArticleClik here to view.
親子で餃子作りが流行っているので、色々なハンバーガーボタン作ってみた！
コロナ騒動のため、親子で餃子作りが流行っているということなので、ソロで色々なハンバーガーボタンを作ってみました。ハンバーガーボタンなら愛くるしい子供がいない、むさ苦しいおっさんでも作れて安心です。材料が売り切れで困ることがないどころか、材料費0円です。ネタっぽいふいんき（変換できないぞ！）だけど、実用的な記事だぞ！FontAwesome産ハンバーガーボタンFontAwesomeでクリックすると≡、×...
View Article🥺 with CSS
🥺🥺な気持ちなので🥺をCSS(SCSS)で描いてみました。 See the Pen Pleading Face emoji "Pien" by wasshoy (@wasshoy) on CodePen. 作り終わって気づいたら夜になっていました。🥺ぴえん手順解説パーツ分けまず、作るパーツを分けました。 - 顔本体 - 右目 / 左目 - 右眉 / 左眉 -...
View ArticleClik here to view.
Vue.jsの始め方#3(html/css/js/jQueryがある程度わかる方向け)
Vue.jsの始め方#3(html/css/js/jQueryがある程度わかる方向け)前回の記事はこちらVue.jsの始め方#2(html/css/js/jQueryがある程度わかる方向け) 今回もディレクティブについて紹介します。条件分岐 v-showindex/html<divid="app"><pv-show="toggle"> Hello...
View ArticleClik here to view.
Vue.jsの始め方#4(html/css/js/jQueryがある程度わかる方向け)
Vue.jsの始め方#4(html/css/js/jQueryがある程度わかる方向け)前回の記事はこちらVue.jsの始め方#3(html/css/js/jQueryがある程度わかる方向け)双方向データバインディング v-model双方向データバインディングでは...
View ArticleClik here to view.
Vue.jsで作るtodoアプリ
Vue.jsで作るtodoアプリ前回の記事はこちらVue.jsの始め方#4(html/css/js/jQueryがある程度わかる方向け)これまで紹介したディレクティブを使って簡単なtodoアプリを作ってみましょう。下記が完成品です。ページのリロードをせずにタスクの追加・完了・削除ができよう実装します。※タスクの保存はしない仕様とします。空のVueインスタンスとテンプレートの作成まずはhtmlとjsシ...
View ArticleClik here to view.
[CSS]取り消し線を要素全体に引く方法
概要最近ToDoリスト的なものを作っていて、完了したアイテムに取り消し線を引きたいと思いました。単純に<del>やtext-decoration:...
View Articlerails newのやり方
rails で新しいアプリケーションを作るときの方法前提 Ruby 2.5.1 Rails 5.2.31.rails new$：rails version new アプリケーション名 -d mysql 2.作ったディレクトリに移動$：cd ~ 3.DBの準備rails db:create 4.ブラウザを開き確認rails s 完了です！
View Article