自動化無しに生活無し

WEB開発関係を中心に備忘録をまとめています

css3

  • 【CSS】変数を使用する【テーマカラーの統一、スキンの作成などに】
    SCSSなどではなく、素のCSSで変数が使えることに今になって気づいた。 ということで、実際に扱っていく。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Welcome to my portfolio site !!</title> <style> :root{ --base-color: #111111; --theme-color: #00ffcc; --font-color: white; } body { background:var(--base-color); color: var(--font-color); margin:0; } h1 { background: var(--theme-color); } </style> </head> <body> <h1>Welcome to my portfolio site !!</h1> <h2>Profile</h2> <h2>Portfolio</h2> </body> </html> :root{}で宣言した変数 --base-color等がプロパティの値として呼び出すことができる。 予めテーマカラーなどをまとめて冒頭に書いておけば、それを書き換えるだけですぐに対応できる。 この変数 ...
    続きを読む

  • 【CSS3】checkboxとlabelを使ってサイドバーを作る【コンパクト】
    以前作成したHTMLとCSSのサイドバーは、見た目は非常にわかりやすいが、場所を取る上に見た目がイマイチ。 そこで、HTMLとCSSだけでサイドバーを作るギミックは踏襲し、デザインだけ変更することにした。 ソースコード HTML <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Hello World test!!</title> <link rel="stylesheet" href="style.css"> </head> <body> <input id="sidebar_chk" class="sidebar_chk" type="checkbox"> <div class="sidebar_area"> <div class="sidebar_content"> <div>サイドバー</div> <div>サイドバー</div> <div> ...
    続きを読む

  • 【CSS3】チャットのウェブデザインを作る
    HTML <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Hello World test!!</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <link rel="stylesheet" href="style.css"> </head> <body> <main class="container"> <div class="mine_speech_bubble_area"> <div class="speech_bubble"></div> </div> <div class="others_speech_bubble_area"> <div class="speech_bubble"></div> </div> </main> </body> </html> Django用のHTML {% for topic in topics %} <div class="{% if topic.user.id == request.user.id %}mine{% else %}others{% endif %}_speech_bubble_area"> <div class="speech_bubble">{{ topic.comment|linebreaksbr }}</div> </div> {% endfor %} CSS .mine_speech_bubble_area{ text-align:right; } .others_speech_bubble_area{ text-align:left; } .mine_speech_bubble_area .speech_bubble { /* 自分が送った時は右下の角をつける */ background:lime; border-bottom-right-radius:0; } .others_speech_bubble_area .speech_bubble { /* 相手が送った時は左上の角をつける */ background:silver; border-top-left-radius:0; } .speech_bubble{ text-align:left; word-break:break-all; display:inline-block; max-width:80%; padding:0.5rem; margin:0.5rem 0; border-radius:1rem; } 動かすとこうなる。 ...

  • HTML5とCSS3だけでAmazon風の星レビューのフォームを再現する【ホバーした時、ラジオボタンのチェックされた時に星を表示】【flex-direction:row-reverseで逆順対応可】
    以前、サーバーサイドで1から5のいずれかの数値を受付、DBに保存する方法を実践したが、フロント系ではそれをもう少しおしゃれに実装させたい。 そういう時は、なるべくJavaScriptを使用せず、HTMLとCSSだけで表現するのがベターなやり方だと個人的には思う。 だからこそ、今回も同様にHTMLとCSSだけでレビューの星を入力するフォームを再現した。 マウスをホバーした時、星が塗りつぶされ、外れると星が ...
    続きを読む

  • CSS3とHTML5だけでモーダルダイアログを作る【JS不要】
    モーダルダイアログもとどのつまり、単なる表示非表示なので、HTMLとCSSだけで再現できる。 checkboxとlabelタグを使えば良いだけの話である。 ソースコード まずHTML <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Hello World test!!</title> <link rel="stylesheet" href="style.css"> </head> <body> <label class="modal_label" for="modal_chk">新規作成</label> <input id="modal_chk" class="modal_chk" type="checkbox"> <div class="modal_body"> <label class="modal_bg" for="modal_chk"></label> <div class="modal_content"></div> </div> </body> </html> 2つのlabelタグのfor属性はいずれもcheckboxのI ...
    続きを読む

  • 【jQuery】ボタン式の横スライダーを自作する【通販サイト・コンテンツ共有サイトなどに】
    通販サイトなどでよくある。横スクロール型のスライダーを作る。slick.jsなどを使えば簡単に実現できるが、かえって複雑なので、自作した。 ソースコード HTML。jQueryを読み込み、別途JavaScriptとCSSを読み込む。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Hello World test!!</title> <!--jquery読み込み--> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script src="script.js"></script> <link rel="stylesheet" href="style.css"> </head> <body> <div class="preview_control_area"> <div class="data_preview_area"> <div class="data_preview_frame"><div class="data_preview_content&qu ...
    続きを読む

  • CSS3とHTML5のタブシステムをtransitionでアニメーション表示に仕立てる
    CSS3とHTML5だけでタブを作り、複数のページを表示させる【JS不要】で作ったタブシステムは瞬間的に切り替わるので、少し野暮ったい。 他にアニメーションを多用したサイトであれば、タブシステムも同様にアニメーションを実装するべきかと思われる。そこで本記事ではその解説を行う。 タブシステムの基本形(改修) 従来型は、スマホ表示になると、折り返して表示していたので、横スクロールに仕立てる。 まずHTML。 <!DOCTYPE ...
    続きを読む

  • FontAwesomeや画像を選択できるプルダウンメニュー【JS不使用】
    普通のselectタグの場合、画像やアイコンを表示させようとしてもうまく行かない。他にも、複数選択しないといけないとき、selectタグにmultiple属性を指定するだけでは操作が難しい。 そこで、画像とFontAwesomeが表示できて、なおかつ複数選択可能なプルダウンメニューを作ってみた。 ソースコード html5、いつものinputタグに、checkboxとradioを使っている。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> ...
    続きを読む

  • 【Slack風】モーダルダイアログ無し、ページ遷移無しで編集フォームを作る【JS不使用】
    投稿されたコンテンツを編集する時、編集フォームを表示するページに遷移したり、編集フォームをJSなどを使用してモーダルダイアログとして表示させることがある。こんなふうに。 しかし、これでは他のコンテンツを見ながらの編集ができない。それだけでなく、ページ遷移やダイアログ表示を行うとJSやサーバーサイドに負担がかかる。そこで、投稿したコンテンツを表示する場所を、編集フォームに切り替えるように仕立てる。こん ...
    続きを読む

  • CSS3とHTML5だけでタブを作り、複数のページを表示させる【JS不要】
    例えば、こんなふうにタブでページを切り替えて表示させるフロント。 かつてはJSじゃないと成立しなかったが、今となっては、JS不要でCSS3とHTML5だけで再現できる。 コード まず、HTML。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>タブシステム</title> <link rel="stylesheet" href="style.css"> </head> <body> <input id="tab_radio_1" class="tab_radio" type="radio" name="tab_system"><label class="tab_label" for="tab_radio_1">タブ1</label> <input id="tab_radio_2" class="tab_radio" type="radio" ...
    続きを読む