問題

16
HTML/CSS

タイトル毎に固定ヘッダーを変更しよう

固定ヘッダーをタイトル毎に変更する方法を実施します。 見出しがいくつもあるホームページなどでよく使われています。

HTML/CSSの問題に挑戦しよう!

問題

タイトル毎に固定ヘッダーを変更しよう

タイトル毎に固定ヘッダーを表示させましょう。
見本動画を参考にして実装してください。

あらかじめエディタに書くコード

                    <section>
        <h2>概要</h2>
        <p>領主に仕えずに戦毎に雇われる傭兵のような存在もいた。伊賀衆・甲賀衆のような土豪集団もあれば、乱波・透破のようなただのごろつき集団もある。戦には足軽として参加し、夜討ち朝駆けといった奇襲撹乱を得意とした。伊賀・甲賀においては荘園時代から悪党がはびこり、それが後世に忍者と呼ばれる伊賀衆甲賀衆になる。忍者は上忍、中忍、下忍に身分が分かれているように一部で信じられているが、実際の『萬川集海』(まんせんしゅうかい)の記述は上忍とは「人の知る事なくして、巧者なる」者である。中世にはどの村落も軍事力を備えていたが(江戸時代に武装を必要としない安定を見る(兵農分離)までは、あらゆる階層が武装していた)、その軍事力は村落の自衛に用いられることもあり、また村落外の勢力に傭兵のように貸す場合もあった。外から連れてきた子供を訓練することもあり[要出典]、伊賀では脱走者(いわゆる抜け忍)は探し出して処罰したと言うが、実際には忍者は想像もつかない忙しさから、一人や二人のためにそこまでする暇がなかったといわれ、放置していたという説もある。戦国時代、結城氏のように領内で、夜間の作戦に普段からプロの悪党や忍びが集団で雇われているところもあれば、合戦前に忍びを募集するところもあった。例えば武蔵松山城主の上田憲定の合戦前の兵募集制札には「夜走、夜盗はいくらでも欲しい」「侠気のある剛健なもの」「前科者、借財ある者みな帳消しにする」とあり、『陰徳太平記』では「足軽など山賊盗賊でも嫌わず召し集める」とある。後に出世した大名の中で彼らの助力を受けていないものは一人もいないだろう。『萬川集海』によると「忍芸はほぼ盗賊の術に近し」とあり、忍術には「陰忍」と「陽忍」があるとされる。陰忍とは、姿を隠して敵地に忍び込み内情を探ったり破壊工作をする方法であり、一般的に想像される忍者とはこの時の姿である。対して陽忍とは、姿を公にさらしつつ計略によって目的を遂げる方法である。いわゆる諜報活動や謀略、離間工作などがこれに当たる。近年の研究では、身体能力に優れ、厳しい規律に律された諜報集団という面の他に、優れた動植物の知識や化学の知識を持つ技術者集団としての一面も持つことが判っている[要出典]。</p>
