Clik here to view.
JavaScriptでプレビュー機能 onKeyup onchange
プレビュー機能作成プレビュー機能とは(名前が正しいかわかりませんが)、Qiitaの投稿時の右側の画面のように、入力すると非同期で表示がされる機能のことです。ブログ記事を書く際や、マークダウンでの記述の場合はよく使用されますよね！今回は基礎ということで簡単なプレビューを作成致します。完成品HTML5<!DOCTYPE...
View ArticleClik here to view.
Electronでカレンダーを作る④
前回まで前回は月の切り替えボタンを作った。月を変えても、表示内容の変更だけで同じ画面を使い続けるので微妙。月を変えたら画面自体を新しく作り直したいというわけでindex.jsをいじって、読み込みごとにカレンダーを作るように修正。index.js'use...
View Article初心者によるプログラミング学習ログ 268日目
100日チャレンジの268日目twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。すでに100日超えましたが、継続。 100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。 268日目は、おはようございます268日目・webサイト模写・下層ページ...
View Article[Javascript] 要素の外側をクリックした時にremoveする
概要例えばモーダルウインドウには×で閉じるボタンがレイアウトされている事が一般的ですが、ユーザビリティを考えると、ボタン以外でも閉じられるようにしている事が望ましいですよね。だからといって、どこでもクリックすれば閉じられるような処理では、そもそも閉じるボタンの意味がなくなってしまいます。今回はクリックイベントで付与したクラスを、反応させたくない要素の外側かを判定して取り除く処理になります。あくまで私...
View Article初心者によるプログラミング学習ログ 269日目
100日チャレンジの269日目twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。すでに100日超えましたが、継続。 100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。 269日目は、おはようございます269日目・webサイト模写・下層ページ...
View ArticlejQueryでFlash, error_messageを閉じる方法(Bootstrap xボタンが反応しない場合)。
はじめにBootstrapのflash,error_messagesなどに使われる<div class= "alert...
View Article初めてのレスポンシブ
初めまして初めての投稿でして、先輩方よろしゅーおねがいします。昨今の様々なニュースと機械学習組み合わせるときっと楽しんだろうって思ってsakura vpsでサイト立ち上げて...
View ArticleClik here to view.
要素の配置するためにかなり便利なCSS機能、、position
初めに、、日本語に翻訳するとposition ＝ 場所 absolute ＝ 絶対 relative = 相対的です使い方今回は、白い箱を基準に動かしていきますデフォルトでは、top:0px;・left:0px;のところに配置されている指定なしの場合position:relative; 赤いprodactをrightに200px動かすと、、position:relative; right:0px;...
View Article謎の余白の正体 CSS編
余白ができた原因・要素が二重で反映されている・親要素からはみ出ている・ファイルがダブっているここら辺を確認すると解決できます今回の謎の余白問題私の場合、子要素に、親要素あてにfloat:left;を指定したことによって、、、小要素が親要素から横幅が出たことによって生じた現象でしたまた、この謎の余白は、、、検証ツールでは指定できませんここが、また厄介なところです。。
View ArticleClik here to view.
Electronでカレンダーを作る⑤
前回まで前回はカレンダーの表示月を切り替えたら画面も切り替わるようにした。ただ、切り替える度に画面更新で数秒真っ白になるのでダサかった。レスポンシブルな感じのUIにしたい。HTMLを最小限にするHTML内にカレンダーの構造をそのまま書いているのでこれをごっそり削って最小限の記述にする。カレンダーの構造自体はJavaScriptで作っていく。beforeindex.html<!DOCTYPE...
View ArticleClik here to view.
Python スクレピング 競馬サイトから出走馬の過去成績を取得
背景現在、競馬×機械学習のために、ウェブページから競馬情報をスクレイピングすることに取り組んでいます。入力内容に出走馬の過去の成績を組み込もうとしています。そこで競馬のレース結果表から出走馬のページのURLを取得、アクセスし、出走日の過去の成績を取得することにした。構想サンプルコードアイデアは以下の3点。・取得方法をCSSセレクターで統一・レース結果表から各馬のURLを取得し、そのURLに掲載されて...
View Article初心者によるプログラミング学習ログ 270日目
100日チャレンジの270日目twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。すでに100日超えましたが、継続。 100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。...
View ArticleUIkit3の拡張用CSSファイル(UIkit Plus α)を公開してみた
最近Web開発をする際のフロント側のCSSフレームワークに、UIkit3をよく使用しています。(特に指定が無い限り)個人的にBootstrapやMaterializeなどいろいろと使ってきましたが、自分的にこれが一番使いやすかったので。(あとデザインが好き)ただしUIkitのみで全てを賄える訳ではもちろんないので、必要に応じて独自のCSS定義を追加するのですが、そういった時には決まって、そういえば以...
View ArticleClik here to view.
CSS練習問題 #001 ～見出しを作ろう～
4月からサンシーアに入社するメンバー用にCSSの練習問題を作成しました！CSSでどんな事が出来るかが分かれば検索のコツも身につき、いっきに初心者から中級者に近づけます。「画像を使わなくてもいろいろな表現ができる」ということが体感できると、視野が広がってCSSが楽しくなってくるかもしれません各問題の右上にあるこのロゴをクリックすると、自分で手を動かして実際に仕上がりを確認しながら問題に取り組めます。※...
View ArticleFlexの覚書
はじめにこれはFlexのチートシートとしての覚書。親要素に設定flex-direction小要素の並びの向きを決めるrow（デフォルト）横向き 向き：→row-reverse横向き 向き：←column縦向き 向き：↓colmn-reverse縦向き...
View Article【StyledComponent + CSSアニメーション】keyframesに引数をつける
StyledComponentを使ってCSSアニメーションを作る時に使うkeyframesに引数を渡して動的にアニメーションを調整する方法を、忘備録として。結論こんな感じ。keyframesimport{keyframes}from'styled-components'exportconstzoomInToAnyScale=(num:number)=>keyframes` from {...
View Article初心者によるプログラミング学習ログ 271日目
100日チャレンジの271日目twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。すでに100日超えましたが、継続。 100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。...
View Article
