Clik here to view.
レスポンシブ設計 キホンの基本 part2~flex-wrap: wrap;
前回はレスポンシブのための一歩目をやりました⤵︎https://qiita.com/zakaryo/items/ee0a799f4d1bb61f2517今回は折り返しについてやっていきます。いざdisplayをflexにし横並びにすることができたとしても、そのままだと子要素のコンテンツが増えたときに、延々と詰め込まれてしまいうことになります。こんな感じに。style.css.container{di...
View ArticleClik here to view.
固定幅の親要素の子要素を横幅100%にするCSS
子要素をブラウザ横幅100%表示するCSSです。レスポンシブデザインでコンテンツが固定幅、画像は横幅100%という場面で多く使うためmixinで登録しておくと便利です。デモ See the Pen OJVLZLv by harumi-sato (@harumi-sato) on CodePen....
View ArticleJenkinsの成果物HTMLにCSSを適用する
はじめにJenkinsのビルド結果を確認するためにHTMLを成果物として登録したはいいものの、インラインで定義したCSSが適用されない…という状況に遭遇したのでメモ原因JenkinsはContent Security...
View Article初心者によるプログラミング学習ログ 230日目
100日チャレンジの230日目twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。すでに100日超えましたが、継続。100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。230日目はおはようございます230日目・udemyで、css＋javascript講座・webサイト部分的模写#早起きチャレンジ#駆け出しエンジニアと繋がりたい#1...
View ArticlePrettierとstylelintで保存するときに自動整形する
概要CSSの記述をPrettierとstylelintで保存するときに自動整形できるようにします。最小限の設定です。プロパティの並びはアルファベット順にします。手順インストールと設定ファイル作成npm i -D stylelint stylelint-config-recommendedでインストールnpm i -D prettier stylelint-config-prettier@7.0.0...
View ArticleNext.jsでCSSを読み込む方法
Next.jsでCSSを読み込むときは、Headを定義しlinkタグにて読み込む以下のような感じimport React from "react"; import Header from "../includes/header"; import Head from "next/head"; const MainLayout = props => { return ( <>...
View ArticleIFRAMEにコンテンツをフィットさせるには
固定サイズのHTMLを、それよりも小さいサイズのIFRAMEに縮小して表示したかったので、その対処方法です。課題たとえば1440px X 1000pxの大きさのHTMLを幅800pxのIFRAMEに表示します。解決方法index.html<!DOCTYPE...
View ArticleClik here to view.
HTML+CSSコーディングの言語化
はじめにHTML＋CSSコーディングにおける制作者の思考や判断、アプローチ、コード化に至るまでの流れなどを分解し、コードの状態なども含めてそれぞれを短い言葉で言語化しました。以下のような効果が期待できます。HTMLとCSSを使っておこなってきた事を客観視・再認識できる始原的な動機を把握することで、手法を別の視点で捉えられるようになる認識合わせや熟練度確認に利用し、制作時のコミュニケーションを円滑にす...
View Articleスクロールしても背景固定
参考サイト参考デモhtml<divclass="fixed-bg bg01"><h1>見出し</h1></div><divclass="scroll-bg bg-color01"><p>コンテンツ</p></div><divclass="fixed-bg...
View Articlez-indexでわけがわからなくなった君へ
HTMLとかCSSとかの基本はこれや・後に記述してるやつほど表にくる以下みたいにすると、試してないけど、たぶん画面は青くなるんちゃうかなって思うねん<style>.a,.b{position:fixedtop:0;left:0;width:100%;height:100%;}.a{background-color:red;}.b{background-color:blue;}</s...
View Article初心者によるプログラミング学習ログ 231日目
100日チャレンジの231日目twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。すでに100日超えましたが、継続。100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。231日目はおはようございます231日目・udemyで、css+javascript講座・webサイト部分的模写#早起きチャレンジ#駆け出しエンジニアと繋がりたい#1...
View ArticleClik here to view.
27歳、未経験です あっ・・・（察し）
はじめになんだこのオッサン！？（驚愕） 近年半導体業界が不景気になり業界丸ごとタイタニック並みに沈没しました。請負先も「クビだクビだクビだ」ということでお仕事なくなってしまったので学生時代に興味があったWebエンジニアとして働きたく転職活動を始めました。インプットした事を忘れないようにする為Qiitaでサボらずアウトプットして行きます。あっ!...
View ArticleClik here to view.
コンポーネント単位の設計をしたらデザインガイドラインをつくろう
こんにちは、しがないwebデザイナーです。去年の11月に、Spotlightという仮想通貨を使ったCtoCメディアサービスをリリースしました。（担当箇所はデザインと画面コーディングです。）そして、2019年5月31日に可決された改正資金決済法に含まれる「暗号資産カストディ業務に対する規制」に伴って1月31日のサービス内容変更と同時にデザインの改修も行いました。そのときに、デザインガイドラインなるもの...
View ArticleClik here to view.
楽天スマホ商品ページにiframeを入れる
対象読者楽天市場に開店したての人楽天GOLD（FTP）を契約している人スマホの商品ページ上部を自由にレイアウトしたい人つまりスマホの見た目をこんな風にしたい方向けです。読み終わった後に得られるもの楽天GOLDでできることが少し分かる楽天商品ページにおいて、CSSのどこをいじれば何がどう変わるかがチョットワカル次のステップに進む準備ができるヒントを得るカモ（バナー以外にも、いろいろ自由にレイアウトを作...
View ArticleClik here to view.
overflow-wrap(word-wrap)、word-breakやら、結局どれがいいの？について検証
経緯この検証をする前は、こんな感じの知識で仕事をしてました。「うわっ文章、枠からはみ出ててもうてるやん。」「とりあえずword-wrapとかword-breakいれといたらええんちゃうか。」しばらくすると、やっぱ問題が「こんにちは」(^o^)/本件、一時的には解決。でも、やっぱちゃんと知識入れやなあかんなーと思い、この記事を書くことにしました。ちなみにword-wrapは古い名称で、今はoverfl...
View Article[HTML＆CSS]テキストのオンマウスでポップアップメッセージを表示
概要自分のアウトプット用の記事です。テキストのオンマウスでポップアップメッセージを表示させる方法今回は、JavaScriptやjQueryなどを使わず、HTMLとCSSのみで簡単に実装できるサンプルコードを紹介。目次１ １．上にメッセージを出す場合２ ２．下にメッセージを出す場合３ ３．右メッセージを出す場合４...
View ArticleBulmaのアルファベット順クラス一覧
Bulma歴3日目のド素人による自分用メモです。動機Bulmaのドキュメントはとても分かりやすいのですが、カテゴリ別に整頓してあるのが微妙に使いづらいなぁと思っています。例えばtitleクラスの使い方を確認したいと思ったときに、「どのカテゴリを見ればいいんだっけ？Components？ちがった。Elementだった」ということがあるのでちょっと辛い。一覧になっているとページ内検索で一発でたどり着けて...
View ArticleClik here to view.
【Laravel】デフォルトの管理画面に左メニューをサクッと設置
最近Laravelはじめました。Laravelにはデフォでユーザ管理機能が存在しますが、そのログイン後の画面はコンテンツエリアのみのレイアウトとなってます。これをよくある固定左メニュー＋コンテンツエリアのレイアウトにしてみます。（完成形）0. 管理機能の有効化ver5系ではphp artisan...
View Article