Railのビューファイルは、デフォルトでそのコントローラのCSSファイルを読み込むようになっているが、別のCSSを指定したくなった。
そこで、<%= stylesheet_link_tag 'post' %>をビューファイルのheadタグに書いてみたがエラー。(postはCSSファイルの名前)
？？？となったがなんのことはない、AddRails.application.config.assets.precompile += %w( post.css )toconfig/initializers/assets.rband restart your serverと言われているのでその通りに対処するだけだった。'config/initializers/assets.rb'に'Rails.application.config.assets.precompile += %w( post.css )'をコピペしてあげるとすんなりCSSを読み込んでくれた。
Railsのエラーコメントって優しい。
・コピー&ペーストで使用可能
・本ページの記述は全てモバイル端末を優先としている(レスポンシブでPCにも対応)
・学習するとともに随時更新を行う
html制作に必要な初期テンプレート
使用可能：jQuery, bootstrap, fontawesome, googlefonts
<!doctype html><htmllang="ja"><head><!-- Required meta tags --><metacharset="utf-8"><metaname="viewport"content="width=device-width, initial-scale=1, shrink-to-fit=no"><!-- fontawesome --><script src="https://kit.fontawesome.com/7c414374ac.js"crossorigin="anonymous"></script><!-- google fonts --><linkhref="https://fonts.googleapis.com/css?family=M+PLUS+1p|Montserrat|Noto+Serif+JP|Sawarabi+Mincho&display=swap"rel="stylesheet"><!-- Bootstrap CSS --><linkrel="stylesheet"href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"crossorigin="anonymous"><!-- MyCSS --><linkrel="stylesheet"href="assets/style.css"><title>titl</title></head><body><header><nav></nav></header><divclass="main"></div><footer></footer><!-- Optional JavaScript --><!-- jQuery first, then Popper.js, then Bootstrap JS --><script src="https://code.jquery.com/jquery-3.4.1.js"></script><script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"crossorigin="anonymous"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"crossorigin="anonymous"></script></body></html>設定箇所：cssの初期化, form要素の最適化, font-sizeのrem指定設定, img要素の最適化
/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;vertical-align:baseline;background:transparent;}body{line-height:2;letter-spacing:0.18em;font-family:'Montserrat',sans-serif;font-family:'Noto Serif JP',serif;}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}navul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}a{margin:0;padding-left:0.2rem;vertical-align:baseline;background:transparent;text-decoration:none;color:black;}a:hover{background:transparent;text-decoration:none;color:black;}/* change colours to suit your needs */ins{background-color:#ff9;color:#000;text-decoration:none;}/* change colours to suit your needs */mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold;}del{text-decoration:line-through;}abbr[title],dfn[title]{border-bottom:1pxdotted;cursor:help;}table{border-collapse:collapse;border-spacing:0;}/* change border colour to suit your needs */hr{display:block;height:1px;border:0;border-top:1pxsolid#cccccc;margin:00;padding:0;border:0;}/* form要素のcss全リセット */input,button,select,textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:none;border-radius:0;font:inherit;outline:none;}textarea{resize:vertical;}input[type='checkbox'],input[type='radio']{display:none;}input[type='submit'],input[type='button'],label,button,select{cursor:pointer;}select::-ms-expand{display:none;}/* form要素のcss全リセットここまで *//*リセットここまで*//* font-size rem指定用に変換 */html{/* ルートのフォントサイズを10pxに設定しておく */font-size:62.5%;}body{/* ルートのフォントサイズを1.5em（15pxと同等のサイズ）に設定 */font-size:1.5em;}h1{font-size:3rem;}h2{font-size:2.0rem;}h5{font-size:1.5rem;}a{font-size:2.5rem;}/* font-size rem指定用に変換ここまで *//* イメージ要素をウィンドウサイズより大きくしない */img{object-fit:cover;max-width:100%;height:auto;}/* イメージ要素をウィンドウサイズより大きくしないここまで */<footerclass=""><divclass="center"><imgsrc="images/お店のロゴ"alt="お店のロゴ"></div><p>〒58s-45s54 住所xxxx-x</p><p>TEL：<ahref="tel:000-1s34-5s78">000-1s34-5s78</a></p><p>MAIL：aaa@aaa.com</p><divclass="site-info"><iclass="far fa-copyright mr-2"aria-hidden="true"></i><small>2020 Omisenonamae</small></div></footer>css
.center{height:8rem;text-align:center;}.site-info{text-align:center;}コンテンツごとに丁度良く区切れるので
.p-top2{padding-top:2rem;}.p-top3{padding-top:3rem;}.m-top2{margin-top:2rem;}.m-top3{margin-top:3rem;}丁度良いサイズのマップ
html
<!-- グーグルマップ --><divclass="gmap"><iframe>任意のマップ</iframe></div>css
.gmap{height:0;overflow:hidden;padding-bottom:56.25%;position:relative;}.gmapiframe{position:absolute;left:0;top:0;height:100%;width:100%;}html
<script src="assets/script.js">css
/* instagram */$(function(){try{this.name="achon0807";$.ajax('https://www.instagram.com/'+this.name+'/',{timeout:2000,datatype:'html'}).then(function(data){json_string=data.split("window._sharedData = ")[1];json_string=json_string.split("};</script>")[0]+"}";this.Arrya_data=JSON.parse(json_string);letdatas=this.Arrya_data.entry_data.ProfilePage[0].graphql.user.edge_owner_to_timeline_media.edges;for(iindatas){url=datas[i].node.display_url;this.html=`
<div class="col-6 col-lg-3 p-2 news-height cardImgWrp">
<img src="${url}" class="cardImg news-img" style="box-shadow: 5px 5px 20px #00000052;">
</div>
`;$(".insta-card").append(this.html);}});}catch(error){alert(error);}});今回はHTML,CSS,JavaScriptを使って「蛇口」を作ります。
実際に動作するサンプルはこちら https://www.o--o.cf/
※このURLは私の作品置き場なので、違う作品に入れ替わっている可能性もあります。
どのようなものかというと、下の画像のようなものです。
このプログラムのポイント
・水の流れを再現
・水流調節機能を搭載
・水が流れる「ジャー」という音を出すことができる
それではソースコードを載せていきます。
<!doctype html><html><head><metacharset="utf-8"><title>作業おばけ</title><style>*{text-align:center;background-color:black;color:white;margin:0;padding:0;}h1{color:gold;}h1:hover{font-size:34px;}.header{display:inline-block;padding:1em2em;margin:1em0;font-weight:bold;border:solid3pxsilver;border-radius:10px;}canvas{background:white;display:block;margin:0auto;}button{font-size:30px;color:skyblue;}.button_padding{padding:30px;}</style></head><body><spanclass="header"><h1>作業おばけ</h1></span><canvasid="myCanvas"width="320"height="320"></canvas><audioid="sound-file"preload="auto"><sourcesrc="https://drive.google.com/uc?id=1cRrFxLRh7iOOttapwTSXHpBZ5WQcezpR"type="audio/mp3"></audio><divclass="button_padding"><buttonclass="run"onclick="run();">水量調節</button><buttononclick="sound();">サウンド</button></div><script>letcanvas=document.getElementById("myCanvas");letctx=canvas.getContext("2d");letwater=10000;functionsound(){document.getElementById('sound-file').play();}functiondraw(){ctx.clearRect(0,0,320,320);ctx.beginPath();ctx.rect(10,10,200,50);ctx.rect(150,60,60,30);ctx.fillStyle="silver";ctx.fill();ctx.closePath();for(letn=0;n<water;n++){letx=Math.floor(Math.random()*50)+155;lety=Math.floor(Math.random()*280)+90;ctx.beginPath();ctx.rect(x,y,1,1);ctx.fillStyle="skyblue";ctx.fill();ctx.closePath();}}setInterval(draw,16.7);functionrun(){water=water-2000;if(water<2000){water=10000;}}</script></body></html>以上がソースコードです
このようなものが出来上がります。
今回はこれで終わりますm(_ _)m
ご覧いただきありがとうございます！
jQueryを使用してページ内リンクへ飛ぶソースコードについて解説していきます。
まず、全体のコードがこちらです。
$(function(){
$('header a').click(function(){
var id = $(this).attr('href');
var position = $(id).offset().top;
$('html, body').animate({'scrollTop':position},500);
};
});
部分的に見ていきます。
まずはじめに、ボタンのクリックイベントを作る。
$('header a').click(function(){
次に、変数「id」にクリックされたボタンの'href'属性の値を設定します。
var id = $(this).attr('href');
そして、'href'の属性値が設定された「id」を使って画面Top〜ページ内のリンクまでの距離を変数「position」に、設定します。
var position = $(id).offset().top;
最後に、animateメソッドの引数①scrollTopプロパティに先ほどのposition変数(Topからページ内リンクまでの距離）を設定し、引数②に500（ms）を設定します。
$('html, body').animate({'scrollTop':position},500);
以上の流れで押下したボタンのページ内リンクに飛ぶことができます。
最後までご覧いただきありがとうございました！
大学３年生をしています、あんぬです！
自分でWEBサイトを作れるようになりたくて、プログラミングを勉強することにしました！
QUIITA では、ラフに、その日に勉強したことをアウトプットしていこうと思います！
今日は、ドットインストールで、HTML/CSSの学習環境を整えました！
VS code がちょっと分かっただけで感動してます。（笑）
これからレベルアップしていきます！
えいえいおー
はい、どうも皆さんこんにちは〜「作業おばけ」です。
今回は「文字数計測器」というものを作っていきます。
実際の動作サンプルはこちら https://www.o--o.cf/
それでは早速ソースコードを載せます。
<!doctype html><html><head><metacharset="utf-8"><title>作業おばけ</title><style>*{margin:0;padding:0;text-align:center;background-color:black;color:skyblue;}h1{color:gold;}h2{color:lightgreen;padding:20px;}textarea{text-align:start;width:50vw;height:50vh;}button{font-size:30px;color:dimgray;}</style></head><body><h1>作業おばけ</h1><h2>文字数カウント</h2><textareaid="word_count"></textarea><br/><buttononclick="run();">実行</button><h1id="OutPut"></h1><script>letword_count="";functionrun(){word_count=document.getElementById("word_count").value;document.getElementById("OutPut").textContent=word_count.length+"文字";}</script></body></html>これをコピぺしてメモ帳に貼り付けて〇〇.htmlで保存すれば動きます。
以上。
CSSアニメーションでこんな動きを実現したい。
1文字ごとにアニメーションさせるため1文字ごとに要素を区切る。
空白から文字をスライドさせるためspanを2重にしている(後述)。
<pclass="animation"><span><span>A</span></span><span><span>N</span></span><span><span>I</span></span><span><span>M</span></span><span><span>A</span></span><span><span>T</span></span><span><span>I</span></span><span><span>O</span></span><span><span>N</span></span></p><button@click="handleClick">toggle</button>javascript部分はボタンがクリックされたら <p class="animation">にactiveクラスを付けたり除いたりする。
constelement=document.querySelector(".animation");if(element.classList.contains('active')){element.classList.remove('active')}else{element.classList.add('active')}CSSはアニメーション前後の状態を規定する。
active classがついていないときは文字を横にずらしておき、active classが付いたときに元の位置に戻す。
外側のspanに overflow: hiddenをつけることでスライドした文字を隠す。
.animationspan{overflow:hidden;display:inline-block;}.animationspanspan{transform:translateX(50px);transition:.5s;}.animation.activespanspan{transform:translateX(0);}外側のspanが無いとこうなる
メモとして、一応。
onSubmit="this.onsubmit=function(){return false}"
これは一番簡単かつ有効。
日本語は縦書きの方が読みやすそうだし、新聞や雑誌のような感じで表示できないかと模索してみた結果と問題点。
デモ・ソースコード：
- CodePen
- React版 ( ソース )
テキストはこんな感じ：
<divid="container"><p>吾輩は猫である。名前はまだ無い。</p><p>どこで生まれたか頓と見當がつかぬ。何ても暗薄いじめじめした所でニャー／＼泣いて居た事丈は記憶して居る。吾輩はこゝで始めて人間といふものを見た。然もあとで聞くとそれは書生といふ人間で一番獰惡な種族であつたさうだ。此書生といふのは時々我々を捕へて煮て食ふといふ話である。然し其當時は何といふ考もなかつたから別段恐しいとも思はなかつた。但彼の掌に載せられてスーと持ち上げられた時何だかフハフハした感じが有つた許りである。掌の上で少し落ち付いて書生の顏を見たが所謂人間といふものゝ見始であらう。此の時妙なものだと思つた感じが今でも殘つて居る。第一毛を以て裝飾されべき筈の顏がつる／＼して丸で藥罐だ。其後猫にも大分逢つたがこんな片輪には一度も出會はした事がない。加之顏の眞中が餘りに突起して居る。そうして其穴の中から時々ぷう／＼と烟を吹く。どうも咽せぽくて實に弱つた。是が人間の飮む烟草といふものである事は漸く此頃知つた。
</p><p>此書生の掌の裏でしばらくはよい心持に坐つて居つたが、暫くすると非常な速力で運轉し始めた。書生が動くのか自分丈が動くのか分らないが無暗に眼が廻る。胸が惡くなる。到底助からないと思つて居ると、どさりと音がして眼から火が出た。夫迄は記憶して居るがあとは何の事やらいくら考へ出さうとしても分らない。
</p><p>ふと氣が付いて見ると書生は居ない。澤山居つた兄弟が一疋も見えぬ。肝心の母親さへ姿を隱して仕舞つた。其上今迄の所とは違つて無暗に明るい。眼を明いて居られぬ位だ。果てな何でも容子が可笑いと、のそ／＼這ひ出して見ると非常に痛い。吾輩は藁の上から急に笹原の中へ棄てられたのである。
</p><p>漸くの思ひで笹原を這ひ出すと向ふに大きな池がある。吾輩は池の前に坐つてどうしたらよからうと考へて見た。別に是といふ分別も出ない。暫くして泣いたら書生が又迎に來てくれるかと考へ付いた。ニャー、ニャーと試みにやつて見たが誰も來ない。其内池の上をさら／＼と風が渡つて日が暮れかゝる。腹が非常に減つて來た。泣き度ても聲が出ない。仕方がない、何でもよいから食物のある所迄あるかうと决心をしてそろりそろりと池を左りに廻り始めた。どうも非常に苦しい。そこを我慢して無理やりに這つて行くと漸くの事で何となく人間臭ひ所へ出た。此所へ這入つたら、どうにかなると思つて竹垣の崩れた穴から、とある邸内にもぐり込んだ。縁は不思議なもので、もし此竹垣が破れて居なかつたなら、吾輩は遂に路傍に餓死したかも知れんのである。一樹の蔭とはよく云つたものだ。此垣根の穴は今日に至る迄吾輩が隣家の三毛を訪問する時の通路になつて居る。偖邸へは忍び込んだものの是から先どうして善いか分らない。其内に暗くなる、腹は減る、寒さは寒し、雨が降て來るといふ始末でもう一刻も猶豫が出來なくなつた。仕方がないから兎に角明るくて暖かさうな方へ方へとあるいて行く。今から考へると其時は既に家の内に這入つてたのだ。こゝで余は彼の書生以外の人間を再び見るべき機會に遭遇したのである。第一に逢つたのがおさんである。是は前の書生より一層亂暴な方で我輩を見るや否やいきなり頸筋をつかんで表へ抛り出した。いや是は駄目だと思つたから眼をねぶつて運を天に任せて居た。然しひもじいのと寒いのにはどうしても我慢が出來ん。吾輩は再びおさんの隙を見て臺所へ這ひ上つた。すると間もなく又投げ出された。吾輩は投げ出されては這ひ上り、這ひ上つては投げ出され何でも同じ事を四五遍繰り返したのを記憶して居る。其時におさんと云ふ者はつく／″＼いやになつた。此間おさんの三馬を偸んで此返報をしてやつてから、やつと胸の痞が下りた。吾輩が最後につまみ出され樣としたときに、此家の主人が騷々しい何だといひながら出て來た。下女は吾輩をぶら下げて主人の方へ向けて此宿なしの小猫がいくら出しても出しても御臺所へ上つて來て困りますといふ。主人は鼻の下の黒い毛を撚りながら吾輩の顏を暫らく眺めて居つたが。やがてそんなら内へ置いてやれといつたまゝ奧へ這入つて仕舞つた。主人は餘り口を聞かぬ人と見えた。下女は口惜しさうに吾輩を臺所へ抛り出した。かくして吾輩は遂に此家を自分の住家と極める事にしたのである。
</p><p>吾輩の主人は滅多に吾輩と顏を合せる事がない。職業は教師ださうだ。學校から歸ると終日書齋に這入つたぎり殆んど出て來る事がない。家のものは大變な勉強家だと思つて居る。當人も勉強家であるかの如く見せて居る。然し實際はうちのものがいふ樣な勤勉家ではない。吾輩は時々忍び足に彼の書齋を覗いて見るが、彼はよく晝寐をして居る事がある。時々讀みかけてある本の上に涎をたらして居る。彼は胃弱で皮膚の色が淡黄色を帶びて彈力のない不活溌な徴候をあらはして居る。其癖に大飯を食ふ。大飯を食つた後で「タカチヤスターゼ」を飮む。飮んだ後で書物をひろげる。二三ページ讀むと眠くなる。涎を本の上へ垂らす。是が彼の毎夜繰り返す日課である。吾輩は猫ながら時々考へる事がある。教師といふものは實に樂なものだ。人間と生れたら教師となるに限る。こんなに寐て居て勤まるものなら猫にでも出來ぬ事はないと。夫でも主人に云はせると教師程つらいものはないさうで彼は友達が來る度に何とかゝんとか不平を鳴らして居る。
</p><p>吾輩が此家へ住み込んだ當時は、主人以外のものには甚だ不人望であつた。どこへ行つても跳ね付けられて相手にしてくれ手がなかつた。如何に珍重されなかつたかは、今日に至る迄名前さへつけてくれないのでも分る。我輩は仕方がないから、出來得る限り我輩を入れてくれた主人の傍に居る事をつとめた。朝主人が新聞を讀むときは必ず彼の膝の上に乘る。彼が晝寐をするときは必ず其脊中に乘る。是はあながち主人が好きといふ譯ではないが別に構ひ手がなかつたから已を得んのである。其後色々經驗の上、朝は飯櫃の上、夜は炬燵の上、天氣のよい晝は椽側へ寐る事とした。然し一番心持の好いのは夜に入つてこゝのうちの小供の寐床へもぐり込んで一所にねる事である。此小供といふのは五つと三つで夜になると二人が一つ床へ入つて一間へ寐る。余はいつでも彼等の中間に己れを容るべき餘地を見出してどうにか、かうにか割り込むのであるが運惡く小供の一人が眼を醒ますが最後大變な事になる。小供は―殊に小さい方が質がわるい―猫が來た／＼といつて夜中でも何でも大きな聲で泣き出すのである。すると例の神經胃弱性の主人は必ず眼をさまして次の部屋から飛び出してくる。現に先達て抔は物指で尻ぺたをひどく叩かれた。
</p></div>CSS3 には段組みレイアウト(column)プロパティがあり、これに writing-mode: vertical-rlと text-orientation: uprightを加えると、それっぽい感じになる。
div#container{writing-mode:vertical-rl;text-orientation:upright;columns:17em;display:block;width:75%;margin:0auto;padding:2em1em;}
けれど、包含するボックスの高さ計算は１段目のみしか行われないようで、以下のようになってしまう。
これをなんとかするには、段数(column-count)かコンテナの高さ(height)いずれかを明示的に指定しなければいけないようだ。けれどテキストが長文だった場合など、段数の指定は自動的にしてほしいもの。それに多段組み表示はちゃんとできているので、その高さ値さえ入手できればなんとかなりそうではないか。
調べてみると、scrollHeightプロパティでoverflowしたテキスト分も含めた高さを取得できるようなので、それを指定：
functionadjustHeight(){letcontainer=document.getElementById('container');container.style.height=container.scrollHeight+'px';}これをページロード後に起動。ついでにウィンドウサイズが変更された時も反映してほしいので：
window.addEventListener('load',adjustHeight);window.addEventListener('resize',adjustHeight);こんな感じになった:
しかし何故か左側に隙間ができてしまっていたりする。上下のpaddingなども高さに含めなければいけないのかもしれない。
この状態でブログ記事等に使えるのかどうか、ちょっと微妙かもしれない。
今回解決したいのはこれです。
「overflow-wrapかけたのに改行されないしテーブルwidthもなんか勝手に伸ばされちゃってる問題」です。
こんなんHTML / CSSの初歩中の初歩じゃんwwwという方は、どうぞごゆるりとブラウザバックしてやってくださいませ…
「それ地味に悩んでた！」という方がもしいらっしゃいましたら、少しでも助けになれれば嬉しいです。というか一緒に悩みましょう。
あ、でも、もしそんな方が本当にいたら、こんなことに悩むよりも、
「全半角記号のブラウザテストだけ許容する」という呪文を唱えた方が5億倍早いです…というネタバレだけ先にしておきますね＞＜
今回の記事は、以下の内容に関するメモ書きです。
対象のCSSプロパティは以下の通りです。
overflow-wrap: break-word;word-wrap: break-word;word-break: break-all;word-break: break-word;スクショのほとんどは、下記環境で作成しています1。
| OS | ブラウザ |
|---|---|
| MacOS 10.15 | Chrome |
こんな時にオススメ！：
「コンテナからなるべくはみ出したくはないけど…禁則処理2もなるべく入れたいし…英単語も可能な限り綺麗な状態で表示させたいなぁ〜！」という時。
メリット：
デメリット：
処理の詳細は、MDNのCSSリファレンスで以下のように定義されています。
インライン要素に対して、テキストが行ボックスをあふれないように、ブラウザーが不可分の文字列の途中で改行を入れるかどうかの設定を適用します。
下記サイトの説明がより分かりやすいです。
単語の途中で折り返さないと行ボックスの幅からあふれてしまうときのみ、その単語の途中で折り返します。単語の途中で折り返しが発生するのは、その単語の幅が行ボックスの幅より大きい場合のみとなります。つまり、可能な限り禁則処理が保持され、可能な限り単語途中での折り返しを避けることができます。
https://w3g.jp/blog/confusing_word-break_word-wrapより
overflow-wrap: break-word;は、「単語内改行をしないこと」より「コンテナ幅」を優先する設定です。次に入力される単語がコンテナ幅の残りを超えそうな場合、単語内で改行しないように単語ごと次の行に送る制御をします。
上記の処理だけでは対応できない場合、例えば1語の長さがコンテナ幅を超えてしまう場合は、単語の途中で折り返すことを許容して、コンテナ幅に収めるという設定です。
たとえば、世界一長い地名Tetaumatawhakatangihangakoauaotamateaurehaeaturipukapihimaungahoronukupokaiwhenuaakitanarahuが入力されてコンテナを超えてしまうような場合、単語途中での折り返しが発生します。
逆に、「コンテナ幅」より「単語内改行をしないこと」を優先させたい場合は、overflow-wrap: normal;を設定します（デフォルトの値なので設定しなくても大丈夫です）。Tetaumatawhakatangihangakoauaotamateaurehaeaturipukapihimaungahoronukupokaiwhenuaakitanarahuが入力された場合には、コンテナ幅をはみ出すことを許容して、単語内の改行を防ぐ結果になります。
※ただし、overflow-wrap（word-wrap）プロパティはテーブル内のセルには使用できません。
詳しく言うと、overflow-wrap（word-wrap）プロパティはテキストの長さとコンテナ幅を計算して折り返し可否を決めていますが、テーブルのデフォルトCSS設定である自動レイアウトアルゴリズムtable-layout:auto;も、中身のテキストによってレイアウトを計算するプロパティです。
このため、重ね掛けするとoverflow-wrap（word-wrap）側の計算がうまく効かなくなってしまうようなのです。
word-wrapプロパティはoverflow-wrapプロパティの前身です。
CSS3の仕様書では現在、後方互換性のためにoverflow-wrapプロパティを使用する実装者は対応するword-wrapプロパティも併記することを推奨しています。
overflow-wrapやword-wrapは正直すごい。天才。
日本語も英語も記号も良きところで良き感じに改行してくれる。もうこれがベストプラクティス。
いや普通の実装だったらほんとoverflow-wrap先生に任せて、副担にword-wrapおじいちゃんをつけておいてあげればまず間違いない。分かってる。
でもこれで満足する人間だったらQiita書いてないんだな。
今回の課題はこれです（再掲）。
「そんな天才的なoverflow-wrap先生をかけたのに改行されないし、テーブルwidthもなんか勝手に伸ばされちゃってる問題」です。
自動計算アルゴリズムかなんか知らんが、やってくれやがりましたな…
大体のフォームやアンケートや個人情報ページなどには、文字数確定部分だけじゃなくて自由記述欄もあったりするかと思うのですが、
生半可にテキスト文字数可変項目を含むテーブルを作ると、自由記述欄に！マークが100文字とか入ったらレイアウトが死ぬ可能性が発生しちゃう…
次に紹介するのは、そんな逆境で出会った、悪魔のようなプロパティです。
どうぞ。
こんな時にオススメ！：
「死んでも絶対レイアウト崩したくねえ〜〜〜〜！！！！！！行頭の句読点とか気にしないし、英語とかマジぶつ切りになってもいいから、とにかく絶対にコンテナからはみ出させねえ（強い意志）」という時。
メリット：
デメリット：
MDNのCSSリファレンスでは以下のように定義されています。
単語中などでの文字の改行に関する禁則処理を解除し、どの文字の間でも改行するようにします。
みんな大好きword-break: break-all;。何があっても強制改行してくれます。心強い。
英単語が入るとめちゃめちゃ読みづらいのですが、正直日本語は単語の区切れ目でなくても改行できる言語なので、そんなに気にしなくても…（悪魔のささやき）overflow-wrapやword-wrapの細かいプロパティでこちゃこちゃ悩みたくねえ！！とにかく「単語内改行をしないこと」より「コンテナ幅」を最優先したい！という場合は、結局これを選んでしまうのです…（悪魔のささやき）
しかし禁則処理の（ほぼ）全解除なので、日本語でも句読点が行頭に来るなど、若干気になる人は気になる処理になってしまいます。
ちなみに、overflow-wrap（word-wrap）: break-word;とword-break: break-all;を重ね掛けした場合は、word-break: break-all;が優先されてしまうそうです。圧倒的パワー。
さて、禁則処理や英語をかなぐり捨てて「「「力」」」を手に入れた我々なので、きっと理想のテーブルが出来上がったことでしょう！！！！
そうですね、無情ですね。
詳しい理由は分かりませんが、CSS3の仕様書でも、word-break: break-all;は以下のように説明されています。
Breaking is allowed within “words”
（「語句」内での改行を行う）
stackoverflowでも「記号＄がword-break: break-all;で改行されない」という質問に対して、以下のような回答がついています。
ユニコードで「文字」「数字」ではなく「記号」として分類されているものは、禁則処理が弱いのでは
word-break: break-all;でも、テーブル内で一部記号の連続を改行することは難しいのかな…
としょげたその時、
天使が現れました。
はい天才。完成。
こんな時にオススメ！：
「IEとEdgeは捨てた。改行させてくれ」
メリット：
デメリット：
公式では以下のように定義されています。
行内で適切に改行できる場所が他にない場合に限って、単語の途中でも改行するようにします。
（https://developer.mozilla.org/ja/docs/Web/CSS/word-breakより）
いやこれがマジでやりたかった（なおIEとEdgeは非対応）。
これがマジでやりたかったんだが、word-breakプロパティの中でもなぜかこれだけIEとEdge非対応なんだな…………
IEとEdgeのことだけ都合よく記憶喪失になった人にだけ使用が許される、天使のように天真爛漫純粋無垢かつ無情なプロパティ。
このようにいろいろ試行錯誤しまして、以下条件での暫定の解決方法を見つけました。
無理やろ…と思いましたが、案外いけたんですよね。
tdの中にdivを作成し、クラス属性に以下を設定する
overflow-wrap: break-word;これだけでした。なんて簡単なんだ…divだったのか…
tdにwidth, overflow-wrap: break-word;を直接指定してもうまくいかなかったです。table-layout: auto;のせいですかね…
試行錯誤してやっと見つけたわりにはしょぼい解決法ですし、テーブル設計的に一部のtdだけ中にdiv入れるのってどうなの？とも思うのですが、自分はちょっとこれで力尽きました。。
HTML / CSSに詳しい人にぜひイケてるHTML設計アドバイス欲しいです…
「暫定解決方法でも、まあ、ウン…大丈夫だよ！動くよ！（生暖かい目）」ということであれば、そっといいねしていただけると嬉しいです😂
お読みいただきありがとうございました！
暫定解決方法については、Windows 10やIE, Edge, FireFoxでも試行しましたが、間違い等ありましたら申し訳ありません。 ↩
句読点、とじかっこなどの記号が行頭に来ないようにするルール。https://ja.wikipedia.org/wiki/%E7%A6%81%E5%89%87%E5%87%A6%E7%90%86 ↩
1週間前のjQueryよくわかってない自分に向けて書きます。
いまさらHTML5 （FileAPI編） - Qiita
意外と知らないHTML5 API - Drag & Drop APIとは | CodeGrid
Web アプリケーションからファイルを扱う - Web API | MDN
DragEvent - Web API | MDN
アイデアをすごく参考にさせていただきました
CakePHP3で画像投稿機能付き掲示板作成 ~第四回 ドラッグアンドドロップ(DnD)での画像添付 ~ - Qiita
ドラッグ＆ドロップで画像をアップロードしたい
アップロード前の状態 ↓
ドラッグしている状態 ↓
ドロップした後の状態 ↓
①input、②prebiew_field、③drop_area、④icon_clear_buttonを用意します。
<labelfor="icon"class="label-name">icon</label><divclass="user-icon-dnd-wrapper"><inputtype="file"name="icon"id="input_file"accept="image/*"><divid="preview_field"></div><divid="drop_area">drag and drop<br>or<br>click here.</div><divid="icon_clear_button">X</div></div>①inputのaccept="image/*"で受けつけるファイル型を定義しています。
参考：<input type="file"> - HTML: HyperText Markup Language | MDN
②preview_fieldはドロップ後に画像を表示します。
③drop_areaに画像をドラッグ＆ドロップします。
④icon_clear_buttonで選択した画像を消去します。
最終的には4つを重ねた状態にします。
ドラッグ＆ドロップの前に、エリアがクリックされた場合の動きを作ります。<input>はpreview_fieldとdrop_areaの下にもぐってしまう予定なので、いちばん前面にくるdrop_areaをクリックすると後ろにある<input>をクリックしたようにします。
$(function(){// クリックで画像を選択する場合$('#drop_area').on('click',function(){$('#input_file').click();});$('#input_file').on('change',function(){// 画像が複数選択されていた場合if(this.files.length>1){alert('アップロードできる画像は1つだけです');$('#input_file').val('');return;}handleFiles(this.files);});ファイルを選択するとchangeイベントが発生します。
今回は画像を1つだけアップロードするようにしたいので、lengthを確認しています。handleFilesは後ほど。
// ドラッグしている要素がドロップ領域に入ったとき・領域にある間$('#drop_area').on('dragenter dragover',function(event){event.stopPropagation();event.preventDefault();$('#drop_area').css('border','1px solid #333');// 枠を実線にする});
// ドラッグしている要素がドロップ領域から外れたとき$('#drop_area').on('dragleave',function(event){event.stopPropagation();event.preventDefault();$('#drop_area').css('border','1px dashed #aaa');// 枠を点線に戻す});いろいろと書いているのはここです。
// ドラッグしている要素がドロップされたとき$('#drop_area').on('drop',function(event){event.preventDefault();$('#input_file')[0].files=event.originalEvent.dataTransfer.files;// 画像が複数選択されていた場合if($('#input_file')[0].files.length>1){alert('アップロードできる画像は1つだけです');$('#input_file').val('');return;}handleFiles($('#input_file')[0].files);});jQueryの場合、イベントからdataTransferフィールドを受け取ることができません。originalEventを使います。
参考にさせていただきました
jQuery Event から DOM Event を取る - Qiita
DataTransfer - Web API | MDN
// 選択された画像ファイルの操作functionhandleFiles(files){varfile=files[0];varimageType='image.*';// ファイルが画像が確認するif(!file.type.match(imageType)){alert('画像を選択してください');$('#input_file').val('');$('#drop_area').css('border','1px dashed #aaa');return;}$('#drop_area').hide();// いちばん上のdrop_areaを非表示にします$('#icon_clear_button').show();// icon_clear_buttonを表示させますvarimg=document.createElement('img');// <img>をつくりますvarreader=newFileReader();reader.onload=function(){// 読み込みが完了したらimg.src=reader.result;// readAsDataURLの読み込み結果がresult$('#preview_field').append(img);// preview_filedに画像を表示}reader.readAsDataURL(file);// ファイル読み込みを非同期でバックグラウンドで開始}参考：FileReader - Web API | MDNFileReader.resultはreadAsDataURLを実行した後、onloadイベントのタイミングで取得できるようになります。
それを<img>のsrcに入れています。
最初の状態に戻します。
// アイコン画像を消去するボタン$('#icon_clear_button').on('click',function(){$('#preview_field').empty();// 表示していた画像を消去$('#input_file').val('');// inputの中身を消去$('#drop_area').show();// drop_areaをいちばん前面に表示$('#icon_clear_button').hide();// icon_clear_buttonを非表示$('#drop_area').css('border','1px dashed #aaa');// 枠を点線に変更})// drop_area以外でファイルがドロップされた場合、ファイルが開いてしまうのを防ぐ$(document).on('dragenter',function(event){event.stopPropagation();event.preventDefault();});$(document).on('dragover',function(event){event.stopPropagation();event.preventDefault();});$(document).on('drop',function(event){event.stopPropagation();event.preventDefault();});いちばん後方にある<input>はdisplay: none;などで非表示にしておいてもよいのですが、Tabキーなどで選択しているときにわかりやすくしたかったので、あえてサイズを合わせています。:focusの状態 ↓
.user-icon-dnd-wrapper{position:relative;width:100px;height:100px;}#preview_field{position:absolute;top:0;left:0;width:100px;height:100px;}#drop_area{position:absolute;top:0;left:0;width:100px;height:100px;border:1pxdashed#aaa;cursor:pointer;}#icon_clear_button{display:none;position:absolute;top:-4px;right:-8px;width:24px;height:24px;border:1pxsolid#777;border-radius:50%;cursor:pointer;}#input_file{width:100px;height:100px;opacity:0;}#input_file:focus{opacity:1;}拙い出来なので、ご指摘いただけるととてもありがたいです。
Canvasを大きめに作ってそれを縮小する感じです。
<!doctype html><html><head><metacharset="utf-8"><title>作業おばけ</title><style>canvas{width:320px;height:320px;background-color:silver;}</style></head><body><canvasid="canvas"width="640"height="640"></canvas><script>constcanvas=document.getElementById('canvas');constctx=canvas.getContext('2d');ctx.fillStyle='green';ctx.fillRect(10,10,150,100);</script></body></html>640px*640pxのCanvasを320px*320pxにしているのでDPIは４倍になります。
動作サンプルはこちら http://www.o--o.cf/
以上。
HTML要素の一つであるインラインフレームを使えば簡単にサイトに別のサイトを埋め込むことができます。
動作サンプルはこちら https://www.o--o.cf/
ソースコード
<!doctype html><html><head><metacharset="utf-8"><title>作業おばけ</title><style>iframe{width:70vw;height:70vh;}</style></head><body><iframesrc="https://www.o--o.cf/"></iframe></body></html>ソースコードを実行したときの画像
以上
皆さんこんにちは、作業おばけです。
語彙力がなくてタイトルが変になりました。。。笑
今回作ったのはランダムで色が変わる文字プレートです。
実際に動作するサンプルがありますので、こちらを見たほう早いかと思います。
URL https://www.o--o.cf/
ソースコード
<!doctype html><html><head><metacharset="utf-8"><title>作業おばけ</title><style>h1{font-size:100px;text-align:center;}</style></head><body><h1id="h1">作業おばけで検索</h1><script>functiondraw(){letrandomColor="#"+Math.floor(Math.random()*16777215).toString(16);document.getElementById("h1").style.color=randomColor;}setInterval(draw,16.7);</script></body></html>これでかなり派手な装飾ができると思います。
暴走族っぽいサイトを作りましょう笑
今回は59.8fpsで動かしていますが実際には目視で確認できる速さではないので30fps程度で十分だと思います。
私のサイトでは59.8fpsで動かしています笑
作業おばけのサイト https://www.o--o.cf/
以上。
テキストなどを中央寄せする際には主に上記の2つの手法があります。
しかしどういった場面で使い分けるのかしっかりと理解していないと苦労します。
そこで今回は中央寄せの手法の使い分けについて説明していきます。
まずtext-align:centerはインライン要素に対して使用します。
インライン要素とは例えばimgやaなどです。
注意点としては親要素をインライン要素にすると中央寄せすることができなくなる点です。
そのため親要素をdivなどのブロック要素にするのを忘れないようにしましょう。
次にmargin: 0 autoについて説明していきます。
これはブロック要素を中央寄せする際に使用します。
marginとはそもそも要素の外側の余白のことです。
autoを使用することで余白を自動で調節してくれ、結果とした中央寄せの状態になります。
そのため、ブロック要素を中央寄せするするにはmargin:0 autoと覚えておきましょう。
注意点としてはmargin: 0 auto を使用する際には必ずwidthを指定するのを忘れないことです。
なぜならブロック要素は特に指定がない限り親要素と全く同じ大きさになってしまうからです。
HTML上でTwitterやFacebookなどのアイコンを表示するにはFont Awesomeというものを使用します。
使用方法の手順としては、まず初めにhead内でFont AwesomeのCSSファイルを読み込むことです。
次の手順はspanタグにfaクラスとfa-twitterなどのfa-アイコン名クラスを指定することです。
上記の2手順だけでアイコンを表示することができます。
ex＜span class="fa fa-facebook"＞
とすることでfacebookのアイコンが表示されます。
またspanでくくっているためテキストの間に入れることができます。
要素を透明にするには主にopacityとrgbaの2種類を使用します。
opacityは要素を透明にするためだけに使用されるのに対して、rgbaは要素の色も指定します。
またopacityは中身全体を透明化するという性質があるのに対してrgbaは背景色のみなど、その色だけを透明化することが可能です
はい、どうも皆さんこんにちは〜「作業おばけです」
XML編集ってコードの最後にバックスラッシュが必要で面倒ですよね笑
そこで、「Bloggerのテーマ編集をXMLではなくHTMLで編集する方法」を紹介します。
やり方はとても簡単です。
１
左サイドバーの「テーマ」というところをクリックします。
２
画面右上の縦点をクリックします。
３
「クラシック テーマ（第一世代）に切り替える」をクリックします。
一応バックアップはしておいたほうが良いでしょう。
４
クラシックテーマに切り替えると下記の画像のようになります。
新たに「HTMLを編集」というボタンが出現します。
それをクリックしてください。
５
はい、もう完成です！
HTMLで編集できるようになりました。
Blogger特有のタグがなくても動きます！
６
最後にひとつだけやることがあります。
画面上部のナビゲーションバーを削除します。
このままだとかなり邪魔ですよね？笑
先程の「HTML編集ボタン」がある画面に戻ります。
そして画面右上の縦点をクリックしておそらく一番下にある「NavBar を変更」をクリックします。
予め「オフ」になっていると思いますが、「オフ」にした状態で保存をクリックします。
そうすればもう完了です。
きれいさっぱり消し去ることができました。
これで完全に自分の思い通りにカスタムすることができます。
以上、最後まで読んでくださりありがとうございましたm(_ _)m
作業おばけのWEBサイト https://www.o--o.cf/
簡潔にまとめてみた。
<b>タグと<strong>タグどちらも全く同じ見た目
しかし検索エンジンは<strong>タグを重視する
<strong>タグが使われているところは重要なものだと判断する
※<strong>タグを多用しすぎるとペナルティを受けることがある
作業おばけのWEBサイト https://www.o--o.cf/
忘れないように覚え書き
<style>*{margin:0;padding:0;}</style>ちなみにこのリセットCSSはすべての要素をリセットするので動作が重くなるらしいです。
作業おばけのWEBサイト https://www.o--o.cf/
朝にカフェで勉強などしているんですが、気分が乗らなかったので30分という時間制限でコーディングをしました。
そこでの気付きをここにまとめておきます。
これをCSSに実装
元Tweet
https://twitter.com/InfinityLoopGIF/status/1221289968099823616?s=20
こちらになります。
色々未完成…
Codepen
See the Pen
half circle Animation by hashito (@hashito)
on CodePen.
そのままですが、考え続けるとどうしても時間がかかってしまいます。
なので、出来る限り最短でトライアンドエラーを試すのが良いと思います。
1.結果を想像する
2.そのために何がたりないかを考える
3.どうすればそうなるかを考える←これが結構かかりますね…
4.可能性が高い方を試す
これの繰り返しかな。
単純に私の中の悪魔が「これは、こうすれば…行数が減るな…」とか考えるんですが、
これは初期では無視しましょう。
まず、目的の形にすることを優先する。
これが一番難しいですね。
例えば「思い切って別の場所に移動する」や「削除する」という判断です。
これをすると「そもそもしないほうが良かった」とかなる場合もあるので、
正直、実作業はもっと大規模なものがメインだと思うのでこれで最後まで実装しちゃうと大変な事になりそうですので、時々立ち戻ってシステム全体を構成し直したりとかが必要だと思います。
ただ、この集中と発散を効率的に繰り返せるプログラマの方は良いプログラミングができそうな気もします。
