Coq には、コメントをドキュメントとして扱う機能があります。ソースコードからドキュメントを生成するには coqdoc というコマンドを使います。

coqdoc は LaTeX や HTML などを生成させることが出来ます。私も HTML のドキュメントを生成させたりしています。

coqdoc は CSS と HTML を一緒に生成します。しかし、この内容が見づらいと私は感じていました。理由は以下の二つです。

• 横幅が制限されているため、 PC のディスプレイだと巨大な余白が出来る。
• ソースコードの部分とドキュメントの部分で背景の色が違い、ドキュメントだけを一塊として強調する仕組みになっているが、同じ見出しの下にあるドキュメントでも塊が分割されていたり、見出しを跨いでドキュメントが一塊になっていたりしていて、私にとっては気持ち悪さを感じる。

coqdoc が生成する通常の CSS をそのまま使っているサイトは印象として少ないのですが、 Infinite Data and Proofs - Certified Programming with Dependent Types が一例になります。これを見ればデフォルトのデザインがどのようなものか分かります。

これを改善するために、私は一から独自の CSS を作成しようと考えました。もちろん、デフォルトの CSS を改変する方法もありますが、これは LGPL-2.1 であるため、私のプロジェクトには改変版を含めることが出来ませんでした。

地獄の窯が開いた

CSS を書くためには対象となる HTML の構造を知らなければなりませんでした。 coqdoc が生成する HTML がどのようなものなのか、 Google Chrome のデベロッパーモードを使って探検してみました。

(**

最初の段落。

次の段落。

*)

このようなコメントがどのような HTML になるか読者は予測できますでしょうか？ それぞれの段落が p タグで包まれるんでしょと思ったあなたは正常です。 coqdoc は p タグを使いません。

<div class="doc">
最初の段落。

<div class="paragraph"> </div>

次の段落。
</div>

このような HTML が生成されます。意味不明です。 div はブロック要素のはずです。気力を削がれながらもデフォルトの CSS を確認しました。

.paragraph {
    height: 0.75em;
}

このように高さが指定されていました。つまり、段落と段落の間のスペースを div 要素で表現しているのです。段落の間の隙間のために br 要素を使う人がいるのは知っていましたが、こんな世界があったとは驚きです。私は無知でした。

些細な他の問題

ソースコードを表現するためには pre 要素を使うのが普通だと思いますが、大量の br 要素を使っていました。

coqdoc では The dog is [foo baa]. という風にドキュメントの中にインラインでコードを埋め込むことが出来ます。これが The dog is <span class="inlinecode">foo</span> <span class="inlinecode">baa</span>. と変換されます。空白が span タグに包まれていません。 span.inlinecode という風に指定して文字サイズを大きくしようとしても、空白だけが大きくなりません。

HTML の中に余計なスペースがたくさんあります。元々のテキストの中に HTML のタグなどを差し込むという処理を基本としていると伺えます。

body 要素の直下に div id="page" 要素だけがあり、その中に他の全ての要素が入っている構造になっています。フラットにすれば良いのではと疑問に思いました。

ドキュメントの塊がドキュメントの構造と一致しないのは、コード部とドキュメント部が交互に切り替わる構造になっていたのが原因でした。これは一貫した設計であり理解できます。しかし、この条件下でのドキュメント部は一塊として見れないものだと感じます。

私が見ていた HTML の中では h1 要素が二回現れていましたが、これは Markdown の # foo と同じことであり、ユーザー側が h1 要素に変換される構文を使わないことで回避可能でした。

div id="header と div id="main" と div id="footer" 要素でページ全体を三つに区切っていました。これは今ならそのものずばり header と main と footer 要素があります。使うべきというようなものではありませんが。

ショックを乗り越えて

何とか新しい CSS を仕上げました。その成果はここで見ることが出来ます。デザインに関しては素人なので、まだまだ悪い所があるはずなのですが、私自身がきちんと見れるところまで完成させられたので、ひとまずは満足しました。

ちなみに、 GitLab Pages を初めて使ったんですが、 CI の中でファイルを吐き出せば自動的に引っ張り上げてくれるようになっていて、リポジトリの中に生成物を置く必要がある GitHub Pages と比較して設計の筋がとても良かったです。最初はリポジトリをホストするだけだった GitHub と、最初から周辺のツールまでまとめて扱うことが目標だった GitLab の違いが表れていると思うと、面白いです。

ライセンス

この記事のライセンスは CC BY 4.0 とします。

どうも7noteです。最初と最後を除くCSSの書き方

最初と最後を判定してCSSを当てる範囲を決める方法。
1行で書く方法もあります。

いろいろな書き方

最初と最後以外を赤文字にします。

index.html

<p>1番目</p>
<p>2番目</p>
<p>3番目</p>
<p>4番目</p>

style.css

p {
  color: red;
}

p:first-of-type,
p:last-of-type {
  color: #000; /* デフォルトの色を指定 */
}

/* もしくは */

p:not(:first-of-type):not(:last-of-type) {
  color: red;
}