</section>
<section>
    <h2>略歴</h2>
    <p>間諜の歴史は、人類の歴史とともに古く遡ることができる。その発祥については日本発祥説の他に、インド発祥説、中国発祥説などもある。『孫子』用間篇を始め、古来、間および諜を説く兵書は多い。飛鳥時代には、聖徳太子が、大伴細人(おおとものほそひと)を「志能備(しのび)」として用いたと伝えられる地域もあるようだが、『日本書紀』等にそのような記載はない忍者・忍術は、源平時代以後に日本で発祥したものである。忍者、忍術は日本国内各地に分かれ、いくつかの集団を形成していた[要出典]。文献上にその名が見られる忍術流派は71流を数え[要出典]、伝書及び資料の確認される流派は31流とする説がある[要出典]。中でも甲賀や伊賀を本拠としていた忍者集団は有名である。これらの場所には多数の忍者屋敷があり、日々の訓練が行われていたと考えられる[要出典]。甲賀と伊賀は、鎌倉時代にはその領地の大半が荘園で木材の供給地だったため守護や地頭による支配を受けなかったが、戦国時代になり荘園が崩壊すると、地侍が数十の勢力に分かれ群雄割拠した。各地侍が勢力を保つため情報収集戦とゲリラ戦が日夜行われ、「忍術」が自然発生したのではないかと考えられている。伊賀・甲賀・雑賀、さらには柳生・根来等の紀伊半島は、天武天皇が壬申の乱の直前に住んでいた場所であり、後醍醐天皇の南朝が置かれるなど、特殊な霊地が多い。『太平記』で、高師直が石清水八幡宮焼き討ちに「忍び」を使ったと記されるのが文献上の初見である。長享元年(1487年)の室町幕府将軍・足利義尚率いる幕府軍と六角高頼の戦いでも、六角氏は甲賀・伊賀と連合軍を組んだ。特に伊賀忍者は、古代、琵琶湖が伊賀国内に存在し[注 1]、そのため土質が農業向きではなく特殊技能を体得し国外へと移動して忍者集団を形成したものという[要出典]。天正13年、羽柴秀吉によって甲賀の侍衆は改易処分となり甲賀は秀吉の家臣中村一氏の支配となる。これにより甲賀の元侍衆たちは浪人となり没落していく。これを「甲賀ゆれ」と言う。なお、戦国時代には、伊賀・甲賀組や紀州根来衆の他に甲斐武田氏の透破、越後上杉氏の鳶加当他、相模後北条氏の風魔党、奥州伊達氏の黒脛巾組、加賀本願寺の修験、伊勢長島一向一揆、出雲尼子氏の鉢屋一党など各地方諸文献に草等の忍者らしき記載が有る。[要出典]</p>
</section>
<section>
        <h2>くノ一について</h2>
        <p>女中や小間使いとして潜入して諜報活動を行っていた女性の忍者も存在した。忍装束を着て映像作品や漫画作品などで活躍するような通俗的な姿は、近代の創作とされる。史実として武田信玄に仕えた歩き巫女の集団が有名。「くのいちの術」と言って女性を使った忍術は存在するがこれとは異なる。[要出典] 名称については「くノ一(くのいち)」といい、“女”という文字を「く」「ノ」「一」と三文字に解体し呼称するようになった隠語表現を語源とする説明が一般的である。その他陰陽道における房術である「九一ノ道」からきたとする説など、いくつかの説がある。</p>
</section>
<section>
        <h2>伝説</h2>
        <p>昭和37年(1962年)、伊賀上野の旧家より『上嶋家文書』(江戸時代末期の写本)が発見された。これによると、伊賀国の服部氏族・上嶋元成の三男が申楽(能)役者・観阿弥で、母は楠木正成の姉妹だったという。すなわち、観阿弥は楠木正成の甥だったことになる。根拠は特にないが、偽系図などと呼ばれている。観阿弥の息子・世阿弥も「先祖は服部氏」と自称していた。伊賀国では、藤林・百地・服部の上忍三家が他の地侍を支配下に、最終的に合議制を敷いて、戦国大名に支配されない地域を形成していた。外部からの侵略に対しては結束して戦い、織田信長が伊賀国を支配するために送り込んだ築城奉行・滝川雄利を追放、その報復として攻め込んできた織田信雄の軍も彼らは壊滅させている(第一次天正伊賀の乱)。改めて敵の一部を調略してから、信長が大軍を編成し攻め込んできた際に、その他の伊賀国の忍者集団は壊滅的な打撃を受けた(第二次天正伊賀の乱)。百地丹波以下100名が紀州の根来へと落ち延びたと言われる。</p>
