HTML/CSS

HTMLで入れ子のリスト

マークダウンでよくあるような入れ子のリストをHTMLで作りたかったのですが、以下のやり方では上手くいきませんでした。 <ul> <li>リスト</li> <ul> <li>入れ子リスト</li> <li>入れ子リスト</li> </ul></ul> 調べてみたところ、以下のように親となるリストの閉じタグを入れ子リストの後に書かなくてはいけ…

capybaraで取得した要素の中身を確認する

テストが通らない原因を探るため、binding.pryを仕込んでデバッグをしておりました。 止まってくれたところで、 find(‘#client_check_by_id’) とすれば、その要素を取得は出来るものの、その中身を見たい!と思い、そのやり方を調べてみました。 [1] pry(#<RSpec::ExampleGroups::Nested::Nested_2>)></rspec::examplegroups::nested::nested_2>…

無限スクロール実装

Infinite Scrollというライブラリを使って無限スクロールを実装しました。 その際のやり方について書き留めておきます。 以下はInfinite Scrollのリンクです! infinite-scroll.com 実装にあたってこちらの記事を参考にさせていただきました。 qiita.com Inf…

z-indexが下の要素も上の要素もクリックできるようにする

z-indexを指定して要素を重ねている時、下になっている要素にリンクを設定したのですが、そのままだとクリック出来ない状態で困りました。 解決方法についてメモしておきます。 問題 もともとz-indexが指定してあり、2つの要素が重なっておりました。 重な…

erb2slimというツール

slimでビューを書くにあたって、erb2slimというerbからslimに変換してくれるツールをしようしています! 以下はそのリンクです。 erb2slim.com コマンドでslimに変換してくれるgemも入れているのですが、before&afterを確認して自分の手でslimを書いていきた…

テンプレートエンジンSlim

今までRailsでビューをかくときは、ほとんどerbを使用しておりました。 数回だけhamlに挑戦したことはあるものの、あまり好きになれずerbに戻っておりました。 しかし今回、slimに挑戦することとなったので、slimについての基本的な導入方法、使い方について…

v-cloakディレクティブ

v-cloakディレクティブを使用する場面 ・ページを表示開始してから、Vueインスタンスの作成が終わるまでの間に、マスタッシュタグなどのコンパイル前のテンプレートが表示されてしまうのを防ぎたいときに使用します。 例(v-cloakを使用したチラつき防止) イ…

v-htmlディレクティブ

v-htmlディレクティブを使用する場面 ・プレーンなHTMLを挿入したいとき使用します。 →指定した要素のinnerHTMLを更新できます。 例(v-html使わない・v-html使用の比較) 上のpタグはv-htmlディレクティブを使用せず普通にマスタッシュ構文でdata属性のmessag…

Vue.jsのTODOアプリ

Vue.jsの勉強でTODOアプリを作りました。 hayashiyoshino.github.io 機能としては、以下のような非常にシンプルなものです。 ・入力されたものがリスト表示されます。 ・実行したものにチェックを入れるとリストに打ち消し線が入ります。 ・削除ボタンを押す…

Vimateのモックアップ

コミュニティ開発しているVimateというSNSのモックアップを自分が作ることになりました! 以下のリンクが作成途中のモックアップです。 hayashiyoshino.github.io プロトタイプ、モックアップ、ワイヤーフレームといった概念についてまで今ひとつ分かってい…

子要素へのスタイルの適用

Vue.jsの学習をしていたら、以下のようなcssが出てきました。 #app li>span.done { text-decoration: line-through;} 「>」 ってなんだ?と思ったので調べたメモです。 子要素へのスタイルの適用 セレクタを「>」で区切ると、あるセレクタの直下の階層にある…

スクロールできないエラー

本日、スクロールできず画面からはみ出た部分が見れないエラーに遭遇いたしました。 同じコードで自分のPCではスクロールがきちんとできるのに、なぜかある人のPCではスクロールができない。。。 解決方法を調べ、以下の記事のことを試したところ、無事解決…

Materialize.cssを使ったボタンやらの色変更法

Materialize.cssを使って作ったナビゲーションバーやボタンの色を変更する方法 以前、Materialize.cssを使って作品を作った際、CSSの定義を上書きしようとこことみたり、 CDNをやめてダウンロードしたcssをいじったりしても色が変わってくれず、苦戦した事が…

positionプロパティについて

positionプロパティとは positionプロパティとは、要素の位置を指定する基準点を設定するプロパティ。 top、left、right、bottomというプロパティと一緒に使用することで要素の位置を調整することができる。 position: static; 通常の位置に配置(デフォルト)…

評価を星で表示する

評価によって星の表示を変化させる方法 下の図のように評価の数字によって表示させる星を変えるとする。 HTMLの記述 <html> <head> <meta charset="UTF-8" /> <link rel="stylesheet" type="text/css" href="style1.css"> <title>html_css_question1</title> </head> <body> <h1>評価を星で表示する</h1><p>10%</p><div class="star-ratings-sprite"></div></body></html>

要素の重なる順番の指定(HTML/CSS)

ヘッダーを固定させようと、position: fixed; を指定したら固定はされたのですが、ヘッダーの下にある要素がヘッダーの上に重なってしまうようになってしまいました。(下にスクロールした際、ヘッダーが下にある要素に覆われてしまう。) それを解決するため…

背景画像のサイズ指定方法

背景画像が綺麗に表示されない問題 以下のように単純にCSSファイルでbackbround-imageだけ指定したら .container { margin: 0 auto; max-width: 1280px; width: 90%; min-height: 700px; background-image: url("https://i0.wp.com/rich-rice.com/wp-content…

ポートフォリオ作ってみました

自分のポートフォリオを作ってみました! 以下がそのサイトのリンクです。 My portfolio 他の人の素晴らしいポートフォリオを見たら作ってみたくなり、自分も挑戦してみたのですがクオリティの差が(泣 ブラウザの大きさ変えると画像が微妙にずれてくるし、サ…