①display: flex;のアイテムを折り返す方法、②Illustratorで端が丸い線を描く方法、③ゲーム三昧

osawaです。
今日は①display: flex;のアイテムを折り返す方法、②Illustratorで端が丸い線を描く方法、③ゲーム三昧、の3本です。

①display: flex;のアイテムを折り返す方法

.example{
display: flex;
}

上記のように指定した時、幅が足りず、変なところで改行が入ってしまうことありますよね。なんだか見栄えが悪くてどうしたら良いのか…

そこで!今回はdisplay: flex;で指定したアイテムを折り返す方法をご紹介!

.example{
display: flex;
flex-wrap: wrap;
}

下に一言プラスするだけで幅が足りなくなったら自動で折り返す指定ができます!!

ただ、flexboxの幅等を指定し、flexbox内のアイテムの幅もpx等で指定している場合はアイテムが何個並んだら折り返しして欲しいという設定ができません。
指定の個数で折り返すようにしたい場合はflexboxの幅を並べたい個数÷100%で指定するようにすると良いんだとか!詳しい内容はこちらの参考サイトから〜
https://web-de-asobo.net/2021/05/19/flex-wrap-flex-direction/

 

②Illustratorで端が丸い線を描く方法

Photoshopの場合、線ツールで線を引いた後、プロパティ画面に色々な設定が表示されるのですが、Illustratorは表示されない!?
一体どこに設定画面が隠されているのでしょうか…🤯

今回はそのご紹介をさせていただきます!

  1. 上部のウインドウから「線」を選択
  2. 右側に表示された線のパネル内から、線端、角の形状を選択して丸いものに変更!

以上で端が丸い線を描くことができます♪

しかし!時々、線パネル内が「横幅」しか表示されていないことが…?!(私の場合そうでした💧)

こういうときは、線パネルの右上に表示されている「オプションを表示」をクリックすると線幅以外の設定が表示されるようになります!最初は表示されていないので、焦りますが、オプションをクリックするだけで設定項目が表示されるのでご安心を!笑

ぜひ活用してみてくださいね♪

 

③ゲーム三昧

先週の土日はたくさんゲームしました。一旦クリアはしたのですが、更に上を目指そう!ということで、最近はレベリング?みたいな感じで遊んでいます。1つのソフトで、こんなにたくさん遊べるなんて、ありがたすぎます😂

という感じで自分自身がゲームにハマってしまったため、配信を見る時間がかなり少なくなってしまい…
でもそのおかげ?でどういう動画なら時間がなくても見たくなるのか、考えるきっかけにはなりました。
自分の活動にも活かしていきたいな…と思います!

でもゲームのし過ぎで少し頭が痛い…今日はゆっくり休みます。

ということで、今日もお疲れ様でした。今週もゆったり頑張りましょう〜

WEB制作・ITに関するお悩みや
ご質問等お気軽にご相談ください

contact

この記事の著者

Webデザインの仕事を中心に、動画編集を行ったり、ロゴ制作したり、色々してます。 好きなものはYouTubeと音楽と優しい世界です!笑 ブログにはデザインのことや今思っていることを中心に書いていきます♪ よろしくお願いいたします🐶

コメントする

関連記事