初学者のレスポンシブデザイン
はじめに就活で使用しているポートフォリオにレスポンシブなデザインを取り入れたので書きます。（私は現在就活中の大学生です）レスポンシブとはPC、タブレット、スマホなど異なる画面サイズの幅に合わせて柔軟にデザインを調整し、見やすい最適な表示にすることです。私の大学のホームページにもつい最近導入されました。（うちの大学は遅れてるのかな？レスポンシブの導入レスポンシブなデザインを始める前に、まずHTMLのヘ...
View Article社内の月朝ゆるもく会で作ったバーチカルメニュー
毎週月曜朝、7:00~8:30くらいでゆるっともくもく会をやり始めました。頑張って早起きして、アウトプット出していきたい。。。成果物 See the Pen circle by UMA (@umaniel) on CodePen....
View ArticleWeb制作初心者制作で知っていると便利な英単語一覧
Web制作初心者制作で知っていると便利な英単語一覧クラスの名前付けをしているとここは何てクラス名を付ければいいんだろうとか、参考にしたいソースを見た時にこれ何て読むのだろうとか、書けるけど読み方がわからなくて同僚と話すときにタジタジになってしまうなどあると思います。...
View ArticleClik here to view.
【CSS】transition
transitionマウスのポインタを要素の上に置いたときに変化する時間を指定できる多くの場合は hover と一緒に使用する【CSS】hoverのときに下記の動画を載せました。これに transition...
View ArticleClik here to view.
Vue.js / Nuxt.js: 「img要素の高さ」に「img要素上のdiv要素の高さ」を合わせる
はじめにimg要素の上にdiv要素を重ねる際の高さ合わせに時間を溶かしたので、打開策の一つを紹介します。特定の言語・フレームワークに限った話ではないですが、今回はVue.js,...
View ArticleClik here to view.
【CSS】line-height
line-height行の高さを指定よくノートで 7mm 35行 など表紙に記入されているのを見たことがあるかと思います。 1行が 7mm幅 でそれが 35行 あるよという意味なのですが、あれと一緒です左・・・行の高さ 20px右・・・業の高さ 50pxもちろん文字の大きさは一緒です。...
View ArticleClik here to view.
【CSS】リンクをクリックする範囲拡大
リンクボタンをクリックする場合はカーソルを文字の上においてクリックしないとクリックできませんでした。これはリンクを作成する＜a＞タグがインライン要素のためです。ではこれを ブロック要素 に変更してみると・・・例.cssa{display:block;width:70px;height:50px;}クリックできる範囲が広がりました
View ArticleClik here to view.
javascript デジタルなカウントダウンタイマー
デジタルチックな良い感じのタイマーを実装したので速攻で共有します。成果物はこんな感じです。コードはこんな感じ。なお、スタイリングには Bootstrap4&CSSを使用しています。bootstrap4 downloadindex.html /* 画面の右下に配置 */ <divclass=""style="position:fixed;bottom:-30px;right:...
View ArticleClik here to view.
【CSS】font-weight
font-weight文字の太さを変える normal もしくは bold を指定する例.html<p>文字の太さは普通だよ</p>例.cssp{font-weight:normal;}Web↓normal なので普通の太さですしかしこの normal を bold...
View Article初心者によるプログラミング学習ログ 215日目
100日チャレンジの215日目twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。すでに100日超えましたが、継続。100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。215日目はおはようございます215日目仮のwebサイトコーディング休みだったのに、たいしたことやってない#100DaysOfCode#早起きチャレンジ#駆け出しエン...
View ArticleClik here to view.
CSSで文字をもっと読みやすく工夫しませんか！？
一番重要なのは“文字の読みやすさ”Webサイトやブログ、様々なサイトがインターネットのなかには溢れていますが、その中でもやはり一番みられるのは文章だと思っています。書籍では文字は一番の重要度であったため、様々な工夫が凝らされていたように、Webでもその点を重要視してみるのは、原点に立ち返ることにも含まれるのではないでしょうか？日本語ベースに考えるフォントWebでは、大体のベースが英字になっているため...
View ArticleMindBEMding と近代 Component 設計の共通点
マークアップ歴の長い方からすれば大した話でもないのですが、フルスタックエンジニアの方々がフロントエンド開発に参入される昨今。CSS指定に関して、備わっていると良い感覚を共有できればと思ったので、メモを書きます。MindBEMding が解決した課題Vue.js のスコープ付き...
View ArticleClik here to view.
【CSS】position: absolute; と position: relative;
position: absolute;要素の配置位置を決められるサイトの左上部分を基準とし、そこから top と left を用いて指定 right や bottom を用いることも可要素どうしを重ねて表示することもできる普通に作成すると上記のようになります。これを position: absolute;...
View ArticleClik here to view.
【css】:hoverでちょっとした吹き出しを表示
やりたい事リンクを:hoverした際に上にテキストを表示させる。テキストの文字数が変わっても崩れない。 See the Pen LYEXedW by KARIN (@kkkarin) on CodePen....
View ArticleClik here to view.
Chromeでdark modeの表示確認方法
dovtoolsを開いてRenderingを選択prefers-color-schemeで設定この設定を切り替えれば表示確認ができる参考https://stackoverflow.com/questions/57606960/how-can-i-emulate-prefers-color-scheme-media-query-in-chrome
View ArticleClik here to view.
【CSS】box-shadow
box-shadowボックスに影をつける名前通りでなんておぼえやすい・・・box-shadow: 水平方向 垂直方向 色; 厳密に言えばどこを基準にするかで水平方向も垂直方向も変わってくるのでしょうが、現段階では水平方向→横方向垂直方向→縦方向でいいかと思います横にのみ影CSS. box-shadow: 10px 0px #dfdfdf; 影を横方向に 10px...
View Articlerails+froalaエディタ使用の注意
表示させる部分にはクラスに'fr-view fr-element'を付けるfroalaエディタは、とても高機能のエディタである。ブログアプリで使用するとき、form画面ではとくに問題ないが、その内容を表示させるときに思うように表示されないときがある。それは、form画面ではデフォルトで<div class="fr-view fr-element">...
View ArticleClik here to view.
【CSS】cursor
cursor要素にカーソルが乗ったときにカーソルの形を変えるなにも指定しないと赤い四角にカーソルをのせても何の変化もありません。cursor: text;テキスト編集カーソルになるCSS.cursor: text; テキストを入力するときに変化するローマ字の I のカーソルに変更になりましたcursor: pointer;リンクカーソルになるCSS.cursor: pointer;...
View ArticleClik here to view.
【CSS】クリックボタンを押したらボタンがへこむアニメーション
完成形を確認クリックボタンを押したらボタンがへこむアニメーションをつくりましょう上のアニメーションのようなものを完成させましょう！とても簡単にできます・・・が、そのまえに active の説明:active要素がクリックされているあいだだけ CSS が適用されるセレクタ:active { プロパティ: 値; } 書き方は hover...
View Article
