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
何かの草

おもしろいカタチ



コメント

コメントを投稿

スポンサーリンク


このブログの人気の投稿

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
続きを読む

catコマンドの出力を行番号付きにするためのコマンドラインオプション(-n, -b)

-
イメージ
catコマンドの出力を行番号付きにする catコマンドでテキストファイルの中身を出力するとき、行の先頭に行番号を表示させたい場合はコマンドラインオプションに "-n" を付けます。 また "-b" オプションを用いると、改行のみの空白の行はカウントされずに行番号が付与されます。 行番号出力の実行コマンドの例 例として用いるテキストファイル(Pythonのスクリプトファイル)をcatコマンドでオプション無しで出力した場合は以下の通り。 catコマンドでオプション無しで出力 これを "-n" 及び "-b" オプションで出力する例を以下に示します。 実行例1. "-n" オプションで全ての行に行番号を付与 $ cat -n sample01.txt "-n"オプションで行番号を付与 実行例2. "-b" オプションで改行のみの空白行は無視して行番号を付与 $ cat -b sample01.txt "-b"オプションで空白行は無視して行番号を付与 関連記事 lessコマンドで行番号を表示するためのコマンドラインオプション(-N)
続きを読む

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 : グラフにグリッド線を描く方法(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
続きを読む