PHP で PDO を使用し SQL から取得したデータを表にして見やすくする方法
PDO を使用して、SQL から取得したデータはそのままだと、「ただの文字列。」って感じで読みやすくないですよね。 そこで取得したデータを表にして色付けとかするやり方を解説します。 内容としてはめっちゃ簡単。 しかし僕は 2 時間くらい無駄に彷徨ってたので初心者としてはあるあるな悩みかと思います！ 今回は簡易的な本のブックマークアプリを作りました。 SQL からのデータの取得はもちろん SELECT...
View Article地味に便利なdisplay: contents;
これは何 普段そこまで使わない気がするものの、地味に便利なdisplay: contents;について説明した記事です display: contents;の働き 簡単に説明するならこのスタイルが適用されたタグは、存在しない扱いになるイメージです。 書いているコード <div style="display: contents;"> <div>中の要素</div>...
View ArticleHTMLとCSSを使用したモーダル表示
HTMLとCSSを使用して表現したモーダル画面 ◆HTMLファイル <!DOCTYPE html> サイトタイトル rel="stylesheet"> <!-- [if lt IE 9] --> <!-- [endif] --> <!----- header-----> ヘッダー <!----- /header ----->...
View ArticleSassでの記述方法
Sassとは Sassとは、「Syntactically（文法的に） Awesome（イケてる・すごい） StyleSheet（スタイルシート）」の略で、CSSのメタ語です。（プリプロセッサと言われます） ※メタ語とはある言語についてなんらかの記述をするための言語で、特定のルールを加えて具体的な応用を可能にするものです。...
View Articleグラスモーフィズムを実装してみました
言語 html css 実装例 以下の実装で上記の様に実装できます。 sample.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">...
View Article[CSS] clip-pathとsvgで作る表っぽい読み込み中プレースホルダ
これはなに？ 表の読み込み中を示すアニメーションをCSS（とSVG）で作りました。 デモ 作ったもの HTMLとしてはこれだけです。背景をグラデーションにして、アニメさせています。 <div class="loading-placeholder"></div> CSSのclip-pathで、表のセルっぽく背景色が見えるようにしています。 clip-path:...
View Articleニューモーフィズムを実装してみた
言語 html css 用いたツール neumorphism.io 実装例 以下の実装で上記の様に実装できます。 sample.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible"...
View ArticleCSSでアニメーション重なってしまう時の対処。
アニメーションが他のタグと重なってしまう時の対処法。 position: fixed;しているheaderタグと重なっているので、ここにz-index: 1;を追記する。 重ならなくなりました。
View ArticleBoootStrap のGridシステムについて
この記事はAizu Advent Calender 2021の１日目の記事です。 はじめに 最近、Webページを作成しています。レスポンシブなWebサイト作成にBootStrap使ってみました。皆さんにも紹介をしたいと思って今回の記事を書きました。 BootStraptって？ ナビゲーションバーや、入力フォームなどのクラスが用意されており、クラス名を組み込むだけで、簡単にサイトを作成できる。...
View ArticleI18nを使いながらPCでもスマホでも狙ったところでレスポンシブに改行する
やりたいこと Railsでガチでフランス語のアプリを個人開発しています。 タイトルや文章をブラウザで表示したいとき、PCブラウザは横に長いから改行は要らないが、スマホブラウザでは改行を入れないと見栄えが悪いってことあると思います。しかもお任せしちゃうと「いや、そこで改行しないで...、ダサい！」ってところで改行してくれてしまいます。 こんな感じで↓ これをPCブラウザの時は、...
View Article【CSS】margin: 0 auto;とmargin: auto;の違いとは
？？？「margin: auto;だと上下にもautoされちゃうよ」 いいえ。一緒です。 上下のmarginもautoになりますが、結果的に0になります。 If 'margin-top', or 'margin-bottom' are 'auto', their used value is 0. W3C Visual formatting model details ？？？「じゃあmargin:...
View ArticleHTMLで文章を横三等分にする
文章を三等分にする方法 HTMLファイル <div style="display: flex;"> <div style="width: calc(100% / 3); padding: 0 10px;"> <h1> タイトル1 </h1> <P>...
View Articlewebデザインの知識無用！ Boootstrapを使ってみた（超初級者編）
初めに 現在書けるプログラミング言語はHTML・CSSのみです。 そんな私が初めてBootstrapを使ってみた感想を書いていきたいと思います。 ○Bootstrapとは BootstrapはウェブサイトやWebアプリケーションを作成するフロントエンドWebアプリケーションフレームワークで、HTMLおよびCSSベースのデザインテンプレートとして用意されています。...
View Articleaspect-ratioを使ってサイズがバラバラな画像を縦横比を揃えて表示する
この記事は CSS Advent Calendar 2021 1日目の記事です。 aspect-ratio を使って画像のトリミング表示をしてみました。 やりたいこと サイズがバラバラな複数枚の画像を表示サイズを合わせて表示したい。 レスポンシブで縦と横の比率も揃えたい。 画像のトリミングは縦方向も横方向も中央部分が表示できれば良い。 できました See the Pen responsive...
View Article今更ながらQiitaを始めます。
2021/12/01より投稿をはじめます。 今日の収穫 学習の中でSVGアニメーションは飛ばしていたのでこの投稿は新しい気づきとなった。 就職活動が始まったので企業探しをしている中で、社内Blogの内容が自分にマッチすると選択がしやすい。 選考備考にOSS活動の提出が必要とあったので、始めるきっかけとなったことに感謝をしたい。 ポンコツコーダーをたたき上げて頂ける企業など存在しないので、精進します。
View Article猿でも簡単に実装できるお手軽レスポンシブWebデザイン🐵
はじめに 筆者は大学生限定プログラミングコミュニティ『GeekSalon』で活動しているものです！ 興味があればぜひお話を聞きに来てくださいね！！！ レスポンシブWebデザインとは？ そもそもレスポンシブWebデザインがどんなものなのかご存知でしょうか？...
View Articleワイ「Tailwind CSSで選択したラジオボタンの背景色を変えたいんやけど」
この記事はワイ記法です。やめ太郎@Yametaro氏にリスペクトをこめて。 ある日の我が家 ワイ「去年趣味でアプリ作っていたんやが」 ワイ「この頃はあまり見た目に拘ってなかったなぁ」 ワイ「ヤクルトも日本一になったし、この際セルフリメイクしてみよか！」1 Tailwind CSSを使ってみた ワイ「はぇーBootstrapだけじゃなくて」 ワイ「Tailwind CSSってのもあるんか」...
View Article食べログ スマートフォンページのCSSを最適化してLCP改善にトライ！
この記事は食べログアドベントカレンダー2021の2日目の記事です 12/2(木) 担当、食べログWEBデザイナーの @mamiyan です。 食べログに入社してあっという間に4年目になり、頑張って先輩らしく振る舞っています...！...
View ArticleCSS Working Group Editor Drafts
CSS Working Group Editor Drafts CSS Working Group Editor Drafts を眺めていて、 気になったものを Pickup してみました。 一言コメントを記載しておりますが、 詳細は Reference を参照ください。 CSS Working Group Editor Drafts は、 草案や議論促進のためのものなので、...
View Article高さが違うコンテナをgridで綺麗に並べる
【やりたいこと】 PC、タブレット表示でMasonryっぽい並びをgridレイアウトで実装する。ウィンドウ幅縮小で並び替えはしない。スマホサイズになると昇順で縦に並ぶ。 【結果】 See the Pen grid layout by yoshida (@yoshi090) on CodePen. 【解説】 ポイントは以下です。 style.scss grid-template-areas: "a1...
View Article