または最初と最後にだけクラスがついているならこんな書き方もできます。

index.html

<p class="first">1番目</p>
<p>2番目</p>
<p>3番目</p>
<p class="last">ラスト</p>

style.css

p:not([class]) {
  color: red;  
} 

クラスをもっていない要素のみ赤文字にするという指定方法になります。

※-childか-of-typeは製作の環境に応じて適している方を使ってください。
-childと-of-typeの違いについて

まとめ

最初と最後以外、は専用の書き方があるわけではなく、シンプルに「最初と最後以外」と2つの指定を組み合わせて書きます。

個人的なおすすめの書き方は1行で書けるxxx:not(:first-of-type):not(:last-of-type)ですね。

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ

【この記事に書いてあること】

プログラミング学習9日目⏩

Web制作コース　初級編DAY8・9?

学習時間:3時間45分⏳

学習内容:HTML/CSSコーディング復習✏

学び?
・コーディング手順
　HTMLでキリがいいブロックまで書き上げる
　CSSを付けつつデザイン通りに調整していく#デイトラ#プログラミング初心者#プログラミング学習 pic.twitter.com/eVdpWNyw2s

— ふりっく?トリプルゼロの（これから）Webマーケター (@FuRiC_twi) January 22, 2021

　【目標】

「HTML/CSSのコーディング復習」

　【学習時間】

3時間45分

　【学び】

1　実務でコーディングするときの手順
　HTMLで全体（キリがいいブロックまで）書き上げる
　CSSを付けつつデザイン通りに調整していく

2　HTMLを先に書くときに意識すべきこと３つ
　・完成形をイメージしてブロックを作る
　・どこに何のスタイルを当てるか設計しつつ書く
　・レスポンシブも見越してブロックを整理する

3　VSCodeのショートカットキー

　・HTMLを自動整形してくれる：⌥(option)＋shift＋F
　・マルチカーソル（クリックした所）：⌥(option)+クリック
　・マルチカーソル（キーワード）：⌘(command)+D
　・行移動：⌥(option)+↑↓キー

前提

現在、組み込み系エンジニアの私が、今後はウェブ業界に挑戦するにあたって
「強みは技術力です！」
とかっこいいことがちゃんと言えるようになりたいと思いこの企画をはじめました。
いつでもアクセス可能のように備忘も兼ねて書きます。

これまで

事前にこちらの記事を勉強済みです。
↓↓↓
Webエンジニアになりたい人に捧げる学習ロードマップ

駆け出しフロントエンドエンジニアに求められるもの
1. HTML/CSSによるWebサイトコーディング経験（レスポンシブ対応含む）
2. JavaScriptの基礎構文理解
3. JavaScriptを使った動くUI(複数パターン)の実装経験
4. jQueryのプラグインやAjaxを使った実装経験
5. タスクランナー(gulp)やモジュールバンドラー(Webpack)の利用経験
6. Vue.jsもしくはReact.jsを使ったミニアプリの開発経験
7. 上記のスキルが証明できるポートフォリオサイトもしくはGitHubアカウントの提出

記事の役割

この記事が本で言う【目次】という役割となりここから各項目へジャンプできるような構造になっています。

どのように進めるのか

すでにあるロードマップ通りに学習していきます。
今回真面目に勉強するロードマップがこちら！！
↓↓↓
Webエンジニアのためのロードマップ
// 高校の同級生
// 出席番号が1つ前
// サッカー部の友人
// ありがとう

ロードマップの存在目的の中にこのようなメッセージが。

The purpose of these roadmaps is to give you an idea about the landscape and to guide you if you are confused about what to learn next and not to encourage you to pick what is hip and trendy. You should grow some understanding of why one tool would be better suited for some cases than the other and remember hip and trendy never means best suited for the job.

「迷ったり、流行に流されたりしないように活用してね」
「適材適所でどんな手段がなぜ良いのかを理解し、流行っているものがベストとは限らないよ」

と、どんな時代でも通用する本質を学べそうですね。

何を学ぶのか

ひとまずその中でも、フロントエンドのスキルについて勉強していきたいと思います。
[ ]←チェックボックスが全部[x]になっていくイメージ

1.Internet[ ]

• How does the internet work?
• Please wait...
• Please wait...

2.HTML[ ]

• Please wait...
• Please wait...

3.CSS[ ]

• Please wait...
• Please wait...

4.Javascript[ ]

• Please wait...
• Please wait...

よく仕様が変わって表示されなくなるそうですが、まだ僕はペーペーなので体験してません。

実装

コード

