どうも7noteです。iPhoneなどででるデフォルトのフォーム系タグのCSSを無効化してかつ代わりのCSS案を考えます iOS端末ではフォーム系のタグであるinputやbuttonの表示でデフォルトのCSSが聞いてしまうため、デザインがイマイチになってしまいます。 ・ios端末のデフォルトのセレクトボックスとボタン これのCSSを無効化してさらにオリジナルのCSSをあてていきます。 ios端末のフォーム系のCSSを無効化する方法 style.css /* 何もかも無効にしたい場合 */ input,select{ -webkit-appearance: none; border: none; } /* ボタン系だけ無効化したい場合 */ input[type="submit"], input[type="button"] { -webkit-appearance: none; } /* ラジオボタンやチェックボックスを無効化（正確には非表示）*/ input[type="radio"], input[type="checkbox"] { display: none; /* これだけ対策方法がちょっと違います */ } これで無効にすることができました。 次は代わりとなるCSSを入れていきます。 PCのGoogleChromeでみた場合に近いCSSを入れてみましょう。 無効化した後に変わりに入れるCSS例 index.html <input type="submit"> <div class="selectBox"> <select name="" id=""> <option value="">選択してください</option> </select> </div> style.css input[type="submit"], input[type="button"] { color: #fff; background-color: #2D9D53; } .selectBox { display: inline-block; border: 1px solid #000; border-radius: 5px; position: relative; padding-right: 15px; } .selectBox::before { content: ""; width: 5px; height: 5px; border-right: 1px solid #000; border-bottom: 1px solid #000; display: inline-block; position: absolute; top: 0; bottom: 0; right: 10px; margin: auto; transform: rotate(45deg); } まとめ iPhoneはめちゃくちゃ普及率が高いのに、こういうかゆいところに手が届かないのが難点。 iPhoneのためだけに余計なCSSが増えるのはソースを管理する側としては大変ですが、iPhoneで見る人が多いので時代の波には逆らえません。 その時代に合わせたコーディング方法を常に実践していくことが重要ですね。本日の学びです。 おそまつ！ ~ Qiitaで毎日投稿中!! ~ 【初心者向け】WEB制作のちょいテク詰め合わせ

はじめに プログラミングスクールでポートフォリオサイトを公開する方法を教えてもらいましたが、忘れないようにするために今回記事を書きました。 手順１　リポジトリを作成する コードを公開するためには、GitHubに「リポジトリ」を作成しなければなりません。 まずは、GitHubにアクセスします。 https://github.com/ 次に、ログインまで終わらせたら左上にあるNewボタンを押します。 リポジトリ名を入力して、「Create repository」ボタンを押します。 リポジトリには、Public（公開）とPrivate（非公開）の２種類あります。 今回作成したポートフォリオサイトは全体に公開したいので、Publicにしました。 これでリポジトリの作成は完了です。 完了した後の画面は後ほど使用するので、開いたままにしておきます。 　手順２　Git管理する 次に公開したいコードをGit管理します。 公開したいコードが置いてあるフォルダまで移動します。 以下のコマンドを順番に実行します。 git init git add . git commit -m "first commit" git branch -M main git remote add origin 「gitHubのリポジトリのURL」 git push origin main コマンドが無事に実行されると、公開されています。 手順３　GitHub Pagesを利用してHTMLを公開 GitHubのリポジトリページの上部右側にあるSettingsボタンを押します。 左側のメニューに、Pagesがあるので、そちらへ移動します。 Branchにmainを選択して、Saveボタンを押します。 Saveボタンを押すとリンクが表示されます。 このリンクを確認していただくと、公開されたポートフォリオが見ることができます。 その他 ポートフォリオが表示されない時は 公開したいHTMLのファイル名が「index.html」になっていることを確認してください。 他のファイル名になっていると、表示されません。 HTMLを修正した場合 以下のコマンドを実行します。 git add . git commit -m "修正内容" git push origin main

reset.cssの選定時にいくつかピックアップしたものを紹介します. これは, Next.jsのreset.css選定時に書いたドキュメントを記事にしたものです. 主にnpm で検索し, Weekly Download数を参考にしながら選びました. あくまでも [2021年6月時点]での比較であり, アップデートが入ることがあるので実際に使う前にドキュメントを確認するようにしてください. ピックアップするreset.css normalize.css sanitize.css modern-normalize styled-reset 以下, それぞれのreset.cssについて特徴と導入した際の懸念点をまとめていきます. normalize.css 全てのブラウザのスタイルをリセットしつつ, 有用なデフォルトのスタイルを保持 バグと一般的なブラウザの不一致を修正 sanitize.css normalize.cssをブラウザのスタイルのリセットに加え, ブラウザ表示の誤差を修正 デフォルトのスタイルをより最適化 Weekly Downloadsが多い ドキュメントが丁寧 懸念点 Unpacked Sizeが49.2kBと重たい(modern-normalizeは9.82kB) LastPublishが9ヶ月前 modern-normalize nomalize.cssをモダンブラウザ用に最適化したもの 軽量 box-sizing: border-box; を採用 懸念点 サポートのブラウザがnormalize.cssに比べて少ない 最新のChrome, Firefox, Safariに対応 Edge, (Opera, IE)に非対応 ress normalize.cssをカスタマイズしたもの box-sizing: border-box; の採用や全ての要素のpadding, marginをリセット等さまざまな特徴 サポートのブラウザはnormalize.cssと同じ 懸念点 Weekly Download数が少ない(normalize.cssの1/10くらい) githubのstar数, issue数がnormalize.cssに比べて少ない styled-reset Reactのstyled-components用のreset.css コンポーネントごとに適用できる 懸念点 サポートのブラウザがドキュメントに書いていない プロジェクト全体に適用するならこれである必要はない 結論 Weekly Download数, 対応ブラウザ数の多さ, ドキュメントの丁寧さからするとsanitize.cssがよい 軽量さを重視するのならnormalize.cssがよい. ただし, 対応ブラウザを考慮する必要あり. まとめ いかがだったでしょうか？？（１回書いてみたかった） 調べて比較をしてみた感想としては, reset.cssは流行りとそうでないものの差が大きいように感じました. もちろん, ここで取り上げていないものもたくさんあります. ただ, 流行っているものはissueやpull requestも多く, 対応も早いようだったので流行りから選定するというのも一つの視点としてありなのかなと思います.

ブログを運用したいなら、まずドメインランクを上げることを考えましょう。 中古ドメインを購入してもいいですが、過去にペナルティを受けてしまったドメインもあるので注意しましょう。 被リンクは、自然につく被リンクとそうでない被リンクがあります。 やる過ぎてしまうとあまり良くないので、自演で被リンクを設定する際はほどほどに行いましょう。

自作のWebアプリケーションを作成するときに、あらかじめHTMLテンプレートでテンプレートを作成した後に、それをRailsのアプリケーションに反映させよう、と言う考えのもと、作成しました。 結論めっちゃ失敗した 簡単に失敗したところ記載します。 単純にassets/stylesheet/に配置 CSSは読み込んでくれました。 ただ中身に注意。 特にimage-urlなどrubyのcssと通常のcssで記法が異なる点があります。 ここまではまだ良かったです。 ネックはJavaScript もうこれは思い出したくないくらいエラーが出ました。 その度に解決方法を模索して、結果として下記を実行したら、解消されました。 ①jQueryの導入 これは割と初期でやりました。 ②複数のjsファイルを全部application.jsに転記 これは全然ダメでした。 ③application.jsの初期で記述されているrequireをコメントアウトして、importで追加のjsファイルを読み込む これが効果抜群でほぼ解決しました。 言ってもまだ全部解決してない まだ解決してないし、なぜ初期で記述されているrequireがダメだったのかは考察が必要ですが、一旦、やりたいことできたので、ほんとにホッとしてます。

自作のWebアプリケーションを作成するときに、あらかじめHTMLテンプレートでテンプレートを作成した後に、それをRailsのアプリケーションに反映させよう、と言う考えのもと、作成しました。 結論めっちゃ失敗した 簡単に失敗したところ記載します。 単純にassets/stylesheet/に配置 CSSは読み込んでくれました。 ただ中身に注意。 特にimage-urlなどrubyのcssと通常のcssで記法が異なる点があります。 ここまではまだ良かったです。 ネックはJavaScript もうこれは思い出したくないくらいエラーが出ました。 その度に解決方法を模索して、結果として下記を実行したら、解消されました。 ①jQueryの導入 これは割と初期でやりました。 ②複数のjsファイルを全部application.jsに転記 これは全然ダメでした。 ③application.jsの初期で記述されているrequireをコメントアウトして、importで追加のjsファイルを読み込む これが効果抜群でほぼ解決しました。 追記：Turbolinksが悪さをしていたっぽい 特にエラーが出ていた時はjQueryが読み込まれていないことが原因でした。 Uncaught TypeError: webpack_require(...) is not a functionが出ていました。 該当の行を確認すると、確かにjQueryが読み込まれていないことが原因。 で、調べてみるとTurbolinksが悪さをしている可能性が。 【Rails】初心者向け！画面遷移の高速化を行うTurbolinksについて図を用いて詳しく解説 Turbolinksは簡単に言うとページの表示を高速化させるためのライブラリです。 いわゆる非同期処理というものです。 しかし一方で、readyやwidowのイベントが発火しない、といったトラブルが発生しているようです。 今回はこれがほぼ可能性が高い。 なぜならapplication.jsに window.jQuery = window.$ = require("./jquery.min") というwindowのイベントを定義していたにもかかわらず、イベントが発火していなかったから。 特にRails4以降は標準で入っているライブラリなので、jsが読み込まない、ということであれば、デフォルトで入っているライブラリを一つずつコメントアウトしてみると良いかもしれません。 （もちろんページの表示速度は遅くなるだろうが。） 言ってもまだ全部解決してない まだ解決してないし、なぜ初期で記述されているrequireがダメだったのかは考察が必要ですが、一旦、やりたいことできたので、ほんとにホッとしてます。

はじめに cssで装飾する場合に詳細度というものがあり、どのCSSプロパティが適用されるかを決める手段があるのでアウトプットしていきます。 適用されるstyleについて spanタグ　 まずは簡単に記述していきます。 index.html <!DOCTYPE html> <html lang="en"> <head> <!-- 省略 --> <link rel="stylesheet" href="style.css"> </head> <body> <span>こんにちは！ </span> <span>こんにちは！ </span> </body> </html> style.css span { width: 100px; height: 200px; background-color: darkgray; } このような形でタグ全ての大きさや色を変える事ができます。 では1つだけ変えたい場合がどのようにするのか。 classやidを使います。 適用されるstyleについて class id index.html <!-- 省略 --> <body> <span class="first">こんにちは！ </span> <span id="first">こんにちは！ </span> </body> classに名前をつけてそれだけを指定する事ができます。 ポイントはclassの場合は . が先頭に必要になります。 style.css .first { width: 100px; height: 200px; background-color: darkgray; } またidの場合は先頭に#が必要になります。 style.css #first { width: 100px; height: 200px; background-color: red; } 今回はあえて同じ名前にしましたが同じ名前でもclassとidは別ものなので適用されます。 同じ要素に対して複数のstyleが適用された場合 index.html <!-- 省略 --> <body> <span class="first" id="second">こんにちは！ </span> <span>こんにちは！ </span> </body> style.css .first { width: 100px; height: 200px; background-color: darkgray; } #second { width: 100px; height: 200px; background-color: red; } このように同じ要素に複数のstyleが適用された場合どうなるのか。 結論、id="second"が適用されます。 これは詳細度を元にしてどのstyleが当たるのかが決定されます。 MDN Web Docsに記載されています。 詳細度Specificityは、どの CSS プロパティが要素に最も関係があるか、すなわち適用されるかをブラウザーが決定する手段です。詳細度は様々な組み合わせの CSS セレクターで構成される一致規則に基づいています。 以下のリストは、セレクターを詳細度の小さな順に並べたものです。 要素型セレクター (例えば h1) と 擬似要素 (例えば ::before) クラスセレクター (例えば .example)、属性セレクター (例えば [type="radio"])、擬似クラス (例えば :hover) ID セレクター (例えば #example) 以下の場合はどうなるでしょうか。 style.css .first { width: 100px; height: 200px; background-color: darkgray; } span { width: 100px; height: 200px; background-color: red; } classの方がより詳細度があるので適用されます。