HTMLとCSSでカードアイテムを並べてみる(flexboxを使用)

-
ちょっとテストでカードアイテムの作成をやってみました。flexboxとやらが便利そうだったので使いました。ブラウザはとりあえずfirefoxでしか確認してません。
今回はお試しで作っただけですが、今後何かのまとめで使っていくかも知れないです。

flexboxについての参考サイト
Flexbox - Learn web development | MDN
CSS3 Flexible Box
CSSレイアウトにfloatは古い! 初心者でも始められるFlexbox入門 - ICS MEDIA

カードアイテムの作成についてはこちらのページを参考にしました。
How To Create a Card with CSS

test
たんぽぽ

太陽と綿毛

test
何かの花

きれい

test
しいたけ

しいたけしいたけ

test
何かの花その２

たくさんのきれい

test
つくし

つくしんぼ

test
何かの草

おもしろいカタチ



コメント

コメントを投稿

スポンサーリンク


このブログの人気の投稿

Ubuntu Softwareが起動しないのでいろいろと調べてみる(Ubuntu 20.04.1 LTS)

-
 起動しないUbuntu Software Ubuntu 20.04.1 LTSをインストールしたんですが、まず気になったのが「Ubuntu Software」が起動しないという点。これが起動しないとソフトウェアをインストールするが結構めんどうになってしまいます。 調べてみると「Ubuntu Software」は「snap-store」というsnapパッケージの模様。コマンドも「snap-store」。そして、端末でsnap-storeのコマンドを実行すると、コアダンプを吐いて落ちてしまいます。これは困った。  aptで「ubuntu-software」をインストール 調べてみると、標準で入っている「Ubuntu Software」の他にaptでインストール出来る「ubuntu-software」というものもあるようです。 なおこちらはダミーパッケージであって、インストールされるのは「gnome-software」のようです。 ということでこの「ubuntu-software(gnome-software)」をインストール。 実行すると通常のソフトウェアセンターのように使うことが出来ました。ソフトウェアのインストールも問題なし。 「snap-store」と「gnome-software」の違いは… 何が違うのかはよく分かっていないので、また時間があるときにでも調べることにします。 とりあえずgnome-softwareの方を使っていくことで対処は出来そうではあります。 以下はそれでもsnap-storeの方をどうにか立ち上がるようにしたい場合の話で、現時点であまり情報が無いようなのでおすすめはしません。 snap-storeを再インストールすると別のsnap-storeがインストールされる？ snap-storeが起動しないという件を調べていると、snap-storeを再インストールするといいような話が出てきます。ただこの方法ではどうも同じsnap-storeでも別のsnap-storeがインストールされるようです。後者のものはsnapパッケージのソフトのみ扱えるものらしく、別物のようです どうやら再インストールをして元のsnap-storeを入れ直すには、snapコマンドでインストールチャンネルを適切に設定する必要があるようです。これに関しては、確実にこれで入れ直
続きを読む

gnuplotでプロットなどの色をcolornameの指定で変更する

-
イメージ
gnuplotの色指定について gnuplot、関数やデータファイルのプロットの色指定について少しまとめておきます。 色の指定方法はいくかあって、 plot x linetype 3 plot x linetype rgbcolor 'red' plot x linetype rgbcolor '#00FF00' などというように指定します。 基本、「linetype」もしくは「linecolor」の後ろに色の指定がくるという書式になっているようです。 colornameを用いた指定方法 今回はいくつかある色指定の中からcolornameを用いて指定する方法をまとめることにします。colornameとはなんぞや？というと「red」とか「green」というような色に個別の名前が割り振られているものになります。使える色の名前さえ把握出来ていれば、直感的には一番扱いやすい指定方法だと思います。 (colorname以外には16進数でのRGB指定(透明度も扱える)などがあります) 使うことの出来るcolornameの確認方法 gnuplotで使えるcolornameを確認するには gnuplot> show colorname とします。これで使える色のリストが表示されます(対応するRGBも一緒に表示される)。 プロットするときの指定方法 指定方法は gnuplot> plot sin(x) lt rgbcolor 'red' というようになります。また簡略的に以下のようにも書けるようです。 gnuplot> plot sin(x) lt rgb 'red' gnuplot> plot cos(x) lc 'green' ひと通り色をグラフに出力してみる 指定出来る色をひと通りまとめてグラフにしてみました。端末をpngcairoです。 (端末によっては色の差異があるかも知れませんが、確認はしていません😞) 灰色のgrayについてはgreyという綴りのものも用意されています(綴りが異なるだけで色としては同じ…だと思います)。 'white','black','d
続きを読む

gnuplot : グラフにグリッド線を描く方法(set grid)

