初心者によるプログラミング学習ログ 288日目
100日チャレンジの288日目twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。すでに100日超えましたが、継続。 100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。 288日目は、おはようございます288日目...
View ArticleClik here to view.
デプロイ後CSSで色をつけていたbackground画像が表示されない件
環境サーバサイド ruby 2.5.7 rails 5.2.4本番サーバ環境 AWS(EC2,RDS,EIP)エラーtopに置いている画像が出てこなかったためブラウザで検証。まさに画像がエラーになっておる。エラーになっていた箇所.scssbackground-image: linear-gradient(to top, rgba(170, 280, 200, 0.8) 0%, rgba(151,...
View ArticleClik here to view.
NoodlでCSSによる影の表現
概要NoodlのVer2で新規に実装されたCSSを使って、Noodlの表現向上を試してみます。目次Noodl上でのCSSの書き方影の表現塗りつぶしの表現おまけサンプルデモ・サンプルデータの利用･ 影の表現デモ･ 塗りつぶし表現デモ･...
View ArticleClik here to view.
商品詳細画面での画像の折り返し表示をする
商品詳細画面での商品画面を折り返し表示させる最終的にこのようなかたちで表示をさせたいまずは画像をモデルから取り出すshow.html.haml.photo__box%ul.photo__innner%li=image_tag@item.images.first.src.url,class:...
View ArticleLaravel CSS反映されない事件
前提フレームワークでLaravelを使用。ローカル環境にてCSSを当てようと修正し、リロードするもCSSが反映されない事件が発生。原因scss(sass）ファイルはコンパイルしてcssに変換する必要がある。解決方法Laravelにはlaravel Mixというビルドツールが最初から入っているのでターミナルにて下記、コマンドを入力すると解決。$ npm run dev
View ArticleClik here to view.
Spring Boot ウェブアプリにフロントエンド技術を含める webpack ビルド
はじめにSpring Boot で構築するウェブアプリケーションに、ES Modules、babel や Sass/CSS コンバートなどのフロントエンド技術を含めてビルドする TIPS を書いてみました。普段はバックエンドばかりで...
View Article初心者によるプログラミング学習ログ 289日目
100日チャレンジの289日目twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。すでに100日超えましたが、継続。 100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。 289日目は、おはようございます289日目...
View Articlefont-familyを使ってフォント指定をする方法
font-familyとはfont-familyとは、CSSのプロパティ（設定項目）のひとつで、これを指定すると、フォント（文字）の種類を変更することができます。構文 font-family: フォント名 ;でフォントを変えられます。使用できるフォント名よく使われているフォントのリストです。総称ファミリーフォント名sans-serif (ゴシック系フォント）sans-serifarialarial...
View Articleなでしこ３とCSSで右側ハンバーガーメニューを作成する
これは、完全にクジラ飛行机氏の書かれた、この記事に便乗した記事です。jQueryとCSSで右側ハンバーガーメニューを実装する だって、ナデシコでやりたいじゃーん（≧▽≦） 基本的なHTMLHTML<divid="wrapper"><!-- ハンバーガーメニュー...
View ArticleCSSのリストマークの消し方
リストマークHTML上で黒点が出てしまうことです。例えばHTMLの記述だけだと以下の場合だと HTMLindex.html<ul><li>aaa</li><li>bbb</li><li>ccc</li></ul>・aaa・bbb・cccと表示されてしまいます。なのでCSSで...
View Articleposition: stickey;が効かない理由
やりたいこと親要素→ display:flex;子要素→ 左右に分けて、片方は記事内容、もう片方はサイドバー→サイドバーの方をスクロールと一緒に、下に追従するようにしたい方法style.css.side-menu{position:sticky;top:150px;}サイドバーの要素にこちらのstyleを当てるだけ。スクロールしても、上部から150pxの場所に固定されます。ただ、position:...
View ArticleClik here to view.
[JavaScript]デジタル時計つくる desktop用
テクニカルテスト受けるまで基礎学中心！個人アプリにはガッリ手を出せない。でも、何かしら実装したい。。。と思いプチアプリ作成をすることにしました。（今回はデスクトップで見るようなので、webページに入れ込んだりできません。ご了承くださいませ）環境Mac 10.14.6 Ruby 2.5.1p57 iTerm2 Build...
View Articleフォームの作り方
input要素input要素は１行のテキスト入力の要素です。※input要素は終了タグが不要です。【例】<form> <p>テキスト入力</p> <input> #終了タグは不要 </form> textarea要素textarea要素は複数行のテキスト入力の要素です【例】<form>...
View ArticleClik here to view.
ページトップボタン
以下のようなページトップボタン(ページの右下当たりにあって、クリックすると一番上に戻ってくるやつ)を実装します。まず、ボタンを置きたいhtmlに以下をコピペindex.html.erb(など)<p id="pagetop"><a href="#">↑ </a></p>...
View Article初心者によるプログラミング学習ログ 290日目
100日チャレンジの290日目twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。すでに100日超えましたが、継続。 100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。 290日目は、おはようございます290日目...
View Articleliタグの中のaタグ要素を縦方向にセンタリングする方法についての質問
liタグで作ったaタグ要素のテキストをborderの大きさに合わせて縦方向にセンタリングしたいのですが、上寄せとなってしまいます。よろしくお願い致します。<head>...
View ArticleClik here to view.
divとspanの違いってなんですか？？
HTMLのdivタグとspanタグの違い、以前受講生に質問されて苦い思いをしましたこの機会にマスターします！1. 何度でも復習！そもそもタグってなに？HTMLは、とにかくタグでテキストを挟むのが大好き！変態や...！開始タグと終了タグで挟まれたテキストは、そのタグの命令を聞かなければいけないつまり、挟まれるタグの種類によって、なんの変哲もないテキストの役割は変わるのです。書き方：...
View Article【CSS】文字列を真に折り返したいのなら
※これは元々、overflow-wrap: break-word; や word-break: break-all; が万能の改行処理だったなら、こんなに苦労していないに対するコメントとして2020年1月に書かれたものだが、line-break: anywhere;やwhite-space:...
View ArticleClik here to view.
新コロに関する呼びかけを簡単にできるWebサービス「Yobikake」を作ったときの、見た目を作る技術と工夫の話
こんにちはー！東京都在住のため、がっつり外出自粛をしている人間です。「ぴえん🥺」よりも「display: flex;」を愛用しているJKです。(これが言いたいだけで女子高生という属性を乱用してしまいました。申し訳ございません。)友だち(@nztm)と2人で「Yobikake...
View ArticleClik here to view.
スクロール位置でクラスを付与してくれるDelighters
Delighters公式サイトスクロール位置によって、表示要素に動きを付けたい際利用できるライブラリです。散々流行った今更のパララックスかもしれませんが、まだちょっと需要はありそうです。この演出をGoogle先生に聞いてみたところ、jQueryを利用したライブラリばっかりがヒットしてしまいました Delightersはピュアなjsで実装できる貴重なライブラリだと思います。Delighters...
View Article