ブログデザイン備忘録 ～ フルブリードレイアウト
文字（記事）の部分を中央に固定幅で表示し、画像などのコンテンツをページ幅いっぱいに表示するフルブリードレイアウトをCSSで記述する方法につて紹介したい。
1. フルブリードレイアウト
記事をページ幅いっぱいに記述してしまうと1行当たりの文字数が多く、特に段落の折り返しなどを見落としてしまいやすい。そこで記事の部分は65文字程度で改行して、画像は幅いっぱいに表示する(これをフルブリード;Full bleedと呼ぶ)レイアウトをCSSのコードで記述する。基本的なCSSコードと解説は シンプルなCSSで実装できる！記事は中央に固定幅、画像は幅いっぱいに、フルブリードレイアウトを実装するテクニック | コリス に掲載されている。
2. レイアウト用のサンプル
レイアウトのテストを行うため、以下のようなHTML構造を用意する。
<main class="wrapper"> <h1>サンプルエントリー</h1> <p>本文（66文字以上)</p> <img class="full-bleed" alt="test" src="" /> <p>本文2（66文字以上)</p> </main>
mainを"wrapper", imgを"full-bleed"というクラス名に設定して、記事の部分はpタグに記述し、折り返しがわかるように66文字以上の適当な文章を入れる。
次にCSSは、記事の部分65文字で折り返すためのレイアウトを指定するためにグリッドを用いる。
.wrapper { display: grid; grid-template-columns: 1fr min(65ch, 100%) 1fr; }
グリッドの構造は余白-記事-余白とするため1fr min(65ch,100%) 1frとする。min(65ch,100%)は65chか100%を比較して小さい方の幅を採用するという意味で、ページ幅が広い場合は65文字で改行されページ幅が65文字以下になるとページ幅で改行される。なおchは文字幅をあらわす単位。次に2番目('min(65ch,100%)`)を中央カラムに設定するには
.wrapper > * { grid-column: 2; }
次にimgタグに設定しているfull-bleedのレイアウトを設定する。width:100%;をグリッド線を1から4に横断して適用するgrid-column: 1 / 4;により画像をページ幅いっぱいに表示するレイアウトになる。なお3コラムの場合はグリッド線|は|余白1fr|記事65ch|余白1fr|なので1～4ということになる。grid-column: 2 / 4;だと中央から右端いっぱい、grid-column: 1 / 3;だと左端いっぱいから中央に画像が表示される。
さらに幅広ディスプレイの場合に画像がいっぱいに広がることを防ぐにはmax-widthを設定し左右のmarginをautoにすればmax-widthまで広がった画像が表示される。
.full-bleed { width: 100%; grid-column: 1 / 4; /* 幅を制限 */ max-width: 1500px; margin-left: auto; margin-right: auto; }
3. フルブリーフレイアウトのテスト表示
以上のHTML/CSSを実装したテスト表示を以下に示す。表示倍率を1x,0.5x,0.25xで切り替えることでレイアウトが機能していることが確認できると思う。
See the Pen full-bleed by ATATAT (@atatat) on CodePen.
4. まとめ
今回は文字（記事）の部分を中央に固定幅で表示し、画像などのコンテンツをページ幅いっぱいに表示するフルブリードレイアウトについて紹介した。
今週のお題「最近見た映画」
今週のお題「最近見た映画」
最近は映画館に行くこともなくなってテレビやWOWOWなどで映画を見ることが多い。緊急事態中にいろいろ録画したのもあり、時間があればちょくちょく見るようにしている。
トレインミッション
通勤電車(といっても日本だと長時間の特急での移動に近い）内で起こるサスペンス中心でアクションもある。電車の映画での定番の暴走列車の要素も一部あり。
ねじれた家
アガサ・クリスティ原作の推理ものの映画。オリエント急行殺人事件のようなイメージでみようとするとだいぶ異なる。（名探偵ポアロも登場しない） 登場人物は推理はしているがほとんど当たらず、事の成り行きのまま進んでいく。最後はどうしようもない形で突然終了する。
パラサイト・半地下の家族
今年のアカデミー賞で4部門獲得した話題の韓国映画。最初のコメディから急激にサスペンス・ホラーの要素に切り替わっていて見ていて飽きない。 前半と後半でテーマが急に変わる作り自体は韓国映画ではよく見られる手法。
宮本から君へ
漫画原作でテレ東で連ドラになっていたものの映画化。とにかく出演者の演技の熱量が高い。また脇役でも主役級の俳優が参加していて豪華な作りになっている。 途中見ていてどうやって終わるのか結末が予想しづらいので、2時間超の長さを感じない。
Google Colabでpython7 ～ google drive上でのpipインストール
以前はGoogle Colabでモジュールを新たにpipを用いてインストールする方法を紹介したが、時間が経過すると初期化されてしまい再度インストールする必要があった。今回はモジュールをGoogle Drive上にインストールし、ノートブック上でパスを追加することで時間が経過してもモジュールを読み込めることが確認できたのでそれを紹介する。
以前紹介したように基本的にはGoogle Colab/Drive に pip インストール: これなら消えない😃 - GGCS ごたごた気流調査所にあるようにGoogle Drive上にパスを通してpipを使ってモジュールをインストールするという手順を踏む。
今回は http://www.366service.com/jp/qa/11e0b5adc1cd37dbcf10fa1f2474f375
のコードを参考にしているが、パスの通し方だけが違っていてこちらのコードの方がうまくいった。
まず最初にGoogle colabのnotebookからGoogle Driveをマウントする必要がある。
from google.colab import drive drive.mount('/content/drive') >Mounted at /content/drive
以下の記事の通り、認証コードをコピーするとマウントが完了する。
次に以下のコードを使ってGoogle Drive上のパスを通しておく。
import os, sys nb_path = '/content/notebooks' os.symlink('/content/drive/My Drive/Colab Notebooks', nb_path) sys.path.insert(0,nb_path)
symlinkについてはPython 3 - os.symlink() Method
またpath.insertについてはPython 3.x - [Python] sys.path.insertとは？｜teratail を参照。
次にpipを使ってモジュールをさきほど通したGoogle Drive上のパスに以下のようにインストールする。今回はqulacsという量子回路シミュレーションのモジュールをインストールした。
!pip install --target=$nb_path qulacs
例えば以下のコードでimportできればインストールできていることが確認できる。
from qulacs import Observable, QuantumCircuit, QuantumState from qulacs.gate import Y,CNOT,merge
時間が経過して初期化状態では、Google Driveのマウントとパスを通すコードを実行する必要があるが、pipに関しては実行しなくてもモジュールがimportすることができる。
