Clik here to view.
【CSS】::selectionの使い方。テキストを選択した時のcssを指定する。
セレクタで::selectionを使うとテキスト選択時のcssを変更することができる。▼通常の選択色デフォルトでは薄い青色が指定されている。::selectionを使う▼selection適用例▼画面全体に適用する場合.css::selection{処理}セレクタに擬似要素::selectionのみ記述すると、デフォルトの指定を変更することができる。▼指定した要素に適用する場合.css要素::sel...
View ArticleClik here to view.
[CSS]クリック時のボタン装飾に関して(:active,box-shadow,cursor)
今回は、HTMLとCSSを用いてクリック時にボタンが立体的かつ凹む（押している実感）仕様をまとめます。ここでポイントとなるのが、:active,box-shadow,cursorの3つのプロパティになるかと思います。完成品下記の流れで完成させます。あくまで学習した事を詰め込んだので、必要がないCSSもあるため、そこは各々で取捨選択をお願いいたします。作成する手順No.操作ファイル手順1HTML＆CS...
View ArticleProgateでHTML,CSSを学んでみた（4日目）
概要Web開発に興味が出てきたのでとりあえず一通り必要そうなものを触ってみることにしました。ただ触るだけだと忘れてしまいそうなのでメモとして学んだことを書いてみます。ここにあるコードはほぼ全てProgateで出てきたものです。フッターの構造フッターの左側にロゴ、右側にリストがある。ProgateでHTML,CSSを学んでみた（3日目）で<li>にCSSで要素を追加した。なので、このままで...
View ArticleClik here to view.
【初心者でもわかる】縦横画面いっぱいに画像を綺麗に表示する方法
どうも7noteです。画像が画面いっぱいに入っているファーストビューを作ります。画面いっぱいに画像が入っているサイトって、オシャレじゃないですか？ただ綺麗に作るためには画像の選別からCSSの書き方までちょっとした工夫や知恵が必要です。そのような細かいところを解説できればと。画像を画面幅と高さいっぱいにする方法index.html<divclass="first_view"><img...
View ArticleClik here to view.
Canvasのことをちょっぴり知る
この記事についてHTMLのCanvasで「どんなことができるのか？」「どんな作品ができるのか」というところを重点的にまとめた記事になります。技術的な内容にはあまり触れていないです。対象者Canvasを知らない人や触ったことがない人Canvasとは？HTML5から導入された図形を描くための技術仕様です。...
View ArticleClik here to view.
【CSS】backdrop-filterを使って画像をいい感じに装飾しよう
画像のキャプションなどをいい感じに装飾したい 下の画像のように、イメージの上に磨りガラスのようないい感じのキャプションを重ねたい時ってありますよね。 そんな時はbackdrop-filterを使いましょう。 この記事を読むことでCSSのプロパティ、backdrop-filterを使いこなし、イカしたwebサイトを作りましょう！...
View ArticleClik here to view.
Swiper Slider Space matter on Smartphone. Swiperのスライダーでスマホ表示の時にできる余分なスペースの解消。
To make space smaller Swiper slider when viewing on smartphone. Swiperのスライダーを利用したときにスマホ（縦）表示で余分なスペースを解消。Too much of space like below.以下のようにスライダーの上下にスペースが。。。 There is a solution to make like...
View ArticleCSSフレームワーク(KUROUTO Kit)を作って公開してみました
CSSフレームワークCSSフレームワークと言うと、やはりBootStrapが一番有名ですかね。自分としてはUIkitがデザイン的に好きだったりしますが。有名どころを色々と使ってみてUIkitに落ち着いたものの、やはり毎回カスタムなどは必要になってくるので、なら自分なりのCSSフレームワークを作ってみようと。＃あと国産(日本産)のCSSフレームワークがあまり無いなーと思い。KUROUTO...
View Article初心者のためのPugの基礎知識
概要初心者のためにPug（パグ）とはなんぞやを解説していきます。対象者HTML,CSSの知識があるPugを使ってみたい方PugとはPug（パグ）は、HTMLを効率的に書くためのテンプレートエンジンです。使い方はCSSで言うSassみたいなもので、拡張子.pugのファイルを書き、変換されHTMLファイルとして出力されます。（コンパイル環境が必要になりますが、今回は環境以外のPugの書き方など考え方につ...
View ArticlePostCSSを導入するにあたっての基礎知識
概要PostCSSって何がすごいの？を初心者目線から解説していきます。対象者CSSの知識があるPostCSSに興味がある方PostCSSとはCSSプリプロセッサを使えば、すばやく、そして、楽にCSSコーディングが行える上、メンテナンス性の高いCSSを設計することができます。主にどのようなことができるかというと…変数が使える入れ子にできる頻繁に使用する記述を使いまわせるプログラミング言語のように関数を...
View ArticleClik here to view.
2020年に流行ると言われていたニューモフィズムをCSSで実装する
対象読者HTMLとCSSがある程度書ける方ニューモフィズムについて知りたい方ニューモフィズムの実装方法を知りたい方自身のwebサービスにモダンなデザインを取り入れたい方ニューモフィズムとはニューモフィズムとはオブジェクトが背景に密着して盛り上がっているように見えるデザインです。言葉で説明するよりも実物を見たほうがわかりやすいと思うのでこちらをご覧下さい。今年こそ流行る…？ニューモフィズムは、スキュー...
View ArticleProgateでHTML,CSSを学んでみた（5日目）
概要Web開発に興味が出てきたのでとりあえず一通り必要そうなものを触ってみることにしました。ただ触るだけだと忘れてしまいそうなのでメモとして学んだことを書いてみます。ここにあるコードはほぼ全てProgateで出てきたものです。入力フォームの作り方入力フォームの作り方は<input>と<textarea>の2種類ある。<input>要素は1行のテキスト入力を受け取る...
View Article【効率化】Emmetの使い方
はじめに最近Web制作の案件を受注できたプログラミング初心者。 Emmetついて、まとめたので投稿しますわ😇目次EmmetとはHTMLの雛形単体要素を入れ子にする要素を複数作成する要素を同階層に作成するidとclass混ぜて使用してみたCSSの記述EmmetとはHTMLやCSSの記述をサポートしてくるプラグインのこと。独自の省略記法によるコーディング作業を効率化している。...
View Articleボーダーが２個できる？
備忘録としてアップしますチャットを終了するのボタンを作ろうとした際に、ボーダーが２個できてしまうエラーが発生しました。以下エラーのスクショhttps://gyazo.com/9a950170296593558bbcdf31bb9a9d86以下問題のコード HTMLmain_chat.html.erb<div class="main_chat_top"> <div...
View ArticleClik here to view.
Hello Dollyはただのプラグインではないのか検証してみた
Hello DollyとはおそらくWordPressでもっとも知名度の高い、プラグイン。”Hello Dolly”このプラグインはWordPressをダウンロードすると初期でインストールされている。有効化するかしないか・・・むしろ削除していいのか。頭を抱えたことがある人もいるかも知れない。ある先生に面白いよと言われ興味をもったのが今回の記事の発端です。プラグインの詳細にはこう書かれている。”This...
View ArticleClik here to view.
Flutter で CSS ライクにグラデーションを書く方法 🎨
以前書いた記事のコメントで Flutterだと CSSのようにはグラデーションを書けないというやり取りをしました。今回はなるべく CSSに近いかたちでコーディングをしたいというテーマです。 🏹...
View ArticleclassNameを上書きできるReactコンポーネントを作る方法
classNameにクラス名を割り当ててスタイリングしたコンポーネントを実装すると、単純に実装しただけではコンポーネントの呼び出し時にclassName属性を新たに追加(注)した際に元々のスタイリングが全て消えてしまう。注:...
View ArticleClik here to view.
【初心者でもわかる】アラートや確認ダイアログを画面中央に表示する方法
どうも7noteです。アラートなどの警告ボックスを画面中央に表示させます。javascriptのalert等は表示位置を変えることができないので1からオリジナルで作ります。ボタンを押した後の処理は書いてませんので利用目的に合わせて改良してお使いください。確認してくるボックスを画面中央に出すソースのサンプル※jQueryをちょっとだけ使ってます。jQueryって何？という方はこちら。index.htm...
View ArticleClik here to view.
Bootstrapの基礎
デイトラWeb制作コース初級編DAY10の学び【この記事に書いてあること】プログラミング学習10,11日目⏩Web制作コース 初級編DAY10...
View ArticleClik here to view.
診断サービス？をつくってみたんだけども
開発者のレベルポケットモンスター緑・赤で例えるならばタケシに会うレベル動いたらいいな♡って念じながらプログラミングをやっています診断サービスをつくろうと思った理由アプリを開発している知り合いのボドゲ―マーに「診断アプリはオススメだよ」って言われたからです。いつかアプリ開発にも手を出したいよ～～。ゲームとかもつくりたい。そして広告収入という名の不労所得がほしい。つくったサービスhttp://myzm....
View Article