NAVERまとめ終了まで、1週間を切り、残り数日となりましたね。

保存し忘れているページがないか心当たりはありませんか？

保存し損ねて後悔しないようにしておきたいものですね。

さて、

そもそも魚拓とは

ウェブページを保存収集して後々でも当時のページを見られるようにしておく「ウェブアーカイブ」の事である。

日本ではウェブ魚拓がウェブアーカイブのサービスとしてメジャー。

日本以外ではインターネットアーカイブが大手(非営利)。

---

ここではインターネットアーカイブでウェブアーカイブしている方がページ保存の際などに見落としがちな事をだらだら書いていく。

ページ内の画像が保存されてないの見落としがち

かつてあったサイトを見ようとインターネットアーカイブで見た時に、肝心の画像が表示されないということはないだろうか。

ページの画像などが見れないだけでそのページの価値や魅力が半減してしまうのである。

最低限のテキスト文章だけが保存されてあれば気にしないという方もいるかもしれない。

しかし、画像があることで理解の補助となるのであれば無いよりあった方がマシで、画像の消失はもったいないと思いませんか？

保存するページサイト側により画像が保存されないようになっていることもあるが、大抵の個人サイトは保存可能で、

ページ保存時、保存完了中までに切断されると、画像などが保存されていない要因の一つだったりする。

• 例としてURL直打ちでインターネットアーカイブでページを保存する場合

  • このように保存し始まり
    
  • 「Saving page now...」中にブラウザを閉じたりしてしまうと、まだ読み込まれてない画像が保存されてない可能性がある。
    
  • 「Loading Saved Page...」で保存が完了され、保存されたアーカイブページに移動される。
    
    

スクリプトを書いたりして自動でインターネットアーカイブに保存している人でありがちなのは、

https://web.archive.org/save/～～というURLでGETリクエストを送っただけだと、ページ内の画像が保存されなかったようです。

• ページ内の画像が保存されていないと

  • 過去のアーカイブを見た時に一見画像も表示されインターネットアーカイブに既に保存されてあるように見える
    
  • 画像だけを表示してみると…
    
  • アドレスバーを見るとweb.archive.org/save/_embed/となっている。
    

当時ページが保存された時に、ページ内の画像が保存されておらず、いつかに閲覧される機会があった時、画像がオリジナルの所から取得され(元が消えてなかったら)保存されるようです。

ブログのページ保存ではサムネイル画像しか画像が保存されていない

ココログ(@nifty)などのブログでは、記事内の画像はサムネイル・プレビュー用に加工されてある画像で、サムネイルのリンク先に元画像があるので、元画像を保存し損ねやすいかと。

記事の1ページ目だけ保存されがち

週刊誌系などのニュースサイトで、何ページにまたがっている記事の2ページ目以降が保存されていないことをよく目にします。

NAVERまとめやTogetterも同じく、1ページ目だけ保存されまくっている割には2ページ目以降が保存されていなかったりします。

動的に生成されるページ

JavaScriptでページが動的に生成されるようなサイトを保存する場合は、保存されたアーカイブを見るとスクリプトが正しく動かず表示されない、または動いてもページ内の画像などのコンテンツは閲覧時に読み込んだ時に初めて保存されることを知らないと見落とすかと。

Twitter

現在ではブラウザでツイートをインターネットアーカイブに保存して、その保存されたアーカイブを見ると、ツイートの読み込みにエラーが起きてしまう。

User agentをGooglebotであるように偽装してTwitterにアクセスすると、旧インターフェースのTwitterになる。

例えば、ブラウザでそのようにUser agentを偽装してhttps://web.archive.org/save/https://twitter.com/{ユーザーID}をアドレスバーに入力してアクセスするとページを問題無く保存することができる。

Twitterの原画像

画像も添付されたツイートで、画像URLの拡張子のあとに:origや&name=orig付けるとリサイズされてない原画像がある。

---

まあこんな具合に他にも気付いた事があれば加筆していきたいと思う。

本日の概要

１．課題サイト作成
２．アップロード（確認）
３．ワイヤーフレーム（書き出し）・・・PDF、PNG、JPEG、SVG

CSS

URLについて

　https://URL(URI)/（「index.html」）
GoogleのSEOのために、「 URL/ 」 で終わりたい。
（「index.html」）は、自動的にあるものとして判断されます。

contact.htmlなどは、Google検索で損になります。

全てindex.htmlフォルダ名に工夫することが大事です。

XFREEやStarserverFreeはWordPress使い始めてからでよいので、
Myサイトは、ホームページ領域を忍者ツールズに載せればよいです。

ホテルの法則

玄関のindex.htmlがないと、全ての情報が盗まれてしまいます。

OOCSS

スペースでclassを並列するような書き方をOOCSSと呼びます。

inherit

rem・em

Google fonts

Noto Sans ≒　源の角ゴシック
Noto Sans以外のUフォントやメイリオを使うと見栄えが悪くなります。
それに加えて、paddingなどをディセンダのせいで汚くなってしまいます。

Web Fonts（Google API）

font-familyの昔の書き方

font-familyは、使われていない書体から書いていきます。
Mac、Win、Linux、汎用の順
今は、Noto Sansだけ書いていればよいです。
それの方がコンピュータにどのフォントを選ぶか
という余計なコストをかけなくて済みます。

インラインレベル要素のクラス名

①ブロックレベル要素のクラス名の場合
　.xxx
②インラインレベル要素の場合
　a.current　インラインレベル要素名.クラス名

CSSシグネチャー

Macサーバー

Macのサーバーはセキュリティー的にCyberduckを使えばよいです。
授業では、WinSCPを使います。

無料サーバーではFTPを使うこと

新しいサイトをアップロードしたいとき

