[まとめ]HTML/CSSについて
会社の試験に向けてHTML/CSSの復習をしています。その中で「あ！忘れてるな」と思った部分があったのでまとめてみます。CSSの構成CSSはセレクタ・プロパティ・値で構成されています。次のコードを例にするとcssbody{background-color:white;}セレクタ ⇨ body (CSSによる装飾を、どの部分のHTMLに適用するか)プロパティ ⇨ background-color...
View ArticleClik here to view.
【CSS】border-radiusで画像に枠線が表示される場合の対処法。
divタグの中で呼び出した背景画像にborder-radiusを適用したところ、薄いグレーの枠線が表示されてしまっった。この対処法について。（border-radiusでは枠線はでない認識だった、、）コードの中身.css.c-jumbotron--block{border-radius:8px;height:320px;}.html<divclass="c-jumbotron...
View Articleslick+lightboxのモーダルでかっこいいパターン表示を作るまで
既にslick実装済みの環境に､モーダルを追加して､なにかのレイアウトとかデザインをかっこよく数パターン表示できるようにした際のまとめ｡モーダルって何？以下がわかりやすいですかね｡クリックするとその画像だけの別ページが最前面に表示されてくれるイメージ｡https://goworkship.com/magazine/modal-windows-mobileui/手順wordpress環境だけど､プラグ...
View ArticleClik here to view.
【CSS・Chrome】クラスが正しく反映されているのにスタイルが適用されない時に確認したいこと。
個人メモです。ローカルでcssの修正をして、localhostで正しく反映されていることを確認し、ステージング（or...
View ArticleClik here to view.
プログラミング日記#1
はじめにはじめまして、ぱぱぱぺです‼ Qiitaはプログラミングの勉強をする中で分からないところを検索したり質問をするために始めました。主にprogateでの自学をしており現在はweb開発パス(node.js)を勉強しており HTML, JavaScript, MYSQL,...
View ArticleClik here to view.
【初心者】両端揃えができる3カラムを作る3つの方法
どうも7noteです。初心者にオススメしたいフレームワーク無しで作れる3カラムデザイン。ブログのページや記事ページなどで一覧を作るときにカラムの構造を作るのですがまだHTMLやCSSの設計経験がない方には綺麗に作るのが難しいカラム。フレームワークを使えば一発で簡単かつ綺麗に作れますが、しっかりCSSの知識さえ身につければさして難しくはありません。そして作り方も1つではなくて複数あるので様々な方法をご...
View ArticleClik here to view.
フロントエンジニアのための入門～上達までのオススメ本(随時更新)
SE/エンジニアとしての基礎①システム発注から導入までを成功させる90の鉄則情シス・IT担当者[必携]...
View Articlewordpress編集時に絶対に気をつけるべきだが気づきにくい重大なポイント
wordpressは､phpや記事を直接編集できるという点でも非常に便利なCMSですが､エディタではなくwordpress上で編集してしまうからこそ気づきにくい・陥りやすい､重大なポイントがあります｡スペースに気をつけろ！はい｡超初歩的ですが､スペースです｡全角スペース/半角スペース/タブ｡VSCodeやAtomなどのエディタではプラグインで視覚的にわかるようにしている方も多いかと思います｡しかし､...
View ArticleClik here to view.
[未経験エンジニア]のオリジナルアプリ制作の反省1.「ビューは先にしっかり作っとけ」
誰なのか某短期集中エンジニア養成プログラムでエンジニア転職を目指している者です。エンジニアとして学習を始めて、現在2ヶ月になります。何を書くのかオリジナルアプリを制作した過程で「もっとこうしておけばよかった...」と後悔した部分「ここは、実装難しかったな...」と、思った部分について,1日1つ取り上げ、ネタがなくなるまで投稿します。基本的には、自分の備忘録としての記録となりますので、至らない点も多々...
View ArticleClik here to view.
Bootstrapの基礎②
デイトラWeb制作コース初級編DAY11の学び【この記事に書いてあること】プログラミング学習12,13日目⏩Web制作コース初級編DAY11💻学習時間:1時間45分⏳学習内容:Bootstrapの基礎を学ぶ②✏学び📚Bootstrapでできること1 width/height/padding/marginの調整2 Gridレイアウト3...
View ArticleClik here to view.
テスト（初投稿＆備忘録）
プログラミング初学者です。body { height: 1000px; width: 1000px; background-image: url("../images/cafe_2.jpeg"); background-size: cover; background-attachment: fixed; } とコードを書いたら何故か左寄りになったのでbody { height: 1000px;...
View ArticleNextjs+TypescriptでHTMLをStatic Exportしたときにcssをinlineで出力する方法
要約2021年1月現在、Nextjsでstatic exportするとcssがインライン( <style>タグにベタ書き)にならない。cssを...
View ArticleClik here to view.
【備忘録】同じタグ内で複数のclass名を並べる理由とCSS記述について
初めにHtmlのdivタグやspanタグにCSSを適用するためには、id名もしくはclass名を付けます。特にcalssセレクタは頻繁に使われていますが、その中でも複数のクラス名を一つの要素に並べるケースについてその理由とcssの記述について纏めてみました。目次idとclassの違い同じタグ内に複数のclass名を付ける理由同じタグ内に複数のclass名が並んだ場合のCSS記述複数のクラス名が入れ子...
View ArticleClik here to view.
【初心者でもわかる】要素をピラミッド構造で並べる方法
どうも7noteです。レイアウト案、ピラミッド編です。3カラムで並べたり、均等幅で並べたり、行送りにしたり等様々な配置方法がありますが、ちょっとマニアックにピラミッド型に並べる方法を考えてみました。誰かの参考になれば幸いです。ソースindex.html<p><span>コンテンツ</span><br><span>コンテンツ</span...
View Articleform.file_fieldの”選択されていません”を消してファイル名を表示
これからも使う機会が多いと思うので、備忘録。<%= form.file_field :image %>...
View ArticleCSSの注意点
CSSのスタイル注意点BorderやPaddingを使う際の注意点を説明します。多分また何か見つけたら更新すると思います。BorderBorderですが、このような感じですよね。stylesheet.css.border{border:mediumsolid#000000;}でもたまに...miss.css.border{border:medium,solid,#000000;}としてしまいません？...
View Articleposition:stickyを理解する
positionの役割とレパートリーpositionはウィンドウのどの位置に配置するかというのを指定できるcssプロパティです。positionにはstatic、relative、absolute、fixedと4種類のレパートリーがあります。つい最近までstickyの存在を知らなかったのですがとても便利なので使用方法を書いていこうと思います。position:stickyとはstickyはウィンドウ...
View ArticleClik here to view.
【Rails6】カスタムフォントの使い方
はじめに先日、以下の記事を拝見しました。フリーフォント好きに朗報！Fontworksから日本語フォント8書体がSILライセンスで公開、商用利用も完全に無料こちらで紹介されている「クレーOne」が僕のRailsポートフォリオテーマの雰囲気にぴったりなフォントだったので導入してみました！フォントデータのダウンロードGitHubからフォントデータをダウンロードします。https://github.com/...
View Article