</section>
<section>
        <h2>制下</h2>
        <p>伊賀衆甲賀衆の一部は本能寺の変の際に、堺(現・大阪府堺市)の見物に訪れていた徳川家康を護衛して伊賀越えを行なったことから、徳川幕府に召抱えられるようになった。この際、200名程の伊賀衆が仕官したが、1582年から1615年の間に75名が死亡しており、記録によれば危険な城攻めの前線などに投入され戦死した者が多かったという。その過酷な任務に対し、知行は10石程度と薄給であった事もわかっている伊賀越以前からの家臣であった服部半蔵は重用され、江戸城の城門の一つにその名が付けられ、現在も東京の地名「半蔵門」として残っている。彼らは、徳川幕府のために諸大名の内情を探るだけでなく、江戸城下の世論調査、大奥の警護、空き家となった諸屋敷の管理なども担当し、同心として江戸城下の治安の警護に当たった。「御庭番」は忍者と同様に思われがちだが、誤りであり八代将軍・徳川吉宗が紀州藩から連れて来た薬込役を伊賀者と同格に格付けしただけに過ぎず、彼ら御庭番は忍者とはかかわりがない。土地に残った伊賀衆甲賀衆はそのまま百姓身分化した。「御庭番」も参照徳川家光(家光体制)時、老中(松平信綱・阿部忠秋・堀田正盛)、側衆(中根正盛)は、武断政策を強硬に進めた。その結果、浪人が増え社会問題化し、島原の乱や慶安の変(由井正雪)といった大規模な事件(一揆)が発生する。 島原の乱・慶安の変の際に大目付として老中・諸大名の監察を任とした中根正盛が与力20余騎を諸方に派遣して、その動きを詳細に調べさせた。 また、甲賀忍者の10人が信綱に随行、一揆軍の立てこもった原城内を探索したり兵糧を盗み取るなどしたが、落とし穴に嵌って敵から石打にあい重傷を被ることもあった[要検証 ? ノート]。 隠密機関の活躍により島原の乱・慶安の変に関して崩壊・一掃させ、武功派で幕閣に批判的であったとされる紀州藩主・徳川頼宣を幕政批判の首謀者とし失脚させた 。[要出典]戦国時代末期の侍衆改易処分で領地を失い没落した甲賀古士は幕府に対して仕官という形での救済を訴願している。この時一緒に提出したのが『萬川集海』である。 江戸時代の諸国を行脚していた俳諧師・松尾芭蕉は、現在の三重県伊賀市に当たる地方の出身者だった。そのため、松尾芭蕉は実は忍者あるいは隠密だったのではないかとする説があり、小説などでも題材に扱われている。その根拠として、芭蕉の著書奥の細道の記録どおりに旅行したとすると、一日数十キロメートル歩かなくてはいけない計算になり、普通の47歳ならば体力的に相当無理がある、などが挙げられる。当時の江戸時代の浮世絵師・葛飾北斎も公儀隠密説が囁かれている。これらの説には決定的な根拠はなく、現状では単なる想像の範疇を出ない。マシュー・ペリーの率いる黒船が浦賀沖に来航した際、藤堂藩の無足人沢村甚三郎が調査のために船上パーティーに日本側随員として参加し、パン、タバコ、蝋燭、便箋を持ち帰った。これがいわゆる忍者の活動の最後だった。 明治維新期になると甲賀古士らは一転して倒幕となり甲賀隊を結成して戊辰戦争に参加するも、忍術書に見られるような術は実戦に何の役にも立たなかった。</p>
</section>
¥HTML¥
                

期待する画面

解答と解説(タイトル毎に固定ヘッダーを変更しよう)

解説

LINE登録して解答を見る

※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます

固定ヘッダーをスクロールして変更する為には、
position: sticky; を指定してあげます。

補足

今回の問題では、positionの新しいプロパティ値が登場しました。

stickyを付与することで、スクロールの途中でエリアを限定して固定表示することができます。stickyには、日本語訳で「粘着する」という意味があります。

stickyを使用する際の注意点は、positionプロパティのabsoluteやfixedは要素が浮いた状態になるのに対し、stickyは要素が浮かず要素の高さは有したままになります。

さらにスキルアップしたい方は公式LINEから「HTML/CSS」と送信すると動画が見れます。

LINE登録して動画を視聴する
学習の事・キャリアの事、何でもOK!無料相談に申し込む