【CSS】リンクの下線を消す方法
今回はCSSでリンクの下線を消す方法を解説していきたいと思います。 下記は何もスタイルを指定していない状態のリンクになります。ブラウザによって多少は異なりますが、青色で下線の付いたテキストになります。 index.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8">...
View ArticleCSSのみで作るアコーディオンメニュー
アコーディオンメニュー sample.html <html> <head> <style> .accordion { margin: 0px; } .acd-check { display: none; } .option { position: relative; } /* アコーディオンCLOSE */ .acd-label, .acd-content {...
View Article【CSS】マウスカーソルを指マークに変更する方法
一般的なブラウザでは、リンクの上にマウスカーソルを載せると指マークになります。しかし、CSSやJavaScriptなどでボタン的な機能を実装する場合、divやp要素などaタグ以外のHTML要素についてもマウスカーソルを指マークにしたい時があります。 そのため、今回は、CSSでマウスカーソルを指マークに変更する方法について解説します。 CSSでマウスカーソルを指マークに設定...
View Article新しいCSS
2021,11,9時点 gap 親要素にgapプロパティを指定することにより、子要素に配置に関するrowとcolumnの余白のプロパティを指定せずに済む。 gap: 8px 10px; marginのショートハンドのように２つ指定するとrowとcolumnの指定が可能 IE・Opera Mini 未対応 edge Firefox Chrome Safari Opera iOS/Safari...
View ArticleCSS 基礎の基礎
まとめメモです。 CSSの優先度順 １) 重要度（!importantなど） ２) 詳細度（class名やidが該当するが、class名よりidに記述されたスタイルが優先される） ３) コードの順序（先に書いるコードを後から記述したコードが上書きする） リセットCSS ハード系リセットCSS いくつか種類はあるが、共通しているのは各要素の余白を消し、フォントサイズを統一させる ノーマライズ系CSS...
View ArticleTwitterを通して大好きなあの人を温かく見守るアプリ（取り扱い注意） #Twitter #Bootstrap ＃CSS #codepen #Netlify
完成品 まずは完成品をご覧ください。（そのあと弁明させてください。。） 開くとこんな感じのちょっとヤバイページに飛びます。 そう！みんなのTLをひとまとめに表示してニヤニヤするやつ！ 企画（と弁明） はじめに、ネットに落ちている「お気に入り」の最新情報を集約して（できれば１ページで）表示できるアプリを作りたいと考えました。...
View Article【PHP】晩御飯ルーレットWebアプリケーション開発
PHPを独学で勉強しだして4ヶ月。。 そろそろポートフォリオがてらWebアプリケーションを作成してみようと動き出しました。 作っていくのは【晩御飯ルーレット】です。 今日の晩御飯を決めてくれるありがちなやつです笑（発想力が欲しいです。。） アプリ開発の流れ 今回は初めてのアプリ開発なのでしっかり流れに沿ってやっていきたいと思います。 要件定義 設計 制作 テスト 公開 ◇環境 Mac VS...
View ArticleHTMLでVAS(Visual Analogue Scale)を作る。
経緯 偉い人「VAS作って」 蝦「はい」 そもそもVASとは Google先生で一番上に出てくるページを参照 VAS of 脊髄外科ジャーナル 医療や看護の分野でよく使うのだとか。 作るもの シンプル イズ ベスト 今回は0から10までの10段階で押せるようにする。勿論増やせば100段階でも可。 HTML vas.html <!DOCTYPE html> <html...
View Articleボタンを押したら背景色がグラデーションでランダムに変わるアプリを作りました（+ CSS Animationをちょっと）
作ったアプリ https://awesome-engelbart-e06e16.netlify.app/ 画面中央の文章がずっと点滅します。 ボタンを押すと、背景色が左から右にグラデーションでランダムに変わります。 ライブラリやフレームワークは使わずに、HTML、CSS、Vanilla JavaScriptで作成（リセットCSSだけ使ってます）。 特記事項 文章を点滅させる...
View Article【狂気再び】SNSを通して大好きなあの人を温かく見守るアプリ #Facebook #Twitter #Bootstrap ＃CSS #codepen...
完成品 大好きなあの人を温かく見守るアプリ「お気に入りトレース」がバージョンアップ！ Twitterに加えてFacebookのTLも見守れるようになりました。笑 Twitterで息してなくてもFacebookで息してるかもよ！ 企画（と弁明）※ほぼ再掲 はじめに、ネットに落ちている「お気に入り」の最新情報を集約して（できれば１ページで）表示できるアプリを作りたいと考えました。...
View Article擬似クラス only-of-typeを使ってみた
下記のような場合、 <div> <p>子要素</p> </div> <div> <h1>タイトル</h1> <p>子要素</p> </div> １つ目のdiv(親要素)に入っているpにのみCSSを当てたい場合に クラスをつけるのではなく、擬似クラスで指定したい。 その場合は...
View Article【自分用メモ】CSSで游ゴシックを指定する場合の注意点
参考記事：https://wemo.tech/1155 WindowsとMacでは游ゴシックの名前が違う Windowsには游ゴシック、Macには游ゴシック体という名前で搭載されているので、そのどちらも書く必要があります。 font-family: "游ゴシック", "游ゴシック体";...
View ArticleBotUIでチャットボット開発（DB編）
はじめに 前回投稿した記事の続きで、BotUIを使ったチャットボットを、DB化した話になります。 BotUIって何？どんなチャットボットを作ったの？という方は前回の記事をご覧ください。 DB化の背景と目的 前回はJavaScript、CSS、HTMLで簡単なシナリオ型のチャットボットを作成しました。 そこでは質問文がまとめてあるjsファイルと、回答文がまとめてあるjsファイルを用意しました。...
View Articlehtmlとcssを完全に理解する【導入】#1
目的 このシリーズではhtmlとcssを完全に理解するまでの道筋を大まかに書いていきます．対象は初めてウェブページを作成したいけど何をすればよいかわからない人です．このシリーズを読み終わるころには，あなたはウェブページ作成マスターだ！ 各記事は以下の表から飛べます． html編 css編 第1回 導入 第9回 文字 (coming soon) 第2回 環境構築 第10回 罫線 (coming...
View Articlehtmlとcssを完全に理解する【環境構築】#2
目的 このシリーズではhtmlとcssを完全に理解するまでの道筋を大まかに書いていきます．対象は初めてウェブページを作成したいけど何をすればよいかわからない人です．このシリーズを読み終わるころには，あなたはウェブページ作成マスターだ！ 各記事は以下の表から飛べます． html編 css編 第1回 導入 第9回 文字 (coming soon) 第2回 環境構築 第10回 罫線 (coming...
View ArticleBootstrapで自作Webアプリをリファクタリング！
以前に作成したもの 以前、openBDを利用してISBNから書籍情報を取得するアプリを作りました。 CSSの実装はあまり時間が割けなかったため、左端が見切れていた、なんだかいまいち。 そこでCSSフレームワークのBootstrapを使ってリファクタリングを実施しました！ 今回の成果物 作成したアプリ 変更点 1. グリッドレイアウト...
View Articlehtmlとcssを完全に理解する【タグ Part1】#3
目的 このシリーズではhtmlとcssを完全に理解するまでの道筋を大まかに書いていきます．対象は初めてウェブページを作成したいけど何をすればよいかわからない人です．このシリーズを読み終わるころには，あなたはウェブページ作成マスターだ！ 各記事は以下の表から飛べます． html編 css編 第1回 導入 第9回 文字 (coming soon) 第2回 環境構築 第10回 罫線 (coming...
View Article【HTML】やの幅固定【CSS】
よーしspanの幅固定するぞー 確かwidth使えば幅は固定できたはず... <span style="width: 100px">こんにちは</span> 簡単簡単、さあ表示するぞ！ 横幅80しか無い？？？？？？？？？？？ ちゃんとelement.styleにも100pxって書いてあるのに？？？ もう私CSSなんて嫌い！！！ というわけで...
View Articlepath 要素の fill が指定されている SVG は svg 要素の fill を CSS で変えても意味がない
多くの SVG は svg 要素と path 要素で構成されています。 <svg class="heart pink" width="32" height="32" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" fill="black" > <path d="M 10,30 A 20,20 0,0,1 50,30...
View Article