Clik here to view.
ユーザー認証の導入
ユーザー認証の導入Basic認証HTTP通信の規格に備え付けられている、ユーザー認証の仕組みのことRailsアプリケーションにBasic認証を導入app/controllers/application_controller.rbclassApplicationController<ActionController::Basebefore_action:basic_auth(省略)private...
View Article書字方向を分離するbdiタグについて
HTMLの<bdi>タグは、書字方向（文字が表示される方向）を周囲から切り離したいときに使います。の中に右から左へと進む言語が入っていたとしても、周囲のテキストの方向には影響を与えません。使いどころ：どんな言語が入るか分からないテキストに<bdi>は、アラビア語やヘブライ語のように、右から左へと表示される言語がふくまれる可能性がある部分に使います。たとえば、投稿サービスの「名...
View Articleposition争い〜要素が重なった時は？〜
要素が重なった時に優先順位を決めたい！2つの要素にpositionをつけた時、思わぬ形で要素が重なってしまう、、https://gyazo.com/3c01c80fad0dc299c069baf4a7376225原因、2つの要素にpositionをつけた時には、勝手に優先順位ができるので、優先順位を手で書き込むことheader{ position:...
View Article[エラー]background-image: image-urlでSassC::SyntaxError
background-image: image-urlでSassC::SyntaxErrorデプロイ前にcssに記述したbackground-imageを下記のように記述したら SassC::SyntaxError となりました。background-image: image-url("IMG_4335 (1).JPG");...
View Articleslick.jsを使用してページャーに数字を適用する
スライダーを使用したい時、手っ取り早くslickを使っています。便利ですよね。ある時スライドをポップアップさせて動画を表示させる依頼がありました。仕様としては「ページャーには第○章と順に入れてね」「スマホの時はページャーをドットにしてね」というもので、やり方を調べて実装しました。以下備忘録です。slickでページャーを変更できる「customPaging」「customPaging」というオプション...
View Article2020-10-22 学習記録
今日やったこと Webの神様模写コーディング (2h)https://www.youtube.com/watch?v=RBLkXAG4QTM&基本情報技術者試験（キタミ式)...
View ArticleClik here to view.
リンク先が正しく反映されない理由【解決事例あり】
みなさん、こんにちは。未経験からWebエンジニア転職を目指して独学中の体育教師しろと申します。今回は、ネット上に公開された、サイトのリンク先が正しく反映されない理由について記事にしました。実際に、リンク先が反映されなかった私の事例を元に説明していきます。私のサイトは最初このような状態でした。【問題2】ページ遷移後、トップページに戻ったら「そのページは存在しません」と表示される。...
View ArticleClik here to view.
WordPressでオリジナルテーマのサムネイル の設定の方法
WordPressでオリジナルテーマを作成した際に、特に何も設定をしないとこのような状態になっています。自分で使う分にはこれではいいかもしれませんが、お客さんに納品する際にこれではカッコ悪いなぁって思ったので、サムネイルの設定について調べました。サムネイル用の画像を準備するまずはサムネイルに表示する画像をアップします。それっぽくみえるものでよいと思います。今回はこちらの画像を準備しました。縦横比3:...
View ArticleCSS(em,rem,px,%)の指定する単位について
■ はじめにCSSの指定する単位について記事にしました。この記事で得る内容は以下の通りです。・CSSの基礎知識が増える・CSSのプロパティを適切な単位で指定する事で、アクセシビリティを向上させ、より良いサービスを作ることができる■ 参考にさせて頂いたサイトちゃんと使い分けてる？CSSのpx, em, rem, %, vw単位の違い■ em,rem,px,%について■...
View Article[HTML&CSS] classとidの違いとは
結論class種類別に割り当てる→同じclass名を1ページ中に何度も使うことができるid固有の名前を割り当てる→同じid名は1ページ中に1度しか使えない。class属性が対象の種類や部類を表しているのに対して、idは固有の名前を割り当てて限定的に表すために使われます。使い分け基本的にはclass属性を使う、必要に応じてid属性を使うというのが良いと思います。しかし、これらを併用する上でのメリット、...
View Article『Darkmode.js』『Bootstrap』でお手軽ダークモード
Darkmode.js『Darkmode.js』でダークモード入れてみました。Sample See the Pen vYKgEVE by sarap422 (@sarap422) on CodePen. head<head><!-- Bootstrap CDN...
View ArticleClik here to view.
【初心者でもわかる】select要素を使わず、divでselectみたいな動きを作る
どうも7noteです。select要素にcssが使いにくいので、他の方法を考えてみました。select要素にはCSSが調整難しいため、自由に調整できるdiv要素でできる方法を書いていきます。また、PCとスマホでselect要素風とそうじゃない動きに切り分けるなどが必要な時にも使えると思います。書き方※jQueryを使用しています。index.html<ul><liclass="ch...
View ArticleProgate 初級編 通し模写
何も見ないで、模写した結果、ダメダメだった。色は、macの基本ソフト digital color Meterを利用した。このソフトを使えば、rgbが抽出できるので、それで、色をつけた。HTMLは結構書き出せる様になった。送信のrgbをつけないといけない CSSの細かい部分,padding...
View ArticleCSS：サイズ指定は比率・相対指定
フォントサイズ、余白、幅などの指定は相対的に レスポンシブデザインのポイントになるのは「サイズ」。 「サイズ」は、画面の幅によって動的に変動させる。 また、ブレークポイントによって異なるサイズを指定しないといけない。 このとき、いろいろなパーツに個別のサイズを指定していたのでは管理が大変。 なので、その画面の起点となるサイズを定めたら、それの比率で他のサイズを決めていく。...
View ArticleClik here to view.
ボタンデザインがスマホでうまく表示されない時の対処法
スマホで見るとボタン表示が変！？表題のとおり、bootstrap4を使っていた時に起こった問題についてメモ書き。 EC2にデプロイして、ほっとひと安心していたのもつかの間。 PCから開いたら問題ないのに、スマホから開くとボタンのデザインがおかしい。実際の画面（PCからの表示）（スマホからの表示）何か白いのが出てる！コード部分 .button#dropdown1.btn...
View Articleforeachで複数作ったbuttonタグでdivタグ全体をリンクにしてpostしたい！
こんにちは。クリスピーパンダです。今回が初めての投稿ですが、早速行ってみましょう〜。この記事で実現できることforeach等のループ文で複数作ったform、divタグ、buttonタグで、buttonタグをdivタグ全体に広げて、リンク（button）を作成するものです。イメージは、記事投稿サイトなどで記事表示する際に、たくさんできたカードの全体をボタンにして、postしようよって感じです。通常po...
View Article【初心者でもわかる】imgの画像がぼやける理由と対策
どうも7noteです。なんだか画像がぼやけてるような気がする時の対処法imgタグの画像は画像データと全く同じpxに指定するのが基本！画像データが大きいが、無理に150pxの幅の箇所に画像を使用してしまうとぼやけてしまいます。（おそらくChromeのみ）画像がぼやけないためには①使う予定の場所のpxに合わせて画像をトリミング一番正攻法です。ただ、レスポンシブに対応しなければならない場面もあると思うので...
View ArticleClik here to view.