gridレイアウトを実装
11件のビュー | 2023.3.24 に投稿された
Category:Column
| Column
CSSのgridを使って段崩れを起こさないリストを作ってみましたので備忘録兼ねて掲載致します。左右どちらかに短い文字が入る場合もあると思います。そんな時に短いテキストを中央表示するように作っています。 HTML [htm…
| Column
以前フルスクリーン画像をブログで投稿したことがあるのですが、今回はgridレイアウトを使ってレスポンシブル対応のフルスクリーン画像を制作してみました。更に画像の上にボックスを重ねてテキストを画像の上に掲載できるようにして…
| Column
レスポンシブ対応のgridレイアウトを実装したので備忘録を兼ねて掲載致します。2カラムと3カラムのレイアウトを作成しました。それと、2カラムで左のカラムに右のカラムが重なるレイアウトも実装しています。コードはコピペできる…
| Column
山口市の伝統工芸【大内塗り】についてAIのchsatGPTに聞いてみました。まず、GPTが大内塗りを知らなかっとので、大内塗りを学習させました。その後、大内塗りについての質問をしていきました。具体的な質問内容は、「大内塗…
| Column
AIの進化が凄まじいスピードで進んでいます。ウェブやデザイン業界もAIの影響を受けることは間違いなさそうです。様々なツールがある中で、今回は「こんなイメージでロゴマーク作成」してと命令するとロゴマーク制作をしてくれるAI…
| Column
山口市でホームページ制作をしながら対話型AIであるchatGPTに仕事を奪われるのではないかと日々怯えているPuzzleの本永です。実際にchatGPTがどれほどの実力なのかを検証してみました。結果から記載しますと、知識…
| Column
ウェブサイトや印刷物作成時に配色で悩むことが時々あります。そんな時にサポートしてくれるツールが配色ツールやグラデーションカラーツールです。backgroundやlinear-gradientのコードをコピペで実装できるツ…
ブログを掲載していると「引用文」などを記載する事があります。そんな時に役立つのがhtml5のblockquoteタグです。WordPressでは、挿入が簡単でブログ初心者のクライアント様でも使用できるので重宝しています。…
新規顧客獲得や既存顧客への情報発信などでSNSを使用する頻度が増えていると思いますが、クライアント様から「どのSNSを使えば効果的なのか?」というお問い合わせを頂く事が多々ありましたので、各SNSサービスの特徴をまとめて…
WordPressのアイキャッチ画像がトップページ・ブログ一覧に表示された場合「縦構図の写真もトリミングして横構図で掲載されるようにして欲しい」というご要望を頂き実装しましたので、コードを掲載します。必要があれば、ご自由…
ウェブサイト制作時に画像の上にテキストやボタンをのせる事ってありますよね!!今回は、制作案件にてテキストを画像上にのせる素材を作りましたので、掲載させて頂きます。必要のある方は、コピペでご使用いただければと思います。 d…
最近目にした「これは使えそう!!」と思ったボタンを備忘録を兼ねて掲載させて頂きます。ボタンは、クリック率に影響するので重要なウェブサイトのパーツです。コピペで使えるようにcodepenを埋め込んで掲載致します。 【Gra…