Clik here to view.
[BOXモデル]box-sizing: border-box; / content-box; の違い
box-sizing: content-box;を使うことがあったのでおさらいメモです。box-sizingとは以下4つで整形された要素①content + ②border + ③padding + ④marginbox-sizing: border-box;とbox-sizing:...
View Articleフレックスボックスの解除「要素を縦並びにする」
やりたいこと→要素を横並びから縦並びに置き換えたい@media(max-width:767px){ /* 横並び解除 */ .menu-item{ display: block; } } 通常時のcss .menu-item{ display: flex; }子要素横並びになるスマートフォン向けのcss .menu-item{ display:block; }子要素が縦並びになる
View Article【PHP】MAMP使用でCSSが適用されない時の対処法
https://y-com.info/contents/?p=1165こちらのページが参考になりました。実際に私が行った対処法は、Applications > MAMP > bin > php > php7.4.9 > conf > php.iniを開くcmd + F ショートカットで OPcache.enable_cli...
View ArticleClik here to view.
「初心者向け」JavaScriptで簡単なくじ引きシステムを作る
どうも7noteです。簡単なくじ引きシステムをjavascriptで作ります。2チームに分けたり、あたりとはずれの本数を決めてくじびきすることができます。見本※jQueryを使用しています。jQueryって何？という方はこちら仕様・参加メンバーとくじの本数を選択・スタートボタンを押す。・あたりの人とはずれの人の2種類に分ける※くじの本数が足りない時はアラートで警告を出す。ソースindex.html&...
View Article30代からのプログラミング勉強 5日目（HTML/CSS入門編）
本日は仕事が休みだったので短時間のコースを一気見しちゃおう！なんて思っていたのですが、MacOSがアプデされておらずこの後できるかなぁといった所です。と言う訳でまだ時間はありますがキリのいい所まで進んだので投稿していきます。学習内容CSS影box-shadow:0010pxrgba(0,0,0,.4)影の設定。X軸、Y軸、影のサイズを指定。rgbaのaで透過度を指定出来る。太字font-weight...
View ArticleなぜJSが必要なのか？ (JS学習アウトプット)
あいさつ初めての人は初めまして！知っている人はこんにちは！ Atieです！実は一度qiitaのアカウントを消したのですが「web系エンジニアになろう(勝又さん)」の本を読んで「qiitaのアカウントは必要」ということだったのでまた作りました！...
View ArticleDjango＋html＋cssでサイドバーテンプレートを5分で作る
本記事の対象者Djangoの公式ドキュメントで丁寧に書かれているチュートリアルは試した！けど、どうすればそれっぽい見た目のWebサイトを作れるんだ・・・？と悩んでいるそこの貴方！！！「とにかくいい感じの固定サイドバー」があれば、良いwebサイトに見える気がしませんか？見えますよね！この「とにかくいい感じの固定サイドバー」を5分で実装できればいいな〜〜と思っている良く深い貴方が対象です。前提条件仮想環...
View ArticleClik here to view.
【ec-cube.co】cssをコーディングソフトで編集する方法
ec-cube.coというクラウド版のEC-CUBEでは、管理画面から編集してサイトをカスタマイズしていくことが基本ですが、ローカル環境にテンプレートとして読み込むことで、コーディングソフトで編集していくことができます。今回はcssの編集方法を紹介したいと思います。準備するものEC-CUBEのローカル環境手順ローカル環境の用意ec-cube.coのテンプレートのエクスポートローカル環境にテンプレート...
View Articleobject-fitで画像をうまく調整する
はじめに現在、質問アプリケーションの開発を個人で行っています。新しく画像を非同期で保存し、プレビューに表示させる機能を実装するにあたってobject-fitという簡単に画像を指定したサイズに調整してくれるcssプロパティを使用したので学習メモとして残します。object-fitとは？CSSのobject-fitプロパティは、置換要素、例えばimgタグやvideoタグなどの中身を、コンテナーにどのよう...
View ArticleCSS postion absolute / relative
positionプロパティpositon = 要素を配置する基準を指定するプロパティ基準の場所を区別する為に、absolute(絶対位置)とrelative(相対位置)がある。absolute(絶対位置)移動するときの基準がウィンドウ、もしくは親要素になる。 absoluteで指定した場合、他の要素を無視して左上（top:0、left:0の位置）が基準になる。.クラス名 or #id名 {...
View ArticleClik here to view.
Qiitaのトレンド表示が改悪された
2020/11/30あたりにQiitaトップページのレイアウトが変更されました。トレンドにNewの表示が出なくなった。訪問済リンクの色が変わらなくなった。結果として、その記事を既に閲覧したかどうかが全く判別できない。なんで:visited入れてくれないの？？？あとLGTMだけで1行取るのってわりと無駄な気がする。解決策Stylusとかに↓のCSSを突っ込めばいいです。.css-81mxb5a:vis...
View ArticleCSSで三角形を表現する方法
サンプル See the Pen triangle by pd_kosaka (@pd_kosaka) on CodePen. 解説borderを使って表現します。※詳細はサンプルをSassを参照
View Article【初心者でもわかる】width: auto;とwidth: 100%;の違い
どうも7noteです。分かっているようで難しいautoと100%の違い。widthを指定する際、初期値でautoが入っています。しかし、場合によっては100%を指定しなければならない場面もあります。特に初心者の方がごっちゃになりやすいと思うので、違いを分かりやすくまとめてみました。違い① ブロック要素かインライン要素での違いブロック要素の場合width: auto;横幅 ＝...
View Article駆け出しエンジニア の学習記録 4日目 HTML/CSS
参考サイト↓http://www.htmq.com/html/indexm.shtmlinsert mode 勝手に発動していたcss class は ."class名" id は #"id名"pタグの中のclassを指定するのは p."class名" h1,p 両方を指定 h1,".class名" 両方を指定 div p divタグのpを指定...
View Article2日目
2日目やってみた日中出たり入ったりが多々あったせいか、疲れてしまい1ページ（フォントカラーとサイズ）だけしか出来なかった次は背景色変更とサイズの修正個人的にはなんかHTMLらしくなってきたと思う
View ArticleClik here to view.
Qiitaのトレンドが見づらくなっていたので
ついさっき書きました。ぜひ、Stylus(Chrome版 / Firefox版)などの拡張機能でこのCSSを適用してみてください。ソースコードUserStyle/* タイトルがちょっと濃い *//* あとフォントサイズがデカすぎる */.css-qrra2n{color:#333;font-size:16px;line-height:1.4;}/* headerのフォントサイズもデカい...
View Article[CSS]フォントの太さを指定する
[CSS] 見出しタグのフォントの太さを指定する見出しタグとは<h1>~<h6>のことです。<h1>~<h6>のHとはHeadingの略です。見出しという意味です。見出しタグの太さ<h1>~<h6>は初期状態でfont-weight: bold;になっています。 CSSでfont-weight:...
View ArticleClik here to view.
今時のフロントエンドエンジニアに見て欲しい保守性の高いHTML/CSSの書き方
これはPOLプロダクト部 Advent Calendar 2020 2日目の記事です。昨日の@miznoさんからバトンを頂きました。柳沢です。 POLではフリーランスとして主にフロントエンドの領域を担当しております。最近のフロントエンドのやること多いですよね。 TypeScriptで型定義して、React書いてーredux書いたと思ったら、非同期の部分でthunk使わなあかんくてそれも書いて...
View Article