-
イメージ
gnuplotのグリッド線の描き方  gnuplotはデフォルトではグラフにグリッド線が描かれない設定になっています。ここではグリッド線を有効にする設定を解説していきます。 グリッド線の例 グリッド線の設定方法 簡単には以下のようにsetコマンドでグリッド線を有効に出来ます。 gnuplot> set grid グリッド線の線幅を変えたい場合は "linewidth" オプションの設定を追加します。 gnuplot> set grid linewidth 3 線の色を変えたい場合は "linecolor" オプションを追加。 gnuplot> set grid linecolor "dark-red" 点線ではなく実線にするには以下のようにします。 gnuplot> set grid linetype 1 linecolor 0 主目盛りだけでなく副目盛りにもグリッド線を設定する  ここまで解説した方法ではグリッド線は主目盛りにのみ設定されます。副目盛りにもグリッド線を描く場合、まず副目盛りを設定します。 副目盛りの設定 副目盛りを設定するにはx軸には gnuplot> set mxtics y軸には gnuplot> set mytics とします。 (副目盛りの数、間隔も別途設定出来ますが、今回はグリッド線の説明のためそれらの解説は省きます) 設定した副目盛りに対してグリッド線を設定 副目盛りの設定をしたなら次は副目盛りのグリッド線設定を行っていきます。 x軸、y軸に主目盛りに加えて副目盛りにもグリッド線を描くコマンドは以下のようになります。 gnuplot> set grid xtics mxtics gnuplot> set grid ytics mytics 副目盛りに個別に線の設定をするには、以下のようにカンマで区切って主目盛りと副目盛りのそれぞれの線の設定を行ないます。 gnuplot> set grid xtics mxtics linewidth 2, linewidth 1 グリッド線設定の確認方法 グリッド線がどのような設定になっているのか
続きを読む

gnuplot : プロット画像のサイズ指定について(set sizeとの違い)

-
イメージ
gnuplotでのサイズ指定 gnuplotでプロットをpngなど画像として出力する際のサイズ指定は次のように行ないます。 gnuplot> set terminal pngcairo size 640, 480 出力端末(ここではpngcairo)の設定のときにサイズ指定も行うという型式です。 出力例 以下は 1280x960 640x480 320x240 の3つのサイズで出力したものです。 (別々に出力してGIMPで合成しています) プロットソースコード set term pngcairo size 1280, 960 font ",24" set output "1280x960.png" set title "size : 1280x960" plot sin(x) w l lw 5 lc "red" set term pngcairo size 640, 480 font ",12" set output "640x480.png" set title "size : 640x480" plot x**3 w l lw 3 lc "blue" set term pngcairo size 320, 240 font ",8" set output "320x240.png" set title "size : 320x240" plot 2**x w l lw 2 lc "green" 間違えやすい設定(set size)  gnuplotには上記とは異なる "set size"という設定があります。これは何かというと、プロット領域のサイズ指定に関する設定となっています。出力画像のサイズ設定ではありません。 (古いバージョンのgnuplotではこの "set size" で出力画像のサイズ設定を行っていたようです。また端末によってはまだ古い設定のままのものが残っているようです)  "set size&qu
続きを読む

Pythonのformat()を使って1桁の16進数でも2桁で出力する方法

-
イメージ
Pythonで「1桁の16進数でも2桁で出力するという方法」がいまいち分からずに手間取ったことがあるので、そのとき取った方法をまとめておきます。 以前のgnuplot関連のブログ gnuplotのRGB値による色指定について で、プロット例のグラフを出力するために、「RRGGBB」となるRGB値を作成する必要がありました。 要は「0xff0000」となる数値を必要な分だけ書き出すわけです。 gnuplotでプロットするときは以下のような命令となっています。 gnuplot>>> plot cos(x)+0.0 lc rgbcolor "0x000000", cos(x)+0.05 lc rgbcolor "0x050000", cos(x)+0.1 lc rgbcolor "0x0a0000" (上のグラフの場合はこれよりもっと長い命令文) グラフだとプロット1つ毎にRRの値を加算していき、「00→ff」というように変化させていっています。これは10進数で表すと「0→255」です。 方法としてはGGとBBは「00」に固定して、RRだけ変化させて最後にRRGGBBとして結合する、という考えでRRGGBBを作成しようとしました。また16進数はループ変数の値(10進数)を変換して得ることとしました。 hex()で出力する 10進数を16進数の形式で出力するものとして「hex()」という関数があります。 例えば hex(29) とすると 0x1d を返します。後々、RRGGBBとして結合する時に先頭の「0x」が邪魔になりますが、これは文字列操作で削ればいいでしょう。 と、ここまでは良かったのですが、0〜15までは1桁(0xも付くので3文字)で書き出されます。 欲しいのは2桁で構成されるRRの値なので、0〜15までの場合に先頭(0xの後)に「0」をくっつける処理が必要となります。 やって出来ないことはないのですが、やや処理が入り組んで煩雑になってしまうのでもう少しスマートな方法を探してみることにしました。 format()で出力する Pythonで出力形式を変換するものとしてformat()という関数が使えます。 この中の変換形式の中に16
続きを読む