ウェブ家の備忘録

ウェブデザイナーの備忘録

CSS

HTML : ボタンなど

後で消します ここに表題を入れる 長いサブタイトル 長いサブタイトル 長いサブタイトル 新規登録はこちら or sign up with Facebookで登録 Twitterで登録 <style> .top-wrapper { padding: 180px 0 100px 0; background-image: url(https://cdn-ak.f.st-hatena.com…

今日やったミス

誤まって<script>の中にCSSを書いていて、CSSが動かずに苦慮する。 <script> .hoge{ /* 色々 */ } </script>

疑問

艦めし https://www.mod.go.jp/msdf/kanmeshi/ ここはheaderとdiv id="header"を同時に使ってます。どういう理由なんだろう。

CSS : 複数クラスの指定

<div class="size red">hoge</div> <style> .size{font-size:20px} .red{color:red;} </style>

CSS謎仕様

まあこんなことをする人はいないけど。 インライン要素の途中でブロック要素を挟むとCSSがリセットされる?

HTML学習に良さそうなYoutube動画メモ

https://www.youtube.com/channel/UCsHf7xViISLGYjlQztO7--ghttps://www.youtube.com/channel/UCzk-Ck1hnzEl44Y7PASfA7Q/videos

コードのルールのサイト

https://rules.sonarsource.com/

現在やってる単語登録

VScodeやれよっていうツッコミはおいておいて。 読み 語句 メールアドレス メールアドレスの一文字目 メールアドレス jQuery j $('').();

CSS 文字列に透明度を出したり、文字間隔を開けたり

ソース <style> .font{ opacity:0.5; /* 透明度 */ font-size:45px; letter-spacing:5px; /* 文字間隔 */ } </style> <div class="font">文字列</div> 動作結果 文字列

CSSメモ ブロック要素の背景に画像を敷く

レスポンシブです。 フリー素材の山岳 test0123456789。あいうえおかきくけこ <style> .top{ padding:120px 0; background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/s/sirakabaararagi/20200403/20200403042518.jpg); color:white; background-si…

CSS : margin padding borderの短縮記法(ショートハンド)

参考 .example { margin: 10px; /* 上下左右 */ margin: 10px 20px; /* 上下 左右 */ margin: 10px 20px 30px; /* 上 左右 下 */ margin: 10px 20px 30px 40px; /* 上 右 下 左 */ } .example2 { margin: 10px 0; /* 上下のみ、左右を0にする */ } .example3…

CSSでよく名付けられるワード

https://qiita.com/pugiemonn/items/eaa597b79fe59a1f1506 私が気になった宣言名 wrapper : 囲っているもの。親。-top -bottom -left -right

EMMET : HTML書くのを楽にする

https://haniwaman.com/emmet/

margin padding borderの違い

https://qiita.com/Hirakawa_Yuzo/items/cbd7a4870bbeb81816cd

練習 HTMLのお問い合わせフォーム

お問い合わせ メールアドレス(必須) お問い合わせ内容(必須) ※必須項目は必ずご記入ください <style> .contact-form{ padding-top: 100px; } input,textarea{ width:400px; margin-top:10px; margin-bottom:30px; /* http://www.htmq.com/style/margin.shtml * …

CSSで要素を中央寄せにする

CSS

https://www.sejuku.net/blog/55523

border-bottom

http://www.htmq.com/style/border-bottom.shtml↓動作結果 ------ ブロック要素のタグで囲む ------ <style> .underLine{ border-bottom:2px solid #666; } </style> <div class="underLine">ブロック要素のタグで囲む</div>

div・spanの違い

https://saruwakakun.com/html-css/basic/div-span

px・em・exの違い

参考 http://www.htmq.com/style/font-size.shtml px 1ピクセルを1とする単位で、実際に表示されるサイズは72dpiや96dpiといったモニタの解像度により変化します。 em フォントの高さを1とする単位。 ex 小文字の「x」の高さを1とする単位です。数値には負の値…

headerタグの話

HTMLクイックリファレンスのheaderの記事の方ではHTML5からheaderタグが生まれたと書いてます。 ホンマかいな。headerタグはただの区分け系タグであり機能がないからHTMLコーダーが勝手に創造した類のタグやないんか。と思い調べました。 分かったこと ・hea…

relの意味

aタグやlinkタグで見られるrel属性の意味について。 https://saruwakakun.com/html-css/basic/link-rel 使われるタイミング <link rel="stylesheet" type="text/css" href="xxx.css"> <a rel="external" href="https://www.searchdesk.com/"> rel属性の意味 ・検索エンジンにページの関係を伝える。なのでSEOに良い その他参考HP http…</a></link>

同業他社勉強

しょうこちゃんねる WordPress5.X系使ってる個人様。 自作テーマ、jQueryページ、熟練を要する有料テーマ(Jet Elements、Slider Revolution、Elementor PRO)などをさらっと使えている印象。 レベル高い。素敵。https://umasho.com/ しょうこちゃんねる実績の…

jQueryをウェブサイトで使う

https://kumaweb-d.com/jquery/jquery-how-to-plugin/

WPでテーマ複数入れられるプラグイン

https://ownedmedianoie.com/how-to-use-multiple-themes-for-wordpress/

JavaScriptでHTMLを書く案

まあ普通にHTML書いた方が楽なんですけどね。 <section> <h1>こんにちは</h1> <p>本日もいい天気ですね</p> </section> 案1 普通にdocument.write <script> document.write( '<section>' +'<h1>こんにちは</h1>' +'<p>本日もいい天気ですね</p>' +'</section>' ); </script> 案2 タグ用ユーザー定義関数作る <script> fu…

JavaScript : HTMLでサイトURLを列挙

意図 このサイトの左カラムのリンク編集を楽にしたい。URLとサイト名だけ入れればいいようにしたい。 今回作成する物 下記のHTMLを出力するJavaScript。 <a href="http://searchdesk.com" target="_blank" style="text-decoration: none;">検索デスク</a> <br><a href="http://www.google.com" target="_blank" style="text-decoration: none;">google</a> liタグは個人的に好きじゃないので使ってません。 作成したJavaSc…

thimbleがglitchになる

使用感は全く変わりません。 glitch.com

CSSで絵画。"Diana Adrianne"

Diana Adrianne氏作、CSSアート。 画像ファイルじゃなくてHTMLとCSSです。CSSで描くのは画像として描くよりも圧倒的に難しい、というか技術的に理解不能の域です。 しかもブラウザごとに見え方が異なるんだとか。

xamppのlocalhostになる所(ドキュメントルート)の変更手順

https://creating-homepage.com/archives/6049 xamppのコントロールパネル開いて"Explore"ボタンをクリック。xamppフォルダが開かれる。 xamppフォルダ→apacheフォルダ→confフォルダと開き、httpd.confファイルを開く。 httpd.confファイルの中の"DocumentRo…

CSSのFlexとGridの違い

CSS

https://coliss.com/articles/build-websites/operation/css/css-grid-vs-flexbox-which-should-you-choose.html