本で学んだこと(HTML , CSS編)
HTMLとCSSで苦手なところを本で調べて学習し、記録しています。表を作りたい表を作る時はtableタグを使用する。trタグは行を表すもので、今回は、４つあるので４行の表が完成する。...
View ArticleMixed Content: The page at 'https://〜〜〜' was loaded over HTTPS,というエラーが出た時の対処
あらすじサイトにjQueryを拡張するライブラリ（プラグイン）の一種でjQuery UIを利用しダイアログを表示しようとしたときに出たエラーです。HTMLのheader部分にライブラリを読み込むため、以下のような記述をプラスし<link type="text/css" rel="stylesheet"...
View ArticleClik here to view.
CSSでカーソルが画像の上に来ると何かが起きるようにしよう。
この記事の対象者・cssで簡単なアニメーションを付けたい人・写真に動きを付けたい人下準備毎度のことながら始めにfinderからcss_hoverなどと言う名前のフォルダーを作成します。そしたらbracketsを起動して新規ファイルを2つ立ち上げて、それぞれindex.html、style.cssと名前をそれぞれ付けます。そしたらindex.htmlに!と入力してtobキーを押して、プログラムを展開し...
View ArticleCGMにパワポがコピペされた時にフォントサイズ指定を無効化するCSS
CGM開発に関わるフロントエンジニアは、勝手気ままにWordやパワポをコピペしてフロントコードが荒らされることに辟易してる方も多いと思います。私もです。システムやエディタ側で余分なHTMLを除去すべきととは思いますが、そこはコストと優先度の話。最低限のコストでしれっと改修できる、CSSのみで対応する方法のメモです。CSSspan{font-size:inherit!important;}これだけ。全...
View Article未経験者がフロントエンドの仕事を2年やって、各言語や仕事に抱いた感想
プログラミング言語やフレームワークに関する疑問をググるとだいたいQiitaの記事がヒットして、開くたびにアカウント登録しろしろとうるさいのでキレながらアカウント作りました。サブカルメンヘラクソ女の@hg0です。折角なのでアカウント登録のついでに書こうと思います。大学は芸術系で、デザインやメディアアートをかじっていた程度なのですが、縁があってWebエンジニア業界に就職することが出来ました。2年ほど、フ...
View ArticleClik here to view.
Clik here to view.
ハロトレ7日目 ~プロパティ~
CSSCSS記述方法プロパティをたくさん覚えると、表現の幅が広がります。適用方法インライン（タグにstyle属性として直接記述）<h1 style= "color;red">お問い合わせ</h1>内部参照（ヘッド内のstyle要素内に記述）<style>・・</style>外部参照（外部ファイルに記述し、head内よりリンク）...
View Article【初心者でもわかる】疑似要素が表示されない時に確認する7つの事 ＆ 確認方法
どうも7noteです。疑似要素が効かない時の確認事項（永久保存版）「疑似要素が思っている箇所に反映されない！！」という悩みはあるあるじゃないかなと思っている今日この頃です。そこで、考えられるほぼ全ての原因をまとめました！たぶん考えられる全パターンあると思います。永久保存版としてお使いください。疑似要素が表示されない時に確認する7つの事1.contentが宣言されているかp::before{conte...
View ArticleClik here to view.
Webページのviewportとは何か、今年こそ理解する
viewport、ちゃんと理解できておりますでしょうか。それには歴史的経緯やスマホにおけるブラウザの実装などを追う必要があり、たくさんの記事を読むというしんどい過程を迫られることと思います。この記事は、そうしたネットに転がる情報をまとめ、これひとつ読むだけで...
View ArticleClik here to view.
htmlとcssでいのちを輝かせる
こんばんは。りーぜんとです。昨日からTwitterで大阪万博のロゴが話題です。参考↓大阪万博公式サイトそう。みながTwitterで言ってるように、ちょっときもいんです。ちなみにTwitterではみんながいのち輝く君って呼んでるんですが、本当はなんていうんでしょう。何はともあれ、この記事ではこのロゴをHTMLで好きな場所に入れれるようにCSSで書いていきたいと思います。まずは円から手始めに円を一つ書い...
View ArticleClik here to view.
【デザイン音痴の救世主】Material-UIビギナーズガイド
「自分はデザインセンスが無い。だから、サーバーサイドエンジニアとして生きていこう...」なんて思ったことはありませんか？選択肢を狭めてしまっていないでしょうか？もしもそうなのだとしたら、そんなあなたに朗報です！今日は誰でも簡単にプロデザイナーになれる！？デザイン音痴の救世主『Material-UI』の使い方をビギナー向けに紹介します。そして、私自身、実務で約1年半ほどMaterial-UIを使った開...
View Articlenth-childとnth-of-typeの違い
nth-childとは？指定した『全ての要素』の中の〜番目の要素。nth-of-typeとは？指定した要素の〜番目の要素。nth-childとnth-of-typeの違い二つの違いを説明すると、sample.html(1)<ul> <li>1</li> <li>2</li> <li>3</li>...
View ArticleClik here to view.
わざわざ a href="javascript:void(0)" って書いてまで，リンクタグをボタン機能にするのは気持ち悪かったので，BootStrap...
リンクをリンクとして使わない仕様本来，青色フォントに下線の施されたリンクタグって，「ページ遷移」というイメージがあります。共通認識ともいえる，このイメージからかけ離れたコードを書いてしまうことは，利用者（そして開発者も）の常識を裏切ることにもなるので，できれば避けたいデザインですが，声とコダワリの強いユーザがいたりする場合，以下のような仕様：リンクタグ <a...
View ArticleClik here to view.
ローディングアニメーションをパパッと実装！
【１】 Jsプラグインの『PACE』を利用『PACE』https://github.hubspot.com/pace/docs/welcome/上記URLにアクセスして下にスクロールしていくと、いくつかのローディングアニメーションが確認できます。まずはここでイメージに近いものを選びましょう。ちなみにデフォルトの色は水色ですが、変えたい場合は「CHOOSE A...
View ArticleClik here to view.
色彩検定１級がオススメする 🎨 グラデーション生成 Web ツール５選
こんにちは。ちょっと自分でもどこを目指しているのかわからない 1あずきしろもち（@azukisiromochi）です。以前、 色彩検定１級がオススメする 🎨 配色Webツール５選という記事で配色 Web ツールを紹介しましたが、今回は グラデーション生成 Web ツールのお話。ターゲットとは、 「 CSS のグラデーション難しいんだよ！...
View Article【初心者でもわかる】cssを共通化させて、短く書こう！
どうも7noteです。cssの共通化は永遠のテーマです。cssを記述する際、似たようなcssを何度も書いてませんか？共通化でcssを短く書く様々な方法セレクタで一括指定/* 隣接セレクタ */li+li{margin:10px00;/* liの次のli*/}/* 間接セレクタ */p~p{margin:10px00;/* p以降のp*/}/* アスタリスク（*）...
View ArticleClik here to view.
CSSの@keyframesとanimationでポケモン捕獲っぽい画面を作ったよ
HTMLとCSSの@keyframesとanimationを使ってポケモン捕獲画面のようなボールが左右に動くローディング画面を作ってみました。CSSのkeyframesとanimationについて@keyframesはアニメーションの開始から終了までの動きをカスタマイズできるCSSの文法です。animationプロパティはHTML要素にどのアニメーションを適応するか、アニメーションの時間、繰り返し回...
View ArticleClik here to view.
ボタンをクリックしたら端からプロフィールが出てくるアニメーション
はじめにブログでよくある最初は隠れていてボタンを押すとプロフィールがヌッと出てくるアニメーションを作りました。最初からプロフィールを表示しているサイトもありますが、トップページの面積を大きく使いたいときに便利です。ポイント・端から出したい要素を画面の外に隠す.profile{transform: translateX(-100vw);} //左に隠す場合 .profile{transform:...
View Article【Rails6】Rails + Bootstrap 5.0.0-alpha 環境で、Bootstrapをカスタマイズする
※Qiita初投稿です。宜しくお願い致します。BootstrapはCSSフレームワークとして数多くのプロジェクトに導入されていて、 2020年6月にメジャーバージョンアップとして5.0 alpha...
View Article
