HTML と CSS だけでコードエディタっぽいものを作る (contenteditable, CSS Counter, ::before...
行番号を右側に表示できてテキストを折り返して表示できる JS 不要の入力ボックスを作る。完成品はこちら。 See the Pen Text Editor by Mizuki HAGIMOTO (@mizkichan) on CodePen. 編集可能な要素を作る<textarea>はスタイリングが難しすぎる。<input...
View ArticleBEM記法でSCSSを書く際のほんのちょっとしたテクニック
BEMでscssを書く際のちょっとしたテクニックです。本当にちょっとしたものです。既に、ご紹介されている方はたくさんいますが、最近知り、地味に感動したので、自分用のメモに残しておきます。BEMを書いているとよくあるこんなことblockに対するmodifierの下位elementにスタイルを指定したいときのこんな書き方。style.scss//...
View ArticleClik here to view.
阿部寛と学ぶHTMLチュートリアル
はじめにHTMLの分かりやすい解説サイトなんていくらでもあります。だけどあえて、僕が思う一番分かりやすいチュートリアルを書こうと思います。よくある記事とは少し趣の違う記事になっていると思います。HTMLを書く流れHTMLを書くときは、以下の２つを考えます。デザインSEO（検索エンジン最適化）一つずつ解説していくので今は分からなくて大丈夫です。書き始める前の準備HTMLを書き始める前に、VSCodeと...
View ArticleClik here to view.
CSSで複数行3点リーダーを実現する「line-clamp」がついにIE以外に対応したよ！
最新のFirefoxが対応した!!これにより、IEさえ無視すれば完全にCSSのみで複数行の3点リーダーが実現可能となりました。よく使う割に難しい処理だったので、地味に嬉しいです。最新の対応状況はこちらline-clampとは？行数を指定して、テキストが領域をはみ出した時に3点リーダ「…」を表示することができます。//cssp{width:170px;display:-webkit-box;-webk...
View Article便利そうなCSSメモ
概要便利そうなCSSメモです。scroll-behavior See the Pen Scroll-Behavior by saka (@sakas) on CodePen. scroll-behaviorscroll-behavior - Can I use ...Chrome、Firefox対応済み、Edgeは76からサポート、Safariは未対応はみ出した文字の省略 See the Pen...
View Article毎日ブログ三日目
只今の時刻21:09分今日も書いていきますか今日やったこと①Progate HTML/CSS上級道場2回目ということもあり、前回よりかはできるようになりました。しかしながら、ヘッダーとメインが難しい。スマホとかタブレットのことを考えると、避けては通れない道なんですよね。・学んだことメニューアイコンを消す方法 HTMLにfa fa-bars...
View ArticleClik here to view.
chromeで不要なcssとJavaScriptを見つけ出し削除する
不要なcssとjavascriptを洗い出す方法cssをコーディングしていて余分な部分があるか分からなかったり探すのが手間がかかっていたので、便利なツールはないか探していたら不要な部分を洗い出す方法を乗せたサイトです。https://www.ecomottblog.com/?p=609consoleの横にあるメニューからCoverageを選択し開けば使用開始できるものです
View Articlecss の配置で回り込みを防ぐ方法(clearfix)
cssの配置の回り込みを防ぐぐ方法(clearfix)方法を解説してあるサイトですhttp://creator.aainc.co.jp/archives/4721cssによって回り込みを防ぐ方法です...
View ArticleClik here to view.
チュートリアル - Vue.jsでPlayCanvas製3Dモデルビュワーサイトを作る 1 / 4
※このチュートリアルはPlayCanvas運営事務局で使用しているハンズオンの資料です。PlayCanvasでWebサイトを作るこのチュートリアルでは、自作した3DモデルなどをWebから簡単に閲覧できるようにモデルビュワーを実装していきます。今回はVue.jsというJavaScriptsのフレームワークを使います。...
View ArticleClik here to view.
チュートリアル - Vue.jsでPlayCanvas製3Dモデルビュワーサイトを作る 2 / 4
前回はチュートリアルの前説と新しいプロジェクトを作るまでを行いました。今回はPlayCanvasにDOMを追加するまでを行います。DOMを乗せるDOMを乗せるためのHTMLとCSSを作ります。HTMLとCSSはPlayCanvasのAssetsから追加できます。 [+]ボタンをクリックし、該当する形式のファイルを選択します。ファイル名は任意で構いませんが、以下にするとwebな感じですね。 -...
View ArticleClik here to view.
チュートリアル - Vue.jsでPlayCanvas製3Dモデルビュワーサイトを作る 3 / 4
前回はPlayCanvasにDOMを追加するまでを行います。今回はVue.jsを使ってモデルの切り替わりなどを実装してきます。Vue.jsで3Dモデルを切り替える現在は3Dモデルが一つだけしか確認することができないので、複数の3Dモデルを追加します。ヒエラルキーからEntityを追加していきます。ヒエラルキー上部の[+]ボタンか右クリックからAdd Entity →...
View ArticleClik here to view.
チュートリアル - Vue.jsでPlayCanvas製3Dモデルビュワーサイトを作る 4 / 4
前回はVue.jsでモデルを切り替えたりTweenを入れて動かしたりするまで行いました。次は各モデルごとに詳細ページを作っていきたいと思います。3Dモデルごとに詳細ページを作る選択した3Dモデルごとに対応したDOMを表示させるようにします。まずは3Dモデルの各Entityに載せたい情報が入ったHTMLを登録していきます。今回は私の方で用意したHTMLを追加します。中の記述は任意で変更してみてください...
View ArticleGulp環境構築にて「AssertionError [ERR_ASSERTION]: Task function must be...
始めての投稿です。 1. エラー内容、背景 2. 環境 3. 解決方法 4. 原因の順に記載して行きます。1. エラー内容、背景gulpにてSassを自動コンパイルしたかったため、Homebrew、Node.js、gujpをインストール。 gulp自動監視を起動しようと、コマンド実行すると、qiita.rb'AssertionError [ERR_ASSERTION]: Task function...
View ArticleClik here to view.
django 画像をアップロードする画面を作る
envpython3.6.8 win10はじめに今回はdjangoで画像をアップロードする画面を制作します。以下手順でdjango上の画像をアップロードし表示する事ができます。それぞれの詳しい説明やトリッキーな設定方法などは他者に任せて、この記事ではなるべく記事をご覧頂いていたみなさんに早く 正確に 簡単に...
View Article[html css]簡易リンク集の作成方法
簡易リンク集の作成方法以前仕事中によく使われていたので、bak&紹介しますリンク集.htm<html><head><title>◆□■◇リンク集</title><script...
View Articleinput要素だけでcheckboxをカスタムしたい
<inputtype="checkbox"/>input[type='checkbox']{appearance:none;outline:none;display:block;position:relative;text-align:center;cursor:pointer;width:28px;height:28px;margin:0auto;}//...
View Article完全レスポンシブデザインにする必要があるかどうか
レスポンシブデザインでwebサイトを開発する場合、スマホ用とPC用でデザインをあてることになる。ここで、PCにおいて完全にレスポンシブにする必要はない場合が多い。わざわざ画面幅を変えた時の挙動を考えずとも、一番外のレイヤーにmin-width:...
View Article画像などに設定したリンクが効かない
position: absolute;で位置を変えた画像に設定したリンクが効かなかった。z-index: 99;で解決した。画像にかかわらず、クリック・ホバー時の動きが全く反応がない場合、見えない何かが上に被さってる場合が多い。今回は、近くの要素のpaddingが画像を覆っていたため反応がなかったっぽい。
View ArticleClik here to view.
マウスホバー時に border-bottom が消える奇妙な現象がEdgeでのみ起こったという話
その日、私はとある企業向けのwebアプリのブラウザ検証を行っていたブラウザ検証と言っても ie11 と Edge で動けばいいよ～程度のモノだ。私はまず Edge...
View Article