<?php
    $count = '6'; //画像取得数。ここは好きな表示枚数に変更
    $id = '*****'; //InstagramビジネスアカウントID。取得方法は後述
    $token = '*****'; // アクセス。取得方法は後述
    $json = file_get_contents("https://graph.facebook.com/v9.0/{$id}?fields=name%2Cmedia.limit({$count})%7Bcaption%2Cmedia_url%2Cthumbnail_url%2Cpermalink%7D&access_token={$token}");

    $json = mb_convert_encoding($json, 'UTF8', 'ASCII,JIS,UTF-8,EUC-JP,SJIS-WIN');
    $obj = json_decode($json, t $insta  foreach ((array)$obj['media']['data'] as $k => $v) {
    if ($v['thumbnail_url']) {
        $data = [
            'img' => $v['thumbnail_url'], // 動画ならサムネ
            'caption' => $v['caption'],   // キャプション
            'link' => $v['permalink'],    // パーマリンク
        ];
    } else {
        $data = [
            'img' => $v['media_url'],
            'caption' => $v['caption'],
            'link' => $v['permalink'],
        ];
    }
    $insta[] = $data;
    foreach ($insta as $k => $v){
        echo '<li><a href="'.$v['link'].'" target="_blank"><img src="'.$v['img'].'" alt="'.$v['caption'].'"></a></li>';
    };
?>

Instagram グラフAPIの取得方法

1. 表示させるインスタアカウントをプロアカウントに
2. 当該インスタアカウントの管理者として、Facebookページ作成→当該Instagramアカウント紐付け
3. Instagram グラフAPI からInstagramアカウントのAPI取得
   1. 1時間有効API取得
   2. 上記1.を使用して、2ヶ月有効API取得
   3. 上記2.を使用して、ずっと有効API取得
4. ずっと有効API取得と、ずっと有効API取得を取得する途中で手に入るtokenを、上記コードの$id $tokenに突っ込む

ちなみに

僕が実装するときもあまりふんだんに情報があるわけではなかったです。
どうせまた変わるかもしれないですし、とりあえず方法のみ。
詳細は実際にやりながらアウトラインつかむ感じでいい気がしました。
どうせまた変わるかもしれないですし。
とりあえず
PHPで埋め込んで
InstagramグラフAPIを3つ取得して最後のやつ使う
あたりを頭の端っこの方に入れとくといいかもです。

どうせまた変わるかもしれないですし。

ここみてるってことはコピーライト表記で迷ってググってると思うので、早速結論です。

結論

必要な要素はこの3つ
©︎ 2021 きのこの山株式会社
たったこれだけです。
順不同です。

解説

正直、僕が疑問に思って調べたんですが、下記サイトが優秀すぎるのでみてください。

webliker:Copyright（コピーライト）を図解で解説！HTMLでの「©」の正しい書き方

このサイトで疑問解決です。

ただ一つ気になったところがあって、
著作権の保護期間は今は変わってるので、
そこだけ現状あたらしいソースを添付しておきます。(2021.1現在)

文化庁:著作者の権利の発生及び保護期間について

にもあるとおり、著作権発生より、著作権所有者死亡から70年*¹です。

---

1. 2018年12月30日に死後50年→70年に著作権法が改正された。 ↩

1.SCSSとは

　SCSSとはウェブページのスタイルを指定するCSSより効率よく記述するためのものです。
cssはよく聞くと思いますが、scssはあまり聞かないのじゃないかと思い今回記事を書かさせていただきました。

2.SCSSでの画像挿入

　1)まずcssファイルがscssファイルになっていない場合、scssファイルに変更しましょう。名前の変更で語末のcssをscssに変えるだけです。

2)そして次に以下のように画像の挿入ですまずapp/asset/imagesのフォルダの中に写真を用意しましょう。

3)用意したscssファイルを開き画像を用意します。以下が書き方の例です。
htmlで用意したクラス名contentsを使い指定していきます。
　まずbackground-imageのなかに背景の画像としておきたいものをimage-urlの括弧の中に指定します。
これだけで写真は貼り付けられますが、何回も写真がリピートしてしまします。その時に使うのがbackground-repeatです。これにno-repeatをつけると一枚だけの写真にすることができます。そのほかはbackground-sizeで大きさを指定したり、heightやwidthでも大きさは指定できたり、位置をどうするかなどは基本的なcssの指定の仕方で大丈夫です。またこれは背景画像なので、この上にhtmlの文字を乗っけてデザインすることも可能です。

index.scss

  .contents {
  background-image: image-url("image_top.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
}

3.最後に

このようにscssならではの簡単な記述で指定できるものもたくさんあるので是非使ってみてください！！

クラス名の付け方の違い

1.HTMLでのクラス名の付け方は、このようにclass="#"として名付けることができます。

 <a href="##", class="#">
  〇〇  
 </a>

2.Rubyでのクラス名の付け方は、class:"#"として名付けることができます。

      <link_to "##",class:"#">

最後に

私の学習順序ではHTMLが先だったのでclassの記述の仕方についてはclass="#"でしかないと思っていましたが、rubyの記述で同じ記述をした場合rubyにおけるクラスとインスタンスの方のclassが与えられてしまっていたので、ここは覚えておかなければいけないポイントなのではないかと思い、記事を書かせていただきました。このほかにも上記のようなlink_toの書き方であったり、form_withなどはHTMLと書き方が違うのでまた必要だと思ったことは書かせていただきます！！