別のアカウントを忍者ツールズで作って行います。

illustrator

ワイヤーフレーム

wireframe.ai
wireframe.pdf
wireframe.gif
wireframe.png
wireframe.jpeg

スマホとPC用のサイトのワイヤーフレームをPDF用の保存

ファイル＞別名で保存

スマホとPC用のサイトのワイヤーフレームをjpegやpng用での保存

ファイル＞Web用に保存

日本のサイトの四季を作ってみる

height,padding,border-bottom,box-sizing:border-box;を使って作ってみましょう。

　border-boxは、padding、borderを高さや幅に含めます。

指にあるスマホを切り抜きたい場合

どうも7noteです。画面幅いっぱいに背景画像を表示したい時の方法を紹介。

また、1920pxくらいある大きな画面で見たときにも崩れにくい方法も解説します。

画面幅いっぱいに画像を出すなら、background-size: cover;

.bg {
  background-image: url(bg.jpg);
  background-size: cover;  /* 要素いっぱいに */
  background-position: center center;
}

だけど横幅の短い画像だと思ったところが表示されないことも。。。

下の例だと崖の部分が映らなくなってしまう場合があります。

なので元の画像を加工して、横幅を1920px以上の画像にします。
そうすることで高さはそのまま、横幅が変わっても幅いっぱいに画像が表示されます。

これで横幅が変わっても拡大縮小されにくくなりました。

1920pxにしたのは、一般的なディスプレイがおおきいもので1920pxが多いからです。
画像の高さは、実際に表示される高さと同じ

まとめ

オシャレなサイトでよく幅いっぱいに画像を表示するデザインを見かけるので、参考にして入れてみてください。
比較的簡単でオシャレになるので、background-size: cover;は重宝してます。

おそまつ！

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

検証する説

今回お持ちした説は、こちらです。

※ devroomさんを使わせていただきました。

どのような仕組みか

• <input type="checkbox">のid属性と、<label>のfor属性で関連づけさせることができる。
  • <label>をクリックすると、チェックの切り換えが可能になる。
• チェックボックスがチェックされている時、チェックボックスの状態がcheckedになるため、疑似クラスセレクター:checkedが使える。
• 要素の後ろにある同じ階層のセレクタの指定(~)を駆使すれば、その状態を他要素に伝えることができ、表示の変更が可能。

これらをフルで使うことによって、on/off切り換え機能を伴うUIはすべてCSSのみで実装が可能であると考えました。

※ 仕組みがわかりやすいように、あえて直タグでスタイルを当てております。良い子は真似しないでください。
※ デザインは仕組みが伝わるレベルです。

1. アコーディオン

アコーディオンがHTML・CSSのみで作れる！という話をよく聞くので、これは確実にいけそうですね！

※ details/summaryを使えばいいやん！と思った方もいるかもですが、あくまで今回は検証のため、checkboxとlabelで実装します。

2. ハンバーガーメニュー

ハンバーガーメニューも、理屈はアコーディオンと同じなので、作れそう！

htmlの構造はビミョーですが、ハンバーガーメニューとしては機能するものができました！

3. モーダル

用件を満たせるかは怪しいけど、無理やり頑張れば行けそう...

labelタグを使いまくることで、モーダルを開くボタンをクリックすると開き、×ボタンもしくはoverlayをクリックすると閉じるモーダルが完成しました。

検証結果

※ こちらもdevroomさんを使わせていただきました。

実装はできますが、コードの可読性の低下や、意味合いを意識したマークアップができないなどの懸念がございます。
止むを得ずjavascriptが使えない場合のみ、参考にしていただけたらなと思います。

FrontEndではいろいろな技術が創造されています。その中に、幅広く使ったものはHTML、JavaScript、CSS、DynamicHTML、DOM、AJAXです。
以下、用途により、説明します。

HTMLの用途はなんですか

今はWEB開発が流行しています。WEB開発以前はデスクトップアプリケーションが流行でした。WEB開発に変わってから、何の技術でブラウザにコンポーネントを表示しますか、画面でどのような効果を表示しますか。
この場合、HTMLが登場しました。
HTMLでは、テキストコンポーネント、ボタンコンポーネントが定義されています。文字色、背景色が指定できます。script、cssも組み込めます。
つまり、以下の二点の用途があります。
・画面でデータの輸出と輸入及びユーザ体験のために効果の表示
・script、cssなどほかの技術のインターフェースを持つ

JavaScriptの用途はなんですか

HTMLで生成されたページが固定です。変えたい場合、JavaScriptを使ったほうがいいです。例えば、検索した結果、一般的に、テーブル見たいなフォーマットで結果を表示します。JavaScriptを使って、表示する結果が
変わられます、しかも、表示するタイトルも変わられます。
用途にて、以下があります。
・ブラウザ自体の状況をコントロール
・入力したコンポーネントの値をチェック
・変わる結果を表示
下の二点に対してはサーバ側でも実現できるんですが、JavaScriptのほうでサーバ側へ通信の回数が少なくなって、通信のデータ量が少なくなりました。

CSSの用途はなんですか

画面の色、フォーマットなどstyleを設計する

DynamicHTMLの用途はなんですか

DynamicHTMLとは、DOM(Document Object Model)をサポートするHTMLです。ブラウザに動的な効果が要る場合使います。
ブラウザにDOMサポートしたら、DynamicHTMLのページを作れることは言えます。

DOMの用途はなんですか

ブラウザに動的な効果が要る場合使います。

AJAXの用途はなんですか

画面全体の刷新ではなく、画面内の一部を刷新したい場合、使います。
Googleの検索機能、検索ボックスに文字を入力中につづりの候補が絞り
込まれ、検索ヒット数と共に表示される