【HTML&CSS】継承が行われない？→原因はデフォルトスタイルシートでした
最近、ProgateでHTML&CSSの学習をしており、「継承」に関して少しつまったことがありました。
その現象および原因について説明することで、同じようなことでつまっている方の参考になればと思います。
現象
まずは現象の説明を行います。
以下にHTML文書とそのスタイルシート、Chromeでの表示結果を示します。
index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test</title> <link rel="stylesheet" href="stylesheet.css"> </head> <body> <div class="hoge0"> <h1>ABC</h1> </div> <div class="hoge1"> <h1>ABC</h1> </div> <div class="hoge2"> <h1>ABC</h1> </div> <div class="hoge3"> <h1>ABC</h1> </div> </body> </html>
stylesheet.css
.hoge0 { } .hoge1 { font-weight: normal; } .hoge2 h1{ font-weight: normal; } .hoge3 { color: red; }
Chromeでの表示結果(①などの番号は便宜上つけたものでブラウザでは表示されません)
上記では4つの書き方で文字列「ABC」の表示方法を規定しています。
①はスタイルシートで何も指定していない状態
②は親要素のfont-weightの値を設定
③はhoge2に含まれるh1のfont-weightの値を設定
④は親要素のcolorの値を設定
まずは以下の2点に注目してください。
- ①と②の表示に差がない
- ②と③では表示に差がある(③の方が細い)
実は②では「ABC」に対して「font-weight: normal;」の指定が効いていないのです。そのため、①と②の表示が同じになります。
一方、③では「font-weight: normal;」が効いており、①,②に比べて「ABC」の文字が細くなっています。
僕としては、②の形で書けば、親要素から子要素にスタイルが継承されて、③と同じになると思っていたので「あれ？」という感じになりました。
そこで試しに④のような書き方をしてみると、文字の色についてはきちんと反映されています。つまり、親要素から子要素へスタイルが継承されています。
ここまでのことから以下の疑問が生まれました。
疑問1：なぜ②ではスタイルが継承されないのか？
疑問2：②と④の違いは何か？
以下では調べた情報をもとに段階を追ってこれらの疑問に答えます。
デフォルトスタイルシート
ブラウザによってあらかじめ設定されているスタイルが存在します。これをデフォルトスタイルシートと言います。下記ページによれば、Chromeではh1要素については、font-weightがboldに設定されているようです。
「各ブラウザごとのデフォルトのスタイルシート、user agent stylesheetのまとめ -Chrome, Safari, Firefox, Edge」
https://coliss.com/articles/build-websites/operation/css/user-agent-stylesheets.html
継承のルール
親要素に対して設定されたスタイルが子要素にも反映されることを「継承」と言いますが、どんな場合でも、どんなスタイルでも継承されるわけではなく、条件があります。そんな条件の一つが「子要素に対して同じプロパティの宣言がある場合、親要素の値は継承されない」というルールです。
疑問の解決
疑問1：なぜ②ではスタイルが継承されないのか？
→「デフォルトスタイルシート」の項目で触れた通り、h1要素にはデフォルトスタイルシートにより、font-weight: bold;という宣言があります。そのため、上述の「子要素に対して同じプロパティの宣言がある場合、親要素の値は継承されない」ルールにより親要素の値が継承されません。
疑問2：②と④の違いは何か？
→デフォルトスタイルシートではh1要素に対してcolorの値の宣言がありません。そのため、②の場合とは異なり、親要素の値が子要素に継承され、文字色が赤になっています。
iOS13の「メモ」の1行目が太字になる件
ヨルフです。こんばんは。
iOS13の「メモ」の1行目が太字になる件についてです。
新しいメモを作成する時、最初の行が太字になる問題
私はiPhone XSを使用しているのですが、先日、iOSをアップデートしたところ、標準の「メモ」アプリに変化がありました。その変化とは「新しいメモを作成する時、最初の行が太字になる」というものです。
例えば、買い物リストのメモであれば以下のような表示になります。「牛乳 100円」の行だけ太字になっています。
うーん。今まで通り普通の文字でいいよ。。。というわけで、設定を探ってみると、元に戻す方法があっさり見つかって解決しました。解決方法を紹介します。
解決方法
ホーム画面から、
設定 > メモ > 新規メモ開始スタイル
と進むと以下のような画面が表示されます。
「タイトル」という欄にチェックがついています。これにより、新しいメモを作成した時、最初の行はタイトルとして扱われ、太字になります。
普通の文字で始まるようにするには、以下のように「本文」の欄にチェックを入れます。
この状態で先程の買い物リストのメモを書くと以下のようになります。最初の行が普通の文字で始まるようになりました。めでたしめでたし。
Pythonを使って簡単な表を作る
習慣を管理するための表をPythonのスクリプトを使って自動で作れるようにした。
きっかけ
Pythonの勉強のため、土日はpaizaラーニングのC問題を3問解くことにした。表を作って、やったかどうかをチェックすることにした。
作りたいもの
こんな感じの表。土日の日付が並んでいて、やったかどうかを0か1かで記録する。一応合計も出せるようにする。
作った
CSVファイルを作るためのPythonスクリプトを作った。こんな感じ。スクリプトを実行した日に対して、その月の土日の日付を列挙する。
# coding: utf-8 import datetime MAX_MONTH_LENGTH = 31 #現在の年月を取得 today = datetime.date.today() this_year = today.year this_month = today.month #ファイル作成 month_name = today.strftime("%B") f = open(month_name + ".csv","w") #表の項目行の記入 f.write("日付,実行の有無\n") #チェック対象の日付の記入 day = datetime.date(this_year, this_month, 1) #今月の初日 num_of_day = 0 #チェック対象の日付の個数 for i in range(0, MAX_MONTH_LENGTH): if day.month == this_month and (day.weekday() == 5 or day.weekday() == 6): #「今月の土日」の場合 #日付を記入する f.write(str(this_year) + "/" + str(this_month) + "/" + str(day.day) + ",0\n") num_of_day +=1 else: #「今月の土日」以外の場合 pass day += datetime.timedelta(days=1) #計数行の記入 f.write("合計,=SUM(B2:B" + str(num_of_day + 1) +")\n") f.close()
出来るCSVファイルはこんな感じ。
これをNumbersで開くとこんな感じ。
Numbersで開いた後、[command + s]で改めて保存すると、Numbersファイルとして保存される。こんな感じ。
このNumbersファイルをチェック用に使う。SUM関数も使えてるっぽい。
最後のNumbersファイルの作り方ダサいけど…まあいいでしょう。何か良いこと知ってる人いたら教えてください〜
おしまい。
Bootstrapを使ったホームページ作成、はじめの一歩
Bootstrapを使ってホームページを作っていこうと思うので、はじめの一歩として、環境構築とHello Worldを済ませた。環境構築といってもフォルダをダウンロードしただけだけど。
とりあえずHello Worldは済ませたので、あとはどんどん作り込んでいくぞ！…と言いたいところだけど、Hello Worldがシンプルすぎて本当にBootstrapを使えるようになってるのか不明。他の機能使いながら確認していこうかな。
以下、詳細。
背景
- paizaラーニングでBootstrapを使ったホームページの作り方を勉強中
- Bootstrapについてはなんとなく使い方はわかってきているけど、環境構築はしていない
やったこと
- Bootstrapでのホームページ作りに必要なものをダウンロード（デザイン知識がなくてもOK！Bootstrapの使い方【入門者向け】 | TechAcademyマガジン を参考にした）
- Bootstrapを使ってホームページを作ってみる（Hello World）
実際にやったことの詳細
bootstrapのトップページにいく
Bootstrap · The most popular HTML, CSS, and JS library in the world.
コンパイル済みのファイルをダウンロードする
「Download」ボタンを押す→「Compiled CSS and JS」の「Download」ボタンを押す→ bootstrap-4.3.1-dist という名前のフォルダがダウンロードされる
フォルダをデスクトップに設置
「bootstrap-4.3.1-dist」フォルダをコピーして、デスクトップに貼り付け
最初のページを作成
Bootstrapの公式のintroductionページ（Introduction · Bootstrap）の「Starter template」に掲載されている、HTMLのテンプレートをコピー（「copy」ボタンを押せば簡単にコピーできる）。テキストエディタを開き、ペースト。index.htmlという名前で保存。
作ったページを確認
ブラウザで、index.htmlを開く。こんな感じ。
というわけでHello World完了。
Amazonアソシエイトの審査に合格しました．10記事書いて申請しました．
こんにちは．ヨルフです．
タイトルの通り，このブログがAmazonアソシエイトの審査に合格しました*1．嬉しいです．今日はその辺りのことについて．
目次
いきさつ（1回目の申請は不合格）
そもそもですが，Amazonアソシエイトというのは，「Amazonの商品を紹介して紹介料をもらう」というサービスです．参加するには「紹介するホームページとしてふさわしいか」といった趣旨の審査を受けて合格する必要があります．*2
この過去記事（Amazonアソシエイトの審査に申請 - ヨルフの日記）で述べた通り，僕は一度Amazonアソシエイトの審査に申請し，落ちました．申請した時点で2個しか記事がなかったことが原因のようです．*3
（そのときはAmazonから「記事数が少ないため審査できませんでした」的なメールをいただきました．申請後1時間も経たない内に．）
今回の記事は「その審査にもう一度申請して合格したよ」という内容になります．
10記事書こうと決心
再チャレンジを志す僕は「とりあえず10記事書こう」と決心しました．ネットで調べたところ，「3,4記事でOK」とか「〇〇字あれば受かる（そんなに多くない）」とか言われていたので，まあ10記事書けば大丈夫だろうと．
逆に10記事（十分そうな「量」）書いてダメなら，内容（つまり「質」）について考えなければいけないという判断もできそうだと思いました．
10記事書こうと思った一番大きい理由は「何度も何度も申請して疲弊したくなかった」ということです．一発OK（正確には二発だけど）を目指していました．確実に，仕留める．
10記事書きました
で，実際10記事書きました．以下の10記事です（下に行くほど新しいです）．自分の英語学習・読書について書いたものが多いですね．
Don't sweat the small stuff... 英語で自己啓発本 - ヨルフの日記
物理オリンピックで日本人が世界1位に．単なる金メダルではない． - ヨルフの日記
TOEIC Part.4とPart.7の勉強法 - ヨルフの日記
"on a daily basis"（毎日）の"basis"って？ - ヨルフの日記
"On my way home" のhomeは副詞．名詞wayを修飾してます． - ヨルフの日記
読書『走ることについて語るときに僕の語ること』（村上春樹） - ヨルフの日記
MacBook使用者がiPhoneにCDの曲を取り込む一つの方法 - ヨルフの日記
記事の「質」については皆様の判断にお任せします笑．
申請→合格
そして申請して，合格しました．申請してから合格通知までは14時間ほどでした．夜22時に申請して，翌日正午12時に合格通知．
という訳で，今後，僕のブログ記事のAmazonの商品紹介URLは基本的にアフィリエイト（成果報酬型広告）になってます．どなたかが僕のブログ記事内のAmazon商品URLから購入まで進むとAmazonから僕に小銭が入る（広告の「成果」に対する「報酬」）ということですね．
買う人にとっては（ラクに商品ページに飛べることを除けば）損も得もないです．残念．買う人もお得になるような仕組みだといいんですけどね．
雑なまとめ
- 10記事書いたらAmazonアソシエイトの審査通りました
- Amazonアソシエイトの審査結果は割と早く返ってきました
まだブログを書き始めて長くないので，10記事書けるかどうか試してみるという裏テーマもありました．記事のネタになりそうな話題を思いつき次第，スマホのメモにタイトルだけ書くようにしていたら，なんとか書けました．（今の所メモったネタ全てが記事になってる訳ではないです．そこは「下手な鉄砲数打ちゃ当たる」です）
コメントやアドバイスなど頂けると嬉しいです．
それでは．
*1:一週間くらい前ですが
*2:詳しくは過去記事（Amazonアソシエイトの審査に申請 - ヨルフの日記）または本家の説明（アソシエイト・セントラル - Amazonアソシエイトへようこそ - クイックツアー）を参照してください．
*3:もう一つ．Twitterのアカウント（ヨルフ，@shukatsu_suru）も同時に申請したことが原因である可能性が微レ存（知らんけど）．今回の申請ではシンプルにブログ一本で行きました．Twitterの方は副サイト的な感じで追い追い登録する予定です．この辺はまだよくわかってないです．
数日前にアイコンを変えました．そのときに使ったアプリについて．
こんにちは．ヨルフです．
今日は最近ツイッター及びはてなブログのアイコンを変えたという話を．
結構長いあいだ（二週間くらい）「アイコンを変えたい．いい画像はないものか」と思っていました．要件は
でした．
そういうときにTLで以下のツイートが流れてきました．
アイコンを作る上で利用したアプリ「Prisma」はマジで便利。普通の写真をアートっぽく加工してくれる。僕の場合は近未来感出したくて、ポリゴンぽい感じに。https://t.co/CTtwsSjLkv
— RYO.MINIMALIST (@minimalist_ryo_) 2017年8月1日
おすすめ。
RYOさんがオススメするのだからきっといいものなのです．というわけで早速インストールしました．どうせ無料だし，というのもありました．
「普通の写真をアートっぽく加工してくれる。」ということで写真を用意しないといけません．でも，自分の顔を上げるつもりはないですし，家の中にあるものを撮るのも微妙だなと思いました．
というわけで，午前0時ごろだったと思いますが家の外に出ました．外に出たら何かあるかもしれない．なんとなく植物を撮ろうとは思っていました．そして，エアリズムの部屋着を着て，木をスマホでパシャパシャ撮影しながら20分くらい歩きました（不審ですね）．自分の影を撮ってみたりもしました．
自分の影は全然良くなかったです．加工しがいもないし．何枚か撮った植物の写真の中から選ぶことにしました．
選んだのがこの写真です（すっぴん公開って感じで少し恥ずかしい）．
これを先ほどのアプリで加工すると下のようになります．
加工はとても簡単で，どんな感じに加工したいか選ぶだけです（ワンタッチ！）．30種類以上パターンがあったと思います．楽しくて全部試してしまいました．以下が特に気に入った4つ．
楽しい pic.twitter.com/TB5ohdwML8
— ヨルフ (@shukatsu_suru) 2017年8月1日
キャッチーかどうかはさておき，自分らしいアイコンができたかなと満足しております．
この「Prisma」というアプリですがAndroid版もあるようですね（僕はiPhoneマン）．
それでは．
MacBook使用者がiPhoneにCDの曲を取り込む一つの方法
こんにちは．ヨルフです．
今日はiPhoneにCDの曲を取り込むについて．
僕の手持ちのもので取り込む方法です。効率悪い感がスゴいですが、今のところこの方法しか出来ないので備忘録として。
・使ったもの
Windowsのパソコン（DVDドライブ有り）
USBとUSB-Cの変換アダプタ
Lightningケーブル（画像は短いやつですが，iPhoneの充電ケーブルでOK）
・やったこと
1.CDをWindowsのパソコンでmp3ファイルとして取り込む。
2.取り込んだファイルをUSBメモリに移す。
3.そのファイルをUSBメモリからMacBook内の任意の場所に移す。このとき「USBとUSB-Cの変換アダプタ」を使う。
4.MacBookでiTunesを開き、
ファイル>ライブラリに追加 を選択、
3.の作業で移してきたファイルを選択する。
5.「USBとUSB-Cの変換アダプタ」とLightningケーブルを使ってiPhoneとMacBookを繋ぐ。
6.MacBookのiTunesからiPhoneに曲を同期する（おしまい）
MacBookや変換アダプタを使わなくてもWindows用のiTunesを使えば取り込み自体は出来るのですが、MacBook使用者にとっては問題があります。それは「一つのiPhoneが同期出来るのは一つのiTunesだけ（新たなiTunesと同期すると前ののiTunesと同期していたデータは消える）」という制約。つまり、「普段iPhoneをMacBookのiTunesと同期している人」にとっては「WindowsのiTunesとの同期」という方法は使えないということです。
こういうやつ欲しい…（買おうかな）
ASUS バスパワー対応ポータブルDVDドライブ 【 Windows10対応 】スリムタイプ / Windows Mac 両対応 書き込みソフト付属 ブラック SDRW-08D2S-U LITE
- 出版社/メーカー: Asustek
- 発売日: 2014/09/17
- メディア: Personal Computers
- この商品を含むブログ (2件) を見る
