PHPができないなりに、お問い合わせフォームに動きをつけてみた
はじめに現在ポートフォリオサイトを作っており、そちらに掲載するためのサイトを作成しているのですが、自分はPHPが使えないので、お問い合わせフォームに実際に送信させる機能をつけることができないのですが、それではあまりにも寂しいなと思ったので、入力して送信ボタンを押した後、また、入力して欲しい項目が未入力だった時に、JavaScriptを使って何か反応が起きるようにしてみました。JavaScriptのコ...
View ArticleTypeScript + React + WebpackでCSSを使う（短いです）
css-loaderとstyle-loaderパッケージをインストール$ npm install style-loader css-loader --save-devwebpack.configにcssのためのルールを追加... rules: [ ... {test: /\.css$/, loader: ['style-loader', 'css-loader']}, #...
View Article背景を複数の選択肢からランダムで表示する
完成物 See the Pen random-background by ririli (@ririli) on CodePen....
View Articlefitieが動かないきみへ
要するに、jsであとから追加したものには適用されないthis.fitie(document.getElementById('hoge'));ajaxとかなんとかかんとか使ってるとこだと$('img.hoge').bind('load',function(e){window.fitie(e.target);});ってすると幸せになれるかもしれない
View ArticleClik here to view.
marginとpaddingって結局どっち使えばいいんだっけ
たまに扱うと分からなくなるので。ここの議論と図が分かりやすかった。こういう時は~ vs ~検索がやっぱいいですね。When to use margin vs padding in CSS [closed]この図が全て。画像: https://www.w3schools.com/css/css_boxmodel.aspContentと別Contentとの間にスペース作りたい時はmargin...
View ArticleCSSにデザインが適用される優先順位(自分用メモ)
htmlファイルにデザインを適用する際には、以下の３パターンの方法がある。1.htmlのタグに直接書く 2.htmlのファイルに記述する 3.cssファイルを呼び込む上記の３パターンの間ではデザインを適用する際に優先順位がある。優先順位は以下の通り。1 > 2 > 3また、cssは下から順に書かれたものを優先するという性質もある。
View ArticleClik here to view.
Qiita風 ブログアプリ作ってみよう ver- 1
Qiita風 ブログアプリ制作環境ruby 2.5.1rails 5.2.3mysql2 0.5.3terminal$ cd ~/ 保存したいdirectory $ rails _5.2.3_ new qiita.blog -d mysql $ cd qiita.blog $ pwd 上記の写真のように様々なFileを自動的に作成してくれます。Gemfileをインストール$ bundle...
View ArticleQiita風 ブログアプリ作ってみよう ver- 2
Modelの作成$ rails g model blog invoke active_record create db/migrate/20200311152022_create_blogs.rb create app/models/blog.rb invoke test_unit create test/models/blog_test.rb create...
View Article学習記録（３日目）#CSSセレクターの記述法#BeautifulSoupによるスクレイピング
学習内容CSSセレクターの記述法BeautifulSoupによるスクレイピングCSSセレクターの記述法以下に１０通りのCSSセレクターの記述法を示します。どのCSSセクターもcontinents.htmlからEurasiaの要素を取り出します。continents.html<ulid="continents"><liid="au">Australia</li>&l...
View ArticleClik here to view.
[HTML&CSS]画像と文字を互い違いに表示させる方法
忘れたときすぐ見れるよう自分用メモこういうよく見るレイアウトHTMLはこんな感じ<divid="businesses"><divclass="business"><imgsrc="imgges/picture_pc_0c274de1b76f4063c7ce088be3b57004.jpg"alt="ビジネス1"><divclass="desc"><...
View Article[aws,rails,css]awsにデプロイした時にcssが反映されないエラーの解決例
1.エラーの原因は？ec2上のetc/nginx/conf.d/rails.confの記述内容の参照先の誤りにより、/var/www/アプリ名/public/assetとすべきところを/var/www/アプリ名/current/public/assetとしていたためでした2.解決方法下記コマンドで設定箇所に飛びます[ec2-user@ip-111-11-11-11 ~]$ cd...
View ArticleClik here to view.
初心者がPHPで掲示板を作ってみた
はじめにプログラミング学習のアウトプットとして掲示板の制作しました。この記事では掲示板の概要や制作過程について説明します。ソースコードはこちらになっております。github:yukisugikawa/bulletin-board目的掲示板の作成の過程で基本的なweb制作の技術を学ぶ。就職活動に向けてのポートフォリオ作り。開発環境使用言語/HTML5/CSS3/PHP7DB/MAMP/MYSQL開発環...
View ArticleIE11のサポートを切ると使えるようになるCSSとか一覧
Internet Explorer11のサポートが切れ、今後は動作対象にIE11を含めないことも増えるでしょう。サポートしないことにより、使えるHTMLとCSSをまとめました。 JavaScriptはきりがないので調べてません。Can I...
View ArticleゴミInternet Explorerのせいで時間を無駄にした奴（HTML、CSS）
ゴミ（IE）のheightが全く反映されない親要素のheightの指定がautoだと子要素のheightは聞かなくなる親要素のheightが聞けばいいのでcssで以下のように設定.main{ width: 100%; max-width: 100%; height: auto; margin: 0; clear: both; display: block; }...
View ArticleClik here to view.
#マンダラチャート の作成方法( #Localstrage 使うから入力値が保存されます)
該当大谷投手の目標管理にマンダラチャートを利用していたというのは有名な話かと思います。マンダラチャートを作成できるWEBサービスを探したのですが、見当たらなかったので作成しました。マンダラチャートURL[https://koji-yamamoto-github.github.io/mandala-chart/]概要...
View ArticleClik here to view.
特定のwindowサイズ変更時にJavaScriptでcssのクラス名を切り替える方法
こんにちは、Shota(@Mii4a_2501)です！ BootstrapやMaterialize等のフレームワークを用いてフロントエンドの記述をしていく際、col-s-4(Bootstrap)あるいはcol...
View ArticleClik here to view.
HTML + CSSでリアルなクッキーを作る
明日はホワイトデーということで、バレンタインのお返しにアイシングクッキーを作りました。クッキーといってもブラウザに保存するやつじゃないです。 See the Pen Only HTML + CSS Cookie by Nishihara (@Nishihara) on CodePen. 概要丸が基本形なので、border-radius:...
View Article[学習45日目]CSS ~positionの基本~
今日はCSSのpositionプロパティについて！使ったことあるけど、なんかいつも感覚的にやってて深くは理解していなかった。感覚的にやっているから、思うような設定ができなかった。なので、もう一度ちゃんと1から学びました！position:static;これは、「なにもしない」という意味。デフォルト値がstaticなので、基本はわざわざ設定しなくていいのかな？なんのためにあるんだろう？と思って調べたと...
View Article[学習45日目]CSS ~positionのいろいろ~
positionプロパティの基礎を学んだので、もう少し詳しく学んでみようとお思います。top,right,bottom,left全て0に設定するときabsoluteだと、親要素いっぱいの大きさになるstyle.css.box{position:absolute;top:0;right:0;bottom:0;left:0;}fixedだと、画面いっぱいの大きさになるstyle.css.box{posi...
View ArticlepagePhiling.jsを実装してページ毎にスクロールさせてみる！
WEBサイトで1ページ毎にスクロールさせたい！そんなことが、pagePhiling.jsを実装すれば可能になります。pagePhiling.js←公式HPからプラグインをダウンロード！デモ←私のポートフォリオですが、pagePhilingを実装しております。ご覧ください！準備するものhtml,cssファイルjavascript基礎知識やる気スイッチpagePhiling.jsをダウンロード実装するH